User blog:Trollocool/Styling your infoboxes

This blog is a translation of my German blog in the German portability hub.

Thanks to Wikia's Tools and helpful pages, many users can already use portable infoboxes ("PIs" for short). With some experience, images, various types of data or subheadings are no problem at all. But this is only the first step of creating an infobox. In most cases, you need more than that, you need CSS.

CSS
CSS is an important part of developing portable infoboxes, the other part being the PI language. The PI language on the template page is used to create a layout for the infobox by positioning its elements in a certain order for example. CSS, on the other hand, is used for styling the infoboxes, which means manipulating the infobox' look by changing the background colors, font sizes and many other things.

Many unportable infoboxes use the  attribute for defining inline styles, which are generally seen as unportable. More portable MediaWiki style sheets are used for portable infoboxes instead. Not only the increased portability is an advantage of MediaWiki style sheets, there are various other benefits.

Because CSS is such an important part of infoboxes, Wikia offers predefined CSS though the Europa theme for the users that are not experienced CSS coders. But every wiki is unique, so the infoboxes may require smaller or even bigger changes made by hand to fulfill your expectations.

The Europa theme


The Europa theme is a feature which adds predefined style sheets for your infoboxes in your wikia and can be activated or deactivated at any time through the WikiFeatures page. For the most part, these sheets are identical, but their only difference is that their colors adapt to the wikia's colors that were defined in the Theme designer.

Big, centered titles and headers are characteristic for the Europa theme. The wikias that are satisfied with that don't require any additional CSS. If you'd like to change a few minor things, you probably should leave the theme activated and restyle some parts of it. In case the theme doesn't fit your needs at all and you want to make major changes, deactivating the theme and making a new style sheet from scratch is most certainly best for you.

Adjusting your infoboxes
Infoboxes have unified classes in all wikis. This means that CSS can be copied from one wiki to another to achieve the same look, in case Europa is either activated in both wikis or deactivated in both wikis. This means that CSS selectors differ depending on the (de)activation of Europa.

CSS selectors without Europa
A CSS selector for portable infoboxes without Europa should always start with the class.

Now you append another class for the element which you want to modify, for example  for modifying the title. The product in this case would be.

CSS selectors with Europa
CSS selectors for portable infoboxes with Europa generally start with.

If we again want to modify the title,  is appended again, which makes the product   this time.

Theme selectors


CSS selectors for your own themes begin with, instead of   or. To affect your theme, you now replace " " with the actual name of the theme.

Selecting the title is no different from the other selectors, so you just append  again. This makes a possible product.

The advantage of these selectors is that they work totally independently from the (de)activation of Europa, which means that the CSS doesn't need to be rewritten into the (non-)Europa selectors.

Your own themes
It is possible to add an own theme to your portable infobox, which isn't a theme in the sense of Europa, but a theme in the sense of adding a class to your infobox so only this particular infobox is affected by the corresponding theme CSS selector. A theme is added through the PI language on the template page. The opening  tag receives a   attribute, the result can look like this:. "themename" is replaced with an actual theme name, which shoud be logically connected to the topic, for example the theme "character" in a character infobox.

A PI with the theme "themename" is affected by less specific selectors like  or   and also more specific selectors like. The more specific CSS overrides the less specific CSS if they collide with each other. Selectors with other themes like  don't affect this PI at all.

The advantage of themes is that you can style every infobox differently. Although this function is useful, you should always keep in mind that your infoboxes should be somewhat similar. Your infoboxes shouldn't differ too much, so it's best to only change minor things like colors and not major things like widths. It's a best practice to put the CSS that should affect all infoboxes into less specific selectors and the unique CSS into more specific selectors.

CSS classes
Of course, not only the title can be affected, there are also various other CSS classes for other elements. You can modify images, data, labels, values, headers and many others as well. The most important classes are listed here with an explanation and example.

No element
In case the selector consist of only,   or  , the infobox itself, meaning the container, is modified. Frequent modifications include changing the infobox' border, its width and the distance between the border and the content.

.pi-background
is used for changing the PI's background. The background is visible where it isn't overlayered by other elements with their own backgrounds. The background is defined by the  property  and takes color names, color values (hex, RGB, HSL) or even images.

.pi-title
The title is modified by the class. The background, font size ( and  ), font family , font weight , font color  and padding  are changed.

.pi-image
Although the name misleads into the belief that  modifies the image itself, it actually modifies its container. Sometimes the background or the border  are adjusted.

.pi-image-thumbnail
is the class for the actual image. If you changed your infobox' width, you probably should include these changes:. Additionaly, if you feel that some images stretch the infobox too high, you can add a maximal height for the images width max-height. This prevents the images from getting lartger than 600 pixels in height.

.pi-header
The class  affect subheadings. In most cases, their styling is nearly the same as the title's with minor adjustments like text align or font size (  and  ). Basically, the title's styles can be copied and adjusted a little bit.

.pi-border-color
Even the borders between datas have their own class. The border color and the border thickness  are changed, but in case you don't want these borders,   can be used.

.pi-data
is the corresponding class for datas. Sometimes the distance to other datas and the padding  are changed.

.pi-data-label
Like the name indicates,  affects labels in datas, basically the left column. Font size ( and  ), font weight, font color , border , padding  and width (flex-basis:125px;) are changed frequently.

.pi-data-value
The name makes it pretty obvious again,  changes data values, the right column of datas. The style are mostly identical with 's styles, sometimes the border  is changed.

Last words
That's already the end of this blog. Please post your feedback in the comments. I hope that reading this blog was interesting and that you learned something. Thanks for reading, have fun with portable infoboxes!