FANDOM


  • Hi, I'm a bureaucrat on my test wiki that I use for experimenting with CSS and JavaScript. I've been trying to create my own custom portable infoboxes that allow me to change the colors of the title/headers, border and font per page, similar to the character infobox used on the Steven Universe Wiki, and while I have figured out how to change the colors of the title/headers and border, I can't seem to figure out how to change the color of the font used for the title and header text. Help would be very much appreciated.

      Loading editor
    • I am not sure what is going on here. I can't find anything wrong with your infobox. For anyone else who tries to solve this issue, you may need to disable site CSS as it does influence the infobox.

        Loading editor
    • The CSS in Infobox.css is overriding the text accent color, with !important being the culprit.
      .portable-infobox .pi-title {
         background-color: #00A3E0;
         text-align: center;
         font-size:12pt;color:white !important
      }
       
      .portable-infobox .pi-header{
         background-color: #00A3E0;
         text-align: center;
         font-size:14pt;color:white !important
      }
      I'm not sure why it was added in first place, because there's no need of !important (which, as you can see, has its use discouraged for a good reason) to change text color of title and header in this instance, and there's also CSS prior to these snippets which's used to change text color for both without using !important. Either way, you just need to remove color:white !important to solve the issue.
        Loading editor
    • A lot of wikis use it; mostly because they don't really understand what is going on. That is why I find it annoying when users post CSS solutions here on CC that use it; that just promotes bad habits.

      Regardless, I tried with site CSS disabled an even then it didn't seem to work.

        Loading editor
    • Thanks! I've removed those lines of CSS, and it seems to work just fine now.

      One thing I've also noticed: in the page preview, or when you first load a page, the border briefly appears as the default blue before switching to the custom color. This doesn't bother me too much since the Steven Universe Wiki seems to have the same issue, but I'm wondering if perhaps there might be a way to fix it?

        Loading editor
    • Not really, unfortunately. That is just related to how quickly the various resources are loaded and applied by your browser.

        Loading editor
    • Ah. Still, I greatly appreciate you guys' help! I've been trying to figure this out for a while now and it feels good to finally get it out of the way.

        Loading editor
    • A FANDOM user
        Loading editor
Give Kudos to this message
You've given this message Kudos!
See who gave Kudos to this message
Community content is available under CC-BY-SA unless otherwise noted.