For All Mankind Wiki

Hi Bob! Find your place in the universe and leave your legacy. Join Helios today as your destiny awaits.

  • This wiki contains spoilers for all published episodes.
  • This wiki is designed for dark mode.
    For best experience please consider switching mode.

READ MORE

For All Mankind Wiki
For All Mankind Wiki
For All Mankind Wiki
820
pages
in: Documentations, Help, Project articles, CSS
For All Mankind Wiki
Help page

CSS classes

Edit source
CSS classesList view
For All Mankind Wiki
Coding Help
Icon-help
•
•

This article introduces and explains CSS classes defined in the site's CSS file that can be used to style certain things on this wiki.
The classes introduced here can also be viewed in list format here.

General classes

Text align

The following classes can be used to align text.
They can be applied to divs, spans, tables, table-rows, table-cells, and other elements.
Class CSS rule
cntr text-align: center;
left text-align: left;
right text-align: right;

Center element

Class: centere
This class centers an element horizontally.
Can be applied to tables, divs (with a width), and other elements.
show examplesshow css
open this example in a new tab

Centered table:

header 1 header 2
Lorem ipsum Dolor sit amet
Sed diam Nonumy eirmod
Tempor mauris Dolore magna

Centered div: (50% width)

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 

{| class="wikitable centere"
! header 1 !! header 2
|- 
| Lorem ipsum || Dolor sit amet
|- 
| Sed diam || Nonumy eirmod
|- 
| Tempor mauris || Dolore magna
|}

<div class="w50p centere">
{{lorem|2|s}}
</div>

.centere { margin: 0.5em auto; }

Text sizes

Classes: small smaller big bigger
This class produces different text sizes, proportional to the current size.
smaller 80%
small 90%
big 108%
bigger larger
Notes
  • The HTML tag <small> is ~83.33%
  • The deprecated HTML tag <big> is equivalent to bigger (css value larger )
  • The classes "small" and "smaller" to not correspond to the CSS properties with the same name.
show examplesshow css
Class smaller Lorem ipsum dolor sit amet.
HTML <small> Lorem ipsum dolor sit amet.
Class small Lorem ipsum dolor sit amet.
Normal text Lorem ipsum dolor sit amet.
Class big Lorem ipsum dolor sit amet.
Class bigger Lorem ipsum dolor sit amet. 
.smaller { font-size: 80%;  }
.small   { font-size: 90%;  }
.big     { font-size: 108%; }
.bigger  { font-size: larger; }

Monospace text

Classes: mono and mono-small
This classes display text in monospace font.
There is also a template for this: {{mono}} (shortcut: {{m}} )
The variant mono-small reduces the font-size to 86%.
This is mostly used in documentations.
show exampleshow css
This is some text in monospace.
This is more text.
This is small text in monospace.
This is more small text.
<div class="mono">This is some text in monospace.<br>This is more text.</div>
<div class="mono-small">This is small text in monospace.<br>This is more small text.</div>

.mono { font-family: monospace; }
.mono-small {
  font-family: monospace;
  font-size: 86%;
}

Nowrap text

Classes: nw or nowrap or nobr
This class avoids line breaks within text blocks.
There is also a template for this: {{nowrap}} (shortcut: {{nw}} )
show exampleshow css
This is some normal text. It breaks where it is needed within its container

This is some text that will not break to new lines.
<span class="nw">This is some text that will not break to new lines.</span>
.nw, .nowrap, .nobr { white-space:nowrap; }

No bold text

Classes: nb or nobold
This class displays text normal within otherwise bolded text.
There is also a template for this: {{nobold}} (or shortcut: {{nb}} )
show exampleshow css

Lorem ipsum dolor sit amet. 

'''Lorem ipsum <span class="nb">dolor</span> sit amet.'''
.nb, .nobold { font-weight: normal; }

Pseudo subtitle

Class: sttl
This class can be used to produce section subtitles that do not appear in the TOC.
It uses the standard font (Rubik), bigger (116%) but not bolded, and with a small indent. It is meant to be used on a div.
There is also a template for this: {{Subtitle}} (or shortcut: {{sttl}} )
show exampleshow css
This is a subtitle
This is some indented text.
<div class="sttl">This is a subtitle</div>
:This is some indented text.
.sttl {
  font-size: 116%;
  padding-left: 10px;
  margin-bottom: -6px;
}
Example usage
Timeline/editing notes

Link color

Classes: theme-link-color or tlc or clink
This class displays text in the theme's link color, adapting to the theme used.
It's main purpose is for custom text for toggle collapsibles to be displayed like a link.
show exampleshow css
.theme-link-color, .tlc, .clink {
  color: var(--theme-link-color);
}

Indention

