Cascading Style Sheets (CSS) allows for the remote selection and styling of HTML elements within Memory Alpha pages. Use of the style parameter to style elements is discouraged. Instead, add a class or id parameter and add styling via TemplateStyles or ask an administrator to add CSS targeting it to one of Memory Alpha's stylesheets. This allows individual users to apply their own styles to these elements, and applies to the mobile skin.
CSS pages[]
There are several layers of CSS files that affect Memory Alpha's appearance and functionality:
- Site CSS (edit access: administrators)
- MediaWiki:Common.css (FandomDesktop)
- MediaWiki:FandomMobile.css (FandomMobile)
- MediaWiki:Print.css (print output)
- Personal CSS (edit access: you)
- Special:MyPage/global.css at Community Central (FandomDesktop, across Fandom)
- Special:MyPage/common.css (all skins)
- Special:MyPage/fandomdesktop.css (FandomDesktop)
- Special:MyPage/fandommobile.css (FandomMobile)
Fandom's core CSS is always loaded first, followed by Memory Alpha's site CSS. Next comes all personal code.
CSS selectors[]
To style an HTML entity, you need to specify the entity you wish to style. If the element you are targeting has an id attribute, you can target it with #idName. If you wish to target all elements of a class, use .className. To select all instances of a given element, use elementName. If you wish to select all elements on a page, use *. To target all elements with a given attribute, use [attribute] or [attribute="value"].
You can also use these selectors in connection with each other, such as: selectorOne selectorTwo to select all instances of selectorTwo inside selectorOne; selectorOne>selectorTwo to select all instances of selectorTwo that are direct children of selectorOne; or selectorOne, selectorTwo to select all instances of selectorOne as well as all instances of selectorTwo.
Use selectorOne:active to select selectorOne while it is "active," that is, being clicked. Use selectorOne:hover to select selectorOne while it is being hovered over by the curser. Use selectorOne:visited to select visited instances of selectorOne. Use selectorOne:nth-child(n) to select every instance of selectorOne that is the the nth child of its parent.
When the value of a property on a particular entity is redefined in the CSS, the style defined last in the load order generally wins. Therefore, personal CSS overrides site CSS, which overrides Fandom's CSS. If the entity is referenced with varying degrees of specificity throughout the CSS files, the value given by the most specific entity reference will override other values. However, if a CSS declaration in the load order is marked with the !important rule, it is given importance over all other styling rules for that property on that entity, both before and after in the load order.
Tips and tricks[]
Hiding elements[]
Using the style display:none prevents the targeted entities from rendering at all. Similarly, visibility:hidden produces blank spaces replacing the content. For example,
This text has been <span class="invisible">entirely</span> removed, while this <span class="hidden">text</span> has been hidden.
with the CSS
.invisible{
display:none;
}
.hidden{
visibility:hidden;
}
gives
- This text has been removed, while this has been hidden.
Non-print[]
One can exclude content from being printed by declaring the content to be of the "noprint" class using something like <div class="noprint">This will not appear in the print version.</div>.
Variable class or id[]
A class or id can depend on a template parameter. For example, class="{{{1|}}}". This allows for the class used to be defined in template calls; if it is not, no class is specified.
Useful CSS selectors[]
Here are some CSS selectors you can use to target various elements of Memory Alpha's layout.
.fandom-sticky-header /* Sticky header */
.global-navigation /* Global navigation bar */
.community-header-wrapper /* Community header */
.page /* Page container */
.page__main /* Page content area */
.page-header /* Page header */
.mw-parser-output /* Page content */
.page-footer /* Page footer */
.page__right-rail /* Right rail */
#mixed-content-footer /* Fan Feed */
.global-footer /* Global footer */
#WikiaBar /* Toolbar */