FANDOM


  • 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?

      Loading editor
    • It's not that complex; just needs some CSS. :) You'll have to add following to Wikia.css:
      .portable-infobox .pi-title,
      .portable-infobox .pi-header {
        background: url("https://vignette.wikia.nocookie.net/lady-bug/images/e/e0/Ladybug_Infobox_Background.jpg") top center / cover;
        color: #fff;
      }
        Loading editor
    • Thx

        Loading editor
    • And also how to you do it with seperate infoboxes?

        Loading editor
    • For specific infoboxes? You simply give an infobox a type or theme, such as <infobox type="character">, and put something like this in Wikia.css, depending on the type you gave the infobox:

      .portable-infobox.type-character .pi-title,
      .portable-infobox.type-character .pi-header {
         background: ;
         color: ;
      }

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

        Loading editor
    • It's not working is there something wrong here?

      Css
        Loading editor
    • Put a semicolon at the end of color: #fff

      Also, you didn't declare a type or theme for the infobox template, as seen here.

        Loading editor
    • Wdym by that? 

        Loading editor
    • To apply the type styling to infobox, you need to specify it on the template as well; e.g. <infobox type="Adrien">. See Help:Infoboxes/CSS#Using "type".

      However, type isn't suitable for your purpose. It's suitable if there's only one styling that needs to be applied to infobox, but you're trying to have multiple variable stylings (different header backgrounds for different characters). You should use theme-source for this.

      To implement and use that, you'll have to do following:

      #1. Replace this CSS:
      .portable-infobox.type-Marinette .pi-title,
      .portable-infobox.type-Marinette .pi-header {
         background: url("https://vignette.wikia.nocookie.net/lady-bug/images/e/e0/Ladybug_Infobox_Background.jpg") top center / cover;
         color: #fff; 
      }
      .portable-infobox.type-Adrien .pi-title,
      .portable-infobox.type-Adrien .pi-header {
         background: url("https://vignette.wikia.nocookie.net/marinette-dupainchenge/images/0/0e/46ae40c313d2db38b78d5df318a999c9--ladybug-party-phone-wallpapers.jpg/revision/latest?cb=20200618223153") top center / cover;
         color: #fff;
      }
      with this:
      .portable-infobox.pi-theme-Marinette .pi-title,
      .portable-infobox.pi-theme-Marinette .pi-header {
         background: url("https://vignette.wikia.nocookie.net/lady-bug/images/e/e0/Ladybug_Infobox_Background.jpg") top center / cover;
         color: #fff; 
      }
      .portable-infobox.pi-theme-Adrien .pi-title,
      .portable-infobox.pi-theme-Adrien .pi-header {
         background: url("https://vignette.wikia.nocookie.net/marinette-dupainchenge/images/0/0e/46ae40c313d2db38b78d5df318a999c9--ladybug-party-phone-wallpapers.jpg/revision/latest?cb=20200618223153") top center / cover;
         color: #fff;
      }

      #2. Replace <infobox> with <infobox theme-source="theme">.

      #3. And then, you can use it on the page like this, as an example for the Marinette theme:
      {{Miraculous Infobox
      |theme = Marinette
      }}
        Loading editor
    • Thank you that helps a lot

        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.