FANDOM


  • Hi! So I'm doing my own wiki site called Victor's Drag Race and I don't know how to edit infoboxes like in an advanced way. For example my site All Stars 3: Infobox is basic and it's the same on every other site, but I want it to be like on RuPaul's Drag Race site, for example on Season 12: Infobox is rounded on the edges, infobox on every site is in other colors, and I want my infoboxes to look as awesome as their looks. I just want the color and the rounded edges thing. Can someone help, please?

      Loading editor
    • See this page with info on how to customize portable infoboxes: Help:Infoboxes/CSS

        Loading editor
    • I don't understand it at all. I'm new to these things and I just want to change the color and round the edges of my already existing infobox. And I want my infoboxes to be in other colors on every season of my page, just like on the page i've linked (RuPaul's Drag Race - Season). I also want to know how to edit the infobox in source editor, cause maybe that's what I need to know.

        Loading editor
    • To do that, you will need to use CSS. That is why Tupka217 linked to that page. This is what you currently have. A CSS rule is composed of a selector, an opening brace, one or more property declarations, and a closing brace. You have two rules at the moment. The one that starts with ".portable-infobox" should take care of the rounded corners. The one that starts with ".infobox" will not impact portable infoboxes. Is it meant to?

      To change colors based on season, you will need to use infobox themes. In turn, this means you will need to use source mode; as you suspected. If InfoboxBuilder is loaded when you try to edit an infobox, you can access source mode by clicking the button depicting "[]". It should be in the lower-right corner of the editing pane.

        Loading editor
    • So I kinda understand that, and i've created those pages but I still don't know how to even add those color option:(

        Loading editor
    • Okay. Let's say you have "Template:Character" and you want to have a theme for season 1 that changes the heading background colors to blue. On "Template:Character", you would have something like the following:

      <infobox theme-source="season">
        <title source="title">
          <default>{{PAGENAME}}</default>
        </title>
        <group>
          <header>Family</header>
          <data source="mother">
            <label>Mother</label>
          </data>
          <data source="father">
            <label>Father</label>
          </data>
          <data source="siblings">
            <label>Siblings</label>
          </data>
        </group>
        <group layout="horizontal">
          <data source="attack">
            <label>Attack Power</label>
          </data>
          <data source="defense">
            <label>Defense Strength</label>
          </data>
          <data source="health">
            <label>Health Points</label>
          </data>
        </group>
      </infobox>
      

      When used on the page, it would be something like this:

      {{Character
      |season=1
      |mother=Jane Doe
      |father=John Doe
      |siblings=Dennis Doe
      |attack=150
      |defense=75
      |health=1000
      }}
      

      In your site's CSS, you would need something like the following:

      .portable-infobox.pi-theme-1 .pi-title,
      .portable-infobox.pi-theme-1 .pi-secondary-background {
          background-color: blue;
      }
        Loading editor
    • Infoboxes to be in other colors on every season
      The easiest way is to use accent colors. As you are using "color" in Season 9 page, I have changed Template:VDR Infobox to that word.

      Round the edges of existing infobox
      Add this into MediaWiki:Wikia.css

      .pi-europa .pi-title {
      	border-top-left-radius: 10px;
      	border-top-right-radius: 10px;
      }
      .pi-europa {
      	background-color: white;
      	border-radius: 10px;
      	box-shadow: 1px 1px 3px black; 
      	box-shadow: 1px 1px 3px rgba(0,0,0,0.66);
      	margin-right: 3px;
      }
      
        Loading editor
    • Omg, it all worked!!! Thank you all so much, I don't know what would I do without you all. Thank you so much again! <3

        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.