InfoboxTabImages is a CSS stylesheet that enables the usage of images as the label in portable infobox tabs, which Fandom does not allow by default.
Each wiki has multiple templates which also includes templates with tabs which uses <panel> and <section> tags. Many creators want to show an icon/small image in these tabs. <section> makes tabs and <label> is used to name the tabs. Even though <label> tags under <data> accepts images as the label <label> under <section> does not allow it. Instead it just shows a link to the image. This stylesheet uses a simple method to overcome the problem. Currently this stylesheet officially supports up to 11 tabs and infinite amount of panels.
Installation
Usage
Copy the code below to your CSS:
.pi-theme-TemplateThemeName {
--label-color: rgba(0,0,0,0);
--image-size: 30px 30px;
--image-hover-size: 34px 34px;
--image-active-size: 32px 32px;
--image-tab_1: url('');
--image-tab_2: url('');
--image-tab_3: url('');
--image-tab_4: url('');
--image-tab_5: url('');
--image-tab_6: url('');
--image-tab_7: url('');
--image-tab_8: url('');
--image-tab_9: url('');
--image-tab_10: url('');
--image-tab_11: url('');
}
Replace the TemplateThemeName with the theme you gave to the template.
<infobox theme="Example">
.
.
.
In this case CSS selector it should be:
.pi-theme-Example {
...
}
Now add the link to the icons to --image-tab_x:url(''); where x is tab number.
- Note: Unfortunately for templates with more than 1 panel this stylesheet applies images to all of them. To get around that, read 'Notes' sections.
Notes
For templates with more than 1 panels
Unfortunately due to limitations of CSS selectors 3, there is no easy way (it is easy but there is a easier way in CSS S4) of selecting which panel or panels you should apply the images for.
So to do that you need to use nth-child(x) pseudo class. Syntax should look like this:
.pi-theme-Example section.pi-panel:nth-child(x){
/* Variables */
}
x here is different from template to template. It depends on how many Items there are before the panel. For an example if a template has a title (main one) the x should be 2. If a template has a Title and also an image x should be 3. (You can use Inspect Element (F12) of the browser to look for this).
If you want different images for different panels you can do that too. Simply make 2 (or more depending on how many panels you should apply different images) copies of the above code and change x value to match the corresponding panel.