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

Help: CSS

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

This is an overview about Cascading Style Sheets (CSS) and its use on Fandom wikis in general, and on the For All Mankind Wiki in particular.

This is part of this wiki's coding help pages, which contains several articles about the use of CSS.

Introduction

CSS is a stylesheet language used to specify the presentation of a document written in a markup language, such as HTML. While HTML is used for the content, CSS is responsible for the layout and presentation of this content.

Use on Fandom wikis

CSS is used on Fandom wikis in many different ways.
  1. For the general wiki layout:
    • Through the site CSS files, stored in the MediaWiki namespace and restricted for editing by admins.
    • Through inline styles applied directly to the HTML element in the page source.
    • Through TemplateStyles, applied to templates and/or pages.
  2. For individual user experience:
    Users can configure their individual CSS files to alter the general layout of a wiki, or of all wikis.
    This can be done using the personal common.css file on the user's subpage on every wiki, or the global.css file on the user's subpage on Community Central.
    For more infos about this topic, read Fandom's help page on personal CSS and JS.

Wiki layout

Each of the 3 points above about styling wikis and their content have their pros and cons.
Site CSS
  • Site CSS can technically change the layout of everything (however, not everything is allowed to be changed).
  • Site CSS has to be used to style the general look and layout of the wiki.
  • Site CSS can be used to style individual sections, infoboxes, tables, individual articles, and so on, and can also provide general CSS classes which can be used on articles by regular editors.
  • Site CSS can only be edited by administrators.
  • Site CSS is loaded for everyone on every page, even if some of its code may only be used on one single page of the wiki.
  • Site-wide CSS can be defined separately for desktop and mobile users by maintaining separate CSS files.
Site CSS files used on this wiki:


Inline CSS
  • Inline CSS can be applied directly to the code while editing.
  • Everybody can use and apply it on templates or articles.
  • There are certain limitations to inline styles. Some things cannot be done with inline css.
  • Styles have to be repeated for every single element even if they are exactly the same.
  • Using lots of inline styles can bloat the code and make it hard to maintain.
  • Inline styles are not rendered for mobile users.
       →   Exception: Inline styles used within infoboxes are applied to mobile users as well.
TemplateStyles
  • TemplateStyles is a MediaWiki extension that only recently became available on Fandom.
  • TemplateStyles allow the use of "real" CSS rules which inline styles are not capable of.
  • TemplateStyles act similar like site CSS but are only applied to a certain page or certain pages, or to certain templates.
  • Everybody can use, create, and edit them.
  • TemplateStyles are rendered for both desktop and mobile users. Code can also be written to address them individually, or to display differently depending on the screen size.
  • TemplateStyles can separately address dark and light mode, which is not possible with inline styles.
  • There are certain restrictions for security reason. Some rules are not allowed. Also, it uses an older code base (CSS3 only), newer CSS rules or notations are not recognized.
  • Overall, TemplateStyles are a great way to apply CSS to certain pages only, without the restrictions that inline CSS has, and without messing up the code, but have their own flaws.
    Read our TemplateStyles help page to dive deeper into that topic.

Loading order

It is important to know how CSS files are loaded and integrated into a given page.
As the word "cascading" in CSS suggests, CSS rules are read one after the other, from top to bottom in a file, and from the first loaded file to the one loaded last. CSS rules later in the cascade can overwrite earlier definitions. If you define .banana { color: yellow; }, and then further down in the same file, or in a file loaded afterwards, there is a rule like .banana { color: green; }, then the text used with the class banana will be displayed green.
  1. First, the Fandom and MediaWiki core CSS code is loaded. This is a huge file with about 9,500 lines of code.
     
  2. Next, the site CSS files are loaded. There are two files for desktop, MediaWiki:Common.css (not used on this wiki) and MediaWiki:Fandomdesktop.css. If both are in use, they are combined into one file, where Common comes first, Fandomdesktop second. If there are any other CSS files imported into the site CSS, those imports must be on top of the first file, so in Commons (if used) or in Fandomdesktop. These imports are processed first, followed by the content of Commons and Fandomdesktop.
     
  3. Next, the user's global CSS file is loaded, including any imports made on the top of that file.
     
  4. Then, the individual user CSS file(s) are loaded. Like with the site files, Common and Fandomdesktop are combined into one file in case both exist. If there are any site CSS files addressing certain groups (possible for group-autoconfirmed, group-sysop, and group-bot), that content is also integrated into the personal CSS file of the persons in that group, applied to the end of the file.
     
  5. Finally, Fandom's CSS variable definitions are loaded.
See also: CSS and JS pages
  • Everything in the list above is loaded in the document's <head>, before any page content.
    Every file in that cascade can overwrite what was loaded or defined earlier.
    However, this is not the end of the cascade yet:
  1. TemplateStyles are added to the document's <body> at the place they are inserted into the page content. For TemplateStyles added to a page, this should ideally be done on top of the page, but templates using TemplateStyles will add their CSS rules at the place they are inserted.
    This also means that TemplateStyles are much harder to override with personal CSS than any other rules defined before. The only way to override TemplateStyles is be using a higher specificity, or with inline CSS.
     
  2. Last in the cascade are inline styles. Inline styles can override everything that inline style are able to define, given using the needed specificity.
    For that reason, the !important declaration should never be used on inline styles (and also not in TemplateStyles if somehow avoidable).
  1. Technically, there is yet another instance down the cascade, which is the user's browser. Most browsers allow the use of custom stylesheets, therefore the person viewing the page could change everything their browser receives from the webserver. But that's outside the designer's or editor's sphere of influence and only mentioned for completion.

Further reading

External sources

See also

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