FANDOM


  • Hello there,

    I wanted to ask if it is possible to change the color of individual headers of an infobox.

    Like in this infobox there are Design and Technical, and I want, for example, the Design header to be orange and the Technical header to be red. The code for the infobox can be found below.

    As always, thanks in advance!


     */
    body.page-Themes_Mewmew {
    	background: #fde url("http://vignette3.wikia.nocookie.net/tokyomewmewpower/images/5/50/Wiki-background/revision/latest?cb=20131215221531");
    }
    .WikiaPage .WikiaPageBackground,
    .WikiaPage .WikiaPageBackground {
    	opacity: 0.86;
    }
    .portable-infobox {
    	border-radius: 10px;
    	border: 3px ridge #ff84c4;
    	color: white;
    	width: 282px;
    }
    .portable-infobox .pi-header,
    .portable-infobox .pi-title,
    .portable-infobox .pi-navigation {
    	margin: 2px;
    	padding: 0;
    }
    .portable-infobox .pi-item-spacing {
    	padding: 2px;
    	text-align: center;
    }
    .pi-background {
    	background: transparent;
    }
    .pi-image img {
    	height: auto;
    	width: 100%;
    }
    .pi-border-color {
    	border-color: #ffff38;
    }
    .pi-title,
    .pi-data-label,
    .pi-secondary-background {
    	background-color: #ff84c4;
    }
    .pi-title {
    	border-radius: 6px 6px 0 0;
    	font-weight: bold;
    }
    .pi-header,
    .pi-data-label {
    	border-radius: 0 8px 8px 0;
    }
    .pi-data-label {
    	display: flex;
    	flex-direction: column;
    	justify-content: center;
    }
    .pi-data-value {
    	margin: 0.4em 0;
    }
    .pi-navigation:nth-child(2) {
    	margin-bottom: 0;
    }
    .pi-navigation:nth-child(3) {
    	border-top: 1px dotted black;
    	font-style: italic;
    	font-weight: normal;
    	margin-top: 0;
    }
    .pi-navigation:last-child {
    	border-radius: 0 0 6px 6px;
    }
    .pi-navigation:last-child a {
    	color: white;
    }
     
    /*
      Loading editor
    • You can do this but only if you add the name attribute to the relevant infobox tags. For isntance:

      <infobox>
        <title source="title">
          <default>{{PAGENAME}}</default>
        </title>
        <group>
          <header name="group1">group1<header>
          <data source="param1" />
          <data source="param2" />
      </group>
        <group>
          <header name="group2">group2<header>
          <data source="param3" />
          <data source="param4" />
      </group>
      </infobox>
      
      .portable-infobox .pi-header[data-item-name="group1"] {
          background-color: orange;
      }
      .portable-infobox .pi-header[data-item-name="group2"] {
          background-color: blue;
      }
        Loading editor
    • Ah, ok thank you :D

        Loading editor
    • Well, I should have seen that coming and asked earlier but would you mind telling me how it would work with changing the individual label background color. I tried doing it but didn't really figure it out.

      Thanks in advance!

        Loading editor
    • The name attribute doesn't work directly with labels, but individual label styling is still possible by using name attribute with the data that has the label which you want to style individually.
      .portable-infobox .pi-data[data-item-name=test] .pi-data-label {
        background: #ccc;
      }
      <data name="test"><label>Label</label><default>Value</default></data>
        Loading editor
    • Hmm, ok. I put in the CSS code and tried putting the part in the infobox but it just disappears for me. How is it supposed to look when I want to apply it to the "Alias" label?:)

      <infobox>
        <title source="title1">
          <default>{{PAGENAME}}</default>
        </title>
        <image source="image1">
          <caption source="caption1"/>
        </image>
        <data source="aliases", name="ccc">
            <label>Alias</label>
        </data>
        <group>
      </infobox>
        Loading editor
    • The comma is causing the issue, there's no need for it. Just use <data source="aliases" name="ccc">.

        Loading editor
    • Oh. Is that what you meant by "headers"? In the rare case that you are using a data tag which does not have a source template parameter, then you will need to do as CrazyForMyself posted. However, if the target label belongs to a data tag that does have a source (which most likely it does), the you can just use the source attribute instead of adding a name attribute to the data tag.

      <infobox>
        <data source="param 1">
          <label>Parameter 1</label>
        </data>
      </infobox>
      
      .portable-infobox .pi-data[data-source="param 1"] .pi-data-label {
          background-color: red;
      }
        Loading editor
    • Thank you both :D

      @Andrewds1021 no, you were right, I wanted to have the headers in different colors but later on also the labels :P

      The last tip is also pretty good, it's going to save me time.

      Thanks again!

        Loading editor
    • AcceleratorLvL5 wrote: ...

      The last tip is also pretty good, it's going to save me time.

      Thanks again!

      That is exactly why I posted it even though CrazyForMyself's solution also works just fine.

        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.