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.
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 <title>, <image>, <data source>, <label> and <format>, we also have <group>, <section> and <panel>. They help you make sure the content is displayed in the most efficient way. Beautifying the content can also require a few different types of infoboxes to make sure we do precisely what we need.
CSS
Major beautifying of PIs can only be done on MediaWiki CSS pages, however, there are also some on-page options that we will look through later. Types can help with making sure different infoboxes have a different styling and do not mix with each other. For example: we need a different infobox color for each different element from anime characters powers (fire, air, water, earth), we then declare <infobox type="fire">
and on our CSS page we use
.portable-infobox.type-fire{border:1pxsolidred;}
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:
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 <group></group> 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:
<groupcollapse="closed"></group>
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 <panel></panel> tag. The <panel></panel> tag is very useful for creating tabs within a group of our infobox that we can switch between. A <panel></panel> usually has a few <section></section> tags inside, and each <section></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 <section> of our <panel> which is called "Lvl 1". So going back to our allegories: our candy is data source, our wrapper around it is <section> and our chocolate box is <panel>. 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 <group></group> tag is our gift box, so we put our chocolate box <panel></panel> inside, and then each candy wrapper <section></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!
Looking at the screenshot above, the parts that we have changed are the following:
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 {}):
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):
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:
.portable-infobox.type-epic.wds-tabs__tab.wds-is-current{background:#db6a04;color:white;margin-top:5px;/* to make the gap between the tab and the header */}
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!
/* additional stats different size for the left column */.portable-infobox.type-epicsection.pi-item.pi-group.pi-border-color.pi-collapsesection.pi-item.pi-panel.pi-border-color.wds-tabber.wds-tab__content.wds-is-current.pi-item.pi-data.pi-item-spacing.pi-border-colorh3.pi-data-label.pi-secondary-font{flex-basis:200px;}/* additional stats different size for the right column */.portable-infobox.type-epicsection.pi-item.pi-group.pi-border-color.pi-collapsesection.pi-item.pi-panel.pi-border-color.wds-tabber.wds-tab__content.wds-is-current.pi-item.pi-data.pi-item-spacing.pi-border-color.pi-data-value.pi-font{flex-basis:70px;}
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!