Classes: ind1 / ind2 / ind3
These classes indent the element they are use on.
The 3 variants define 1, 2, or 3 times the standard indent of 1.6em, i.e. 1.6 / 3.2 / 4.8 em.
The classes are mostly used on template documentations, most often on tables, but can be applied to other elements as well, like to the <pre> or <syntaxhighlight> tags, divs, etc.
show css
.ind1 { margin-left: 1.6em !important; }
.ind2 { margin-left: 3.2em !important; }
.ind3 { margin-left: 4.8em !important; }

Tables

Main page: Project:Tables

MediaWiki & Fandom tables

There are 3 predefined table design classes on Fandom wikis, one MediaWiki class and two Fandom classes.
Classes: wikitable / article-table / fandom-table
Wikitable is the default MediaWiki table design.
It has a border on all cells, greyed headers, and the wiki's page theme background on other cells. Headers cells are centered.
Article-table is a modern Fandom table design.
It has bottom borders on rows (but no borders between cells), a very lightly greyed, semi-transparent background on table cells, and a slightly darker greyed header background. Headers cells are left aligned.
Fandom-table is a Fandom table design variant of wikitable.
It has the same basic design like wikitable, but with more padding on cells. It further features sticky headers.
⇨ See our help page for some examples.
See also

FAM zebra table design

Our wiki has an additional table design: Zebra-table
Classes: zebra-table or zbrt / zebra-table-invert or zbrt-i / zebra-table-nobo or zbrt-nb
Zebra-table is a custom FAM Wiki table design.
It is similar to Fandom's "article-table", but with less padding. It features rows with slightly greyed, semi-transparent, and alternately changing background. Header cells are left aligned and have a bottom border, and the table has a top and bottom border. Other cells have no borders.
It also features some variants:
Invert zebra-table-invert / zbrt-i inverts the alternating row colors
No-border zebra-table-nobo
zbrt-nb		 Removes the top &bottom border
show examplesshow css
open this example in a new tab

Zebra table:

