FANDOM


  • I have two wikis, and custom infobox design is working on one, but not the other, even though they have the same css code.

    One not working:

    https://harrilia-legacy.fandom.com/wiki/MediaWiki:Wikia.css

    One working:

    https://borea.fandom.com/wiki/MediaWiki:Wikia.css

    Does anyone have any ideas? I've checked the AllPages thing to check whether the working one has any templates the not working one does, but I can't find anything. Please help, someone!

    You can see the infobox working here:

    https://borea.fandom.com/wiki/Battle_at_the_Garden_of_Ulea

    but not here:

    https://harrilia-legacy.fandom.com/wiki/Umn%27akandrilogher%27indunpl%27astidjun

      Loading editor
    • Here are some factors that are preventing the CSS from working.

      1. The non-working wiki is using the Europa portable infobox theme. This adds an additional set of default CSS that overrides the basic default CSS. Because of how this is done, custom CSS that works on "regular" infoboxes may be overridden by the additional default CSS as well. In order to prevent this, you need to make sure that your custom CSS is adjusted to have the appropriate specificity.
      2. Your CSS on the non-working wiki is using ".type-character" but your infobox does not have its type set to "character". The infobox has its theme set to "character" which means you would need to use ".pi-theme-character". An infobox's type and its theme are separate despite being used for essentially identical purposes.
      3. Some of the CSS is page-spacific. This means that is applied to pages whose names match the given criteria. In your specific case, the entire page name must match exactly. However, as you are well aware, the page name on the non-working wiki is far from the page name on the working wiki.

      If you could provide specifics about which custom CSS changes you want to see applied and where, then I can help you rewrite the CSS. By "where", you have the following options:

      1. All infoboxes
      2. Infoboxes of a specific type
      3. Infoboxes with a specific theme
      4. An infobox on a specific page
        Loading editor
    • Edit: I changed the theme from Europa. Is there any way to change the color of infoboxes to just black? Thanks.

        Loading editor
    • Below is the reply I had prepared before seeing your edit. As for changing the color to "just black", it depends on what you mean. If what you meant was you want headers to be the same color as the rest of the infobox:

      .portable-infobox .pi-secondary-header {
          background-color: #00101a;
      }

      If what you meant was that you want both headers and the rest of the infobox to be pure black:

      .portable-infobox.pi-background
      .portable-infobox .pi-secondary-header {
          background-color: #00101a;
      }

      Based on your reply, I am guessing this is the CSS you want applied to every infobox, correct?

      .portable-infobox.type-character .pi-header {
          background-color: #89cff0;
      }
       
      .portable-infobox ul {
          text-align: left;
      }
       
      .pi-data {
          display: flex;
          align-items: center;
      }
       
      .pi-title {
          text-align: center;
      }

      Since you want it applied to all infoboxes, you don't need a type or a theme. However, you will need to rewrite it to this:

      .portable-infobox.pi-europa .pi-header {
          background-color: #89cff0;
      }
       
      .portable-infobox.pi-europa ul {
          text-align: left;
      }
       
      .portable-infobox.pi-europa .pi-data {
          display: flex;
          align-items: center;
      }
       
      .portable-infobox.pi-europa .pi-title {
          text-align: center;
      }

      If you decide to disable the Europa infobox theme, you can just use ".portable-infobox" instead of ".portable-infobox.pi-europa".

        Loading editor
    • I did this, but unfortunately it has not worked. The subheadings have turned black but nothing else. And as an addition, is there any way to make it translucent like the background?

      Edit: Also, how do I type in the name of the page with the '%27' thing without a bunch of errors?

        Loading editor
    • Which CSS from my previous reply did you use? If you want to make it transparent, then you are going to want to set the color to transparent instead of black.

      Are you talking about putting the "%27" in the CSS? You would use "\27" instead. The "%27" is referred to as an escaped character. Different protocols do this when a particular character needs to be specified but the language the protocol is written in does not allow for the character to be placed directly in text. Different protocols have different ways of escaping characters. "%27" is how URLs escape the character, "\27" is how CSS escapes the character. Just for completeness, HTML would escape the character using "'". However, I believe escaping the character would not be necessary for HTML.

        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.