User blog:LucyKuranSKYDOME/Infobox Styling Advanced Guide

Do you know how to make infoboxes? If not, then you should check our other guide about how to build an infobox from 0 level! If you already know how, have ever you seen another wiki and thought that "this infobox on that wiki is so cool, it has round edges and different colors, I want mine to be like that, too"? Today we are going to dive into some more advanced techniques related to infoboxes.

XML and CSS: just starting
First of all, there are 2 things you should know when you try to style your PI (Portable Infobox): how to write more code inside the template itself and how to style it in MediaWiki:Common.css. Therefore there is an important note: beautifying infoboxes can only be done in CSS and that requires admin rights on your wiki.

XML (functionality)
Apart from the usual, , which will give us

This way, any other infoboxes that exist on our wiki will not have the red border on them, only this exact infobox that has a type. However, since each infobox can have only one type, we would need to look into something else if we are planning to style multiple. How about using theme-source and then clarifying this on the page? That's how it is gonna work:

1) < infobox theme-source = "element" >

2)

3)

4)

Sounds fun? Let's see some more details.

XML: grouping
If you have ever thought about making separate groups of parameters in infoboxes (with headings like "Personal Information" or "Appearances"), or, moreover, even making them collapsible, this is exactly the part we are approaching!

Looking at the screenshot on the right (the infobox is here), we can see a collapsible heading with a few parameters under it that are closed by default and can be opened if necessary. This is where using comes in handy. If we need to make it collapsible, we add the collapse property to it, and then we decide the default behavior - whether it is closed or open by default. In our case we have chosen "closed", therefore our code is the following:

Groups tend to have headers, and it is especially necessary when there is a collapsible part, therefore we need to add a header inside our group tag. Thankfully it is very easy!

After this part is covered, we need to decide what our group will contain. It is always possible to add more data sources inside if needed, for example, we could easily make something like this:

This will give us the effect from the screenshot very easily! However, we can go even further than that, so let us look at another example of a complex infobox template. Looking at this screenshot (the infobox is here), we can see that there are a few general parameters (from Title to Bonus) and then a collapsible heading. The beginning is easy and covered in more details in our infobox guide for beginners, and we already know how to build the group part with a collapsed header!

However, if we are trying to build the PI from the picture, we need to go deeper into this craftsmanship and learn about   tag. The   tag is very useful for creating tabs within a group of our infobox that we can switch between. A usually has a few < /section> tags inside, and each < /section> then has data sources. It is basically like a nesting doll: you put one inside another and then inside a bigger one. Or like putting a candy in a wrapper and then in a box. Or like putting your phone in a protective case and then in your pocket. You can pick any allegory you like, and let us continue :)

Looking at the screenshot, we would like to have 3 data sources (All stats Bonus %, Starting Skill, Unique Skill Bonus). They all need to be inside the first of our which is called "Lvl 1". So going back to our allegories: our candy is data source, our wrapper around it is and our chocolate box is. Let us visualize that now: The infobox from the picture has 5 sections inside this one panel, but they work exactly the same way, so there might be as many as you like! The important part is to make sure your panel is inside your group tag under the header so let us visualize that as well: Pay attention to where each tag opens and closes, the   tag is our gift box, so we put our chocolate box    inside, and then each candy wrapper  < /section> has a candy data source inside.

CSS: Styling
We have already touched the subject of having different themes to style different infoboxes in the beginning, let us now focus on what exactly can be styled and how. Do not forget that infoboxes can only be styled in MediaWiki:Common.css, MediaWiki:Fandomdesktop.css and MediaWiki:FandomMobile.css (or another MediaWiki page that can later be imported in the main one), therefore only admins are able to do it!

The easiest way to figure out what to style and how would be using DevTools to find the right selector. Check this guide to see how to open DevTools if you have never done it before.

Looking at the screenshot above, the parts that we have changed are the following:
 * 1) The border around the whole infobox is orange with round edges & the infobox itself is slightly wider than default. It is done by targeting the main class with a special type it has (without that the selector would just be .portable-infobox {}):
 * 2) The infobox name and the other headers have a special background color to match the theme. It is done by targeting the secondary background class:
 * 3) The links are also theme-colored, and we targeted links as we see them + links when they are hovered + links when they are displayed after being visited by a user (a is an anchor tag aka links):
 * 4) The active tab styling suits the overall design, and it is done by targeting the class responsible for tabs in general and the currently active tab in particular:
 * 5) Lumiere-infobox-2.png We also changed the default width of the data in our sections that are inside the panel by modifying long selectors that lead us to the goal! Since everything we put in our infoboxes is wrapped in data source, the respective class in the CSS is .pi-data (Portable Infobox data), and this class has display: flex; by default, which allows us to use a magic property flex-basis on the elements inside and define their width in accordance with our overall infobox width (which is 280px in this case and 270px by default). This is a very long and scary road down through classes, but we got there eventually!

Trying to understand what is going on, let us split the huge selector into parts:
 *  .portable-infobox.type-epic  — this is our main infobox class;
 *  section.pi-item.pi-group.pi-border-color.pi-collapse  — this is the container for everything that is grouped including collapsed headings and the panel with all the tabs;
 *  section.pi-item.pi-panel.pi-border-color.wds-tabber  — this is the container for all the tabs and their data, basically for the whole panel;
 *  .wds-tab__content.wds-is-current  — this is the container for everything inside the first tab (all data fields for Lvl 1);
 *  .pi-item.pi-data.pi-item-spacing.pi-border-color  — this is the horizontal container for both of our fields (All stats Bonus %  +3%);
 *  h3.pi-data-label.pi-secondary-font  — this is the cell inside the collapsed panel of tabs that is on the left (All stats bonus %);
 *  .pi-data-value.pi-font  — this is the cell inside the collapsed panel of tabs that is on the right (3%);

You can find more classes here on the help page or you can keep using DevTools to find the one you need!

Enjoy your cool infoboxes time!