Header 1 Header 2 Header 3
Foo Bar Baz
Qux Quux Sus
Foobar Barbar Bazbar 
{| class="zebra-table"

Zebra table - invert:

Header 1 Header 2 Header 3
Foo Bar Baz
Qux Quux Sus
Foobar Barbar Bazbar 
{| class="zebra-table-invert"

Zebra without headers:

Foo Bar Baz
Qux Quux Sus
Foobar Barbar Bazbar 
{| class="zbrt"

Zebra invert without headers:

Foo Bar Baz
Qux Quux Sus
Foobar Barbar Bazbar 
{| class="zbrt-i"

Zebra with no-border option:

Header 1 Header 2 Header 3
Foo Bar Baz
Qux Quux Sus
Foobar Barbar Bazbar 
{| class="zbrt zbrt-nb"

Zebra invert with no-border option:

Header 1 Header 2 Header 3
Foo Bar Baz
Qux Quux Sus
Foobar Barbar Bazbar 
{| class="zbrt-i zbrt-nb"

Zebra, no-border, no headers:

Foo Bar Baz
Qux Quux Sus
Foobar Barbar Bazbar 
{| class="zbrt zbrt-nb"
.zebra-table, .zbrt, .zebra-table-invert, .zbrt-i {
  border-collapse: collapse;
  margin: 1em 0;
}

:is(.zebra-table, .zbrt, .zebra-table-invert, .zbrt-i):not(.zebra-table-nobo, .zbrt-nb) {
  border-width: 1px 0;
  border-style: solid;
  border-color: var(--theme-border-color);
}

:is(.zebra-table, .zbrt, .zebra-table-invert, .zbrt-i) th {
  text-align: left;
  border-bottom: 1px solid var(--theme-border-color);
}

:is(.zebra-table, .zbrt, .zebra-table-invert, .zbrt-i) tr               :is(td,th) { padding:   2px 12px; }
:is(.zebra-table, .zbrt, .zebra-table-invert, .zbrt-i) tr:first-of-type :is(td,th) { padding-top:    4px; }
:is(.zebra-table, .zbrt, .zebra-table-invert, .zbrt-i) tr:last-of-type      td     { padding-bottom: 4px; }

:is(.zebra-table,        .zbrt  ) tr:nth-of-type(odd)  :is(td,th),
:is(.zebra-table-invert, .zbrt-i) tr:nth-of-type(even) :is(td,th),
:is(.zebra,        .zbr  )        tr:nth-of-type(odd)      td,
:is(.zebra-invert, .zbr-i)        tr:nth-of-type(even)     td     {
  background: rgba(var(--theme-page-dynamic-color-1--rgb), 0.05);
}

:is(.zebra-table,        .zbrt  ) tr:nth-of-type(even) :is(td,th),
:is(.zebra-table-invert, .zbrt-i) tr:nth-of-type(odd)  :is(td,th),
:is(.zebra,        .zbr  )        tr:nth-of-type(even)     td,
:is(.zebra-invert, .zbr-i)        tr:nth-of-type(odd)      td     {
  background: rgba(var(--theme-page-dynamic-color-1--rgb), 0.09);
}
⇨ See our help page for more details and more examples.

FAM Wiki extra classes

There are 5 additional table classes defined in our main site CSS file that can be added to any table to alter its style.
These classes are:
aligntop-table or short: att
noborder-table
padding-table 		rounded-table-5
rounded-table-20
The classes work with any type of tables, like the predefined MediaWiki & Fandom classes explained above, or with raw tables (without a predefined class). The classes can also be combined, by just adding more than one class.
Classes are added to tables like this:
{| class="<class> <another-class>"     Example: {| class="wikitable aligntop-table"

Align top

The class aligntop-table makes all table cells vertically aligned top (default is middle).
There is also a short version of this: att
show exampleshow css
open this example in a new tab

Default display:

header 1 header 2 header 3
Lorem ipsum Lorem ipsum
Dolor sit amet
Consetetur 		Lorem ipsum
Dolor sit amet

With class aligntop-table:

header 1 header 2 header 3
Lorem ipsum Lorem ipsum
Dolor sit amet
Consetetur 		Lorem ipsum
Dolor sit amet 
{| class="wikitable"
! header 1 !! header 2 !! header 3
|-
| Lorem ipsum
| Lorem ipsum<br>Dolor sit amet<br>Consetetur
| Lorem ipsum<br>Dolor sit amet
|}

{| class="wikitable aligntop-table"
! header 1 !! header 2 !! header 3
|-
| Lorem ipsum
| Lorem ipsum<br>Dolor sit amet<br>Consetetur
| Lorem ipsum<br>Dolor sit amet
|}

:is(.att, .aligntop-table) tr :is(td,th) { vertical-align:top; }

No borders

The class noborder-table hides all borders.
show exampleshow css
open this example in a new tab

Default display:

header 1 header 2
Lorem ipsum Dolor sit amet
Sed diam Nonumy eirmod

With class noborder-table:

header 1 header 2
Lorem ipsum Dolor sit amet
Sed diam Nonumy eirmod 
{| class="wikitable"
! header 1 !! header 2
|-
| Lorem ipsum || Dolor sit amet
|-
| Sed diam || Nonumy eirmod
|}

{| class="wikitable noborder-table"
! header 1 !! header 2
|-
| Lorem ipsum || Dolor sit amet
|-
| Sed diam || Nonumy eirmod
|}

table.noborder-table,
.noborder-table tr :is(td,th) { border: none; }

Rounded borders

The classes rounded-table-5 and rounded-table-20 make the tables appear with rounded borders, with a border radius of 5px or 20 px.
show exampleshow css
open this example in a new tab

Table with 5px border-radius rounded-table-5

header 1 header 2
Lorem ipsum Dolor sit amet
Sed diam Nonumy eirmod

Table with 20px border-radius rounded-table-20

header 1 header 2
Lorem ipsum Dolor sit amet
Sed diam Nonumy eirmod 
{| class="wikitable rounded-table-5"
! header 1 !! header 2
|-
| Lorem ipsum || Dolor sit amet
|-
| Sed diam || Nonumy eirmod
|}

{| class="wikitable rounded-table-20"
! header 1 !! header 2
|-
| Lorem ipsum || Dolor sit amet
|-
| Sed diam || Nonumy eirmod
|}

.rounded-table-5, .rounded-table-20 {
    overflow:hidden;
    border-collapse: separate;
    border-spacing: 0;
}
.rounded-table-5  { border-radius: 5px;  }
.rounded-table-20 { border-radius: 20px; }

Additional padding

The class padding-table adds a padding of 12px to all cells. This is what fandom-table has by default. It can be used to create a wikitable with the fandom-table padding, but without other fandom-table specific behavior, like the sticky headers.
show exampleshow css
open this example in a new tab

Wikitable - default display

header 1 header 2 header 3
123 456 789
foo bar baz

Wikitable with class padding-table

header 1 header 2 header 3
123 456 789
foo bar baz 
{| class="wikitable"
! header 1 !! header 2 !! header 3
|-
| 123 || 456 || 789
|-
| foo || bar || baz
|}

{| class="wikitable padding-table"
! header 1 !! header 2 !! header 3
|-
| 123 || 456 || 789
|-
| foo || bar || baz
|}

.padding-table tr td { padding: 12px; }
.padding-table tr th { padding: 12px !important; }

Full width

Classes fullwidth or fw
This class makes the table use the full width available on the page.
Note: This class can also be used on other elements.
show css
.fw, .fullwidth { width: 100%; }

Custom width classes

Classes: w50p
These classes can set the width of a table or of table cells to 50, 33, 66, or 80%, respectively.
Note: These classes can also be used with other elements, e.g. for <div>.
show css
.w50p { width: 50%; }
.w33p { width: 33%; }
.w66p { width: 66%; }
.w80p { width: 80%; }

Cell align classes

The following classes can be added to tables to align certain columns.
The rules use the :nth-child and :nth-last-child pseudo classes to address cells counted from the first or the last child.
Syntax:
cc center cell
rc right align cell
n nth from the beginning
-n nth from the end
o / e odd / even rows only
All currently defined classes:
cc1 cc2 cc3 cc4 cc5 cc6
cc1o cc1e
cc-1 cc-2 cc-3 cc-4
rc1
rc-1 rc-2 rc-3
This selection of classes allows a lot of options for table column alignment, even with tables using colspan and rowspan.
Notes
  • The classes have to be applied to the table, not the rows or cells.
  • Be aware that if a cell uses for example rowspan = "2", the next row's second cell will become the first child.
Examples
{| class="wikitable aligntop-table cc2 cc3 rc-1"
This would center columns 2 + 3 of the table, and right align the last column.
{| class="wikitable aligntop-table cc1e cc-1 cc-2"
This would center the first cell of even rows and all last and second-last cells.
show css
/*  align center  */
table.cc1   tr td:first-child,
table.cc2   tr td:nth-child(2),
table.cc3   tr td:nth-child(3),
table.cc4   tr td:nth-child(4),
table.cc5   tr td:nth-child(5),
table.cc6   tr td:nth-child(6),
table.cc-1  tr td:last-child,
table.cc-2  tr td:nth-last-child(2),
table.cc-3  tr td:nth-last-child(3),
table.cc-4  tr td:nth-last-child(4),
table.cc1o  tr:nth-child(odd)  td:first-child,
table.cc1e  tr:nth-child(even) td:first-child { text-align:center; }

/*  align right  */
table.rc1   tr :is(td,th):first-child,
table.rc-1  tr :is(td,th):last-child,
table.rc-2  tr :is(td,th):nth-last-child(2),
table.rc-3  tr :is(td,th):nth-last-child(3) { text-align:right; }

Other table classes

Other classes suitable for tables but introduced in the general classes section above are:
cntr align center Can be used on the table, or on certain table cells. See text-align
right align right Can be used on the table, or on certain table cells. See text-align
centere horizontal center element Can be used on a table. See centere
small smaller
big bigger		 text-sizes Can be used on the table or on individual cells.
If used on the table, it's inherited to all cells.		 See text-sizes
nw nobr
nowrap		 no wrap Can be used on table cells. See nowrap
ind1 ind2 ind3 indents Can be used on tables. See Indention

Various classes

Hide video titles

Classes: no-vid-title      no-vid-title-#   (# = number from 1-8)
Default video titles of imported YouTube videos are often long and contain insignificant stuff. The titles can be hidden with these custom css classes.
There is a template for this: {{no-vid-title}}
See the template documentation for usage.
Note
This only works for videos inside a gallery.

Image fit to browser width

Note: This is only ever used in very specific cases, see below!
Class: fittoscreen
This class can be used to make an image adapt to the width of the viewers's browser window.
If there is a very wide image that exceeds most browser window widths, you would normally have to either resize it to a fixed width, or make it appear with a horizontal scroll bar. Both options are not optimal. This class makes the image take all available space, adapting to the width of the viewer's browser window.
show example

open this example in a new tab

The graphic Earth Moon distance has originally a width of 14,530 px.
If you resize it to lets say 600px, it will be still quite small, and be 600px wide no matter how wide the visitor's browser window is:
[[File:Earth Moon distance.png|600px]]

Earth Moon distance


You could also resize it to for example 2000px and put it in a div with the styles width:100%; height:auto; overflow: auto;. This would produce a scroll bar unless the browser window is over 2000px wide, which is also not optimal.
<div style="overflow: auto; width:100%; height:auto;">[[File:Earth Moon distance.png|2000px]]</div>
Earth Moon distance


The class fittoscreen makes it adapt to the size of the browser window.
(change your browser's window size to see it)
<div class="fittoscreen">[[File:Earth Moon distance.png]]</div>
Earth Moon distance

CSS files of this wiki

See also

Css-icon This project article uses TemplateStyles: styles
This project article has many subpages: Show subpages
Community content is available under CC-BY-SA unless otherwise noted.