Changing the colour of the section header of the infobox.

This post is locked.

Aubrey8 Miraculous·5/31/2020 in Wiki Design & SEO Advice

<p>I saw on this page that the infobox section header and title have a different colour. And I want to have the same colour on my infobox on my wiki. A friend told me that it’s very complex code, so could I have the code or wiki text for it? </p>

(Edited by Aubrey8 Miraculous)

CrazyForMyself·5/31/2020

It's not that complex; just needs some CSS. :) You'll have to add following to Wikia.css: <div dir="ltr" class="mw-geshi mw-content-ltr"><div class="css source-css">

<span class="re1">.portable-infobox</span> .pi-title<span class="sy0">,</span>
<span class="re1">.portable-infobox</span> <span class="re1">.pi-header</span> <span class="br0">{</span>
  <span class="kw1">background</span><span class="sy0">:</span> <span class="kw2">url</span><span class="br0">(</span><span class="st0">"vignette.wikia.nocookie.net/lady-bug/images/e/e0/Ladybug_Infobox_Background.jpg"</span><span class="br0">)</span> <span class="kw1">top</span> <span class="kw2">center</span> / cover<span class="sy0">;</span>
  <span class="kw1">color</span><span class="sy0">:</span> <span class="re0">#fff</span><span class="sy0">;</span>
<span class="br0">}</span>

</div></div>

(Edited by CrazyForMyself)

Aubrey8 Miraculous·5/31/2020

Thx

(Edited by Aubrey8 Miraculous)

Aubrey8 Miraculous·6/18/2020

And also how to you do it with seperate infoboxes?

(Edited by Aubrey8 Miraculous)

Dralkyrie·6/18/2020

<p>For specific infoboxes? You simply give an infobox a <i>type</i> or <i>theme</i>, such as <infobox type="character">, and put something like <i>this</i> in Wikia.css, depending on the type you gave the infobox: </p> <div dir="ltr" class="mw-geshi mw-content-ltr"><div class="css source-css">

<span class="re1">.portable-infobox</span><span class="re1">.type-character</span> .pi-title<span class="sy0">,</span>
<span class="re1">.portable-infobox</span><span class="re1">.type-character</span> <span class="re1">.pi-header</span> <span class="br0">{</span>
   <span class="kw1">background</span><span class="sy0">:</span> <span class="sy0">;</span>
   <span class="kw1">color</span><span class="sy0">:</span> <span class="sy0">;</span>
<span class="br0">}</span>

</div></div> <p>Doing it for different themes is pretty much the same thing, except you state theme instead of type. </p>

(Edited by Dralkyrie)