Fandom

Infobox Wikia

Styling lists within portable infoboxes

225pages on
this wiki
Add New Page
Comments0 Share
BulletedListInInfobox

Even a simple bulleted list like this one requires some styling

Wikitext makes it pretty easy to style lists. But styling them within portable infoboxes might be less familiar to you.

Styling bulleted lists

Generating bulleted lists is a breeze in wikitext. You know the drill:

*Vulcans

** Spock
*** T'Pring
** Tuvok
*** T'Pel
** T'Pol
*** Kos

But how do you style that within a portable infobox?  Well you could just accept the default. But the chances are that by the time you got to the spouses of the more famous Vulcans in this list — especially if this were in a horizontal list — you'd get some funky indentation.

So consider some general styling for unordered lists, like this:

.portable-infobox .pi-data-value ul {
   text-indent:-1em;
   padding-left:1.5em;
   padding-top:.25em
}

If you're trying to better place an unordered list within a horizontal group, you may find that you'll need to add something like this, just to keep things even more tightly controlled:

.pi-horizontal-group .pi-horizontal-group-item {
   text-align:left!important;
   padding:2px 5px 5px 5px!important
}

Obviously, those aren't the only values that'll work, but they're a good place to start.

Styling lists created with wikitext colons

Some communities don't create traditional unordered lists. Sometimes, lists are created through colons, like this:

Vulcans
:Spock<br/>Tuvok<br/>T'Pol

In ordinary wikitext, this would generate some horizontal separation between Vulcans and the list of Vulcans. But in PI code, you've got to specify that space — and you've got to !important it. Let's say, just for fun, that you only wanted it to apply to a theme called "species".  You'd have to do this:

.pi-theme-species dl {
   margin:1em 0!important;
}

Oh, and dig this: while you can change the margins, the values above are what naturally occur in default wikitext.

See also

Ad blocker interference detected!


Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers

Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.