Changing the color of the infobox for individual pages

The Steampunk Whovian·6/16/2016 in Wiki Design & SEO Advice

For the wikia that I am using, I would like to have an option that allows the infoboxes to be recolored for each page (for example, on one page the infobox can be red, on another it can be blue, or yellow and so on), but I haven't found a way yet. This is the template in question that I would like to have so that the color can be changed on different pages:

http://browniehaven.wikia.com/wiki/Mid_Sodor_Railway/Test_Page

Any help would be much appreciated.

(Edited by The Steampunk Whovian)

Infoboxes Color

AdorableDarling·6/17/2016

Since it is a portable infobox, you will have to create an infobox theme for each color. So, if you would want to have option to have overall infobox colored red, blue, or yellow, then following code should be added on your wiki's CSS:

.portable-infobox.pi-theme-red {
  background:red;
}
.portable-infobox.pi-theme-blue {
  background:blue;
}
.portable-infobox.pi-theme-yellow {
  background:yellow;
}

If you want to have the title and headers colored accordingly as well, then add this, too:

.pi-theme-red .pi-title {
  background:deeppink;
}
.pi-theme-red .pi-header {
  background:deeppink;
}
.pi-theme-blue .pi-title {
  background:lightblue;
}
.pi-theme-blue .pi-header {
  background:lightblue;
}
.pi-theme-yellow .pi-title {
  background:gold;
}
.pi-theme-yellow .pi-header {
  background:gold;
}

(You can go ahead and replace the colors with your needed ones from the both codes above if you want.)
And, in the infobox template, add <infobox theme-source="color"> in the place of <infobox>.
Once done, if you want the infobox to be colored yellow on a certain page, you would simply need to add |color = yellow in the infobox:

{{Infobox Railway
|color = yellow
}}

I hope you get the idea. ^^

(Edited by AdorableDarling)

CharityAngel·8/30/2016

Omg this has just saved my life! I have been fighting my infoboxes all day! Thank you so much AdorableDarling!

(Edited by CharityAngel)

AdorableDarling·8/31/2016

You are welcome. I am glad to know my post has been of some help to you. ^-^

(Edited by AdorableDarling)

What do you think?