Terraria Wiki:CSS
Cascading Style Sheet (CSS) rules define much of the look and feel of the Terraria Wiki: font size, colors, spacing, the logo, the background image, etc. Almost all of these rules are defined on the page MediaWiki:Common.css. Some are also defined on CSS pages pertaining to gadgets, e.g. MediaWiki:Gadget-previewTab.css.
If you want to make custom modifications that are only visible to yourself, log in, create the page Special:MyPage/common.css, and add your custom CSS rules there. For example, you could add #pt-watchlist { display: none !important; }
to hide the "Watchlist" button in the top bar.
The Terraria Wiki uses a large number of CSS rules, as its look and feel differ greatly from the default appearance of MediaWiki's Vector skin. Maintaining all of these rules on a single, ever-growing page had become an increasingly tedious task.[1] Therefore, the rules were split up into related groups, which are stored on separate pages (all of which are subpages of MediaWiki:Common.css/src). For example, all of the rules needed for Template:Item are stored on template/item.scss, while all the rules for the customization of Extension:Cargo are stored on extension/Cargo.scss. All of these pages use SCSS, an extension of CSS (merely an extension – all valid CSS is also valid SCSS), and are combined ("compiled") into the single Common.css again. With this method, it is much easier to extend, update, and maintain the wiki's CSS.
Workflow
You work on local project files:
Source SCSS files | compiled by SASS | CSS files | processed by the post-processor | Common.css andall Theme-<name>.css files | |||||||||||||||||||||||||||||||||
Once the output Common.css
and all Theme-<name>.css
files are generated, you can update their content to MediaWiki:Common.css as well as MediaWiki:theme-Underground.css and so on.
Custom directives
The post-processor is used to combine the compiled CSS files into the final common.css
and all Theme-<name>.css
files according to custom directives.
There are 3 custom directives:
/* @import #CSS_filename# */
directive is used to import the contents of another CSS file into the current file.@theme #theme_name#{ }
directive is used to to declare theme-specific content./*<< #comment# */
trailing comment.
Import
Syntax: /* @import #CSS_filename# */
Where the CSS_filename is relative to the root source directory. This redirective will be replaced with the content of target CSS file, an example:
SCSS source code | Compiled CSS code | Output CSS code |
---|---|---|
Common.scss:
body{ font-size: 14px; } /* @import font.css */ #content{ border: 1px solid red; } font.scss: /* heading font */ h1{ font-size: 32px; span{ font-size: 16px; //smaller } } |
Common.css:
body{ font-size: 14px; } /* @import font.css */ #content{ border: 1px solid red; } font.css: /* heading font */ h1{ font-size: 32px; } h1 span{ font-size: 16px; } |
Common.css:
body{ font-size: 14px; } /* heading font */ h1{ font-size: 32px; } h1 span{ font-size: 16px; } #content{ border: 1px solid red; } |
Theme
Syntax: @theme #theme_name# { #theme-specific content# }
It is used in a very similar way to the @media directive in SCSS. Valid theme names can refer to MediaWiki:Theme-definitions.
An example:
SCSS source code | Compiled CSS code | Output CSS code |
---|---|---|
Common.scss:
#content{ color: #FFF; @theme Snow{ color: #000; } } #footer{ color: red; @theme Snow{ color: blue; } } |
Common.css:
#content{ color: #FFF; } @theme Snow{ #content{ color: #000; } } #footer{ color: red; } @theme Snow{ #footer{ color: blue; } } |
Common.css:
#content{ color: #FFF; } #footer{ color: red; } Theme-Snow.css: #content{ color: #000; } #footer{ color: blue; } |
Trailing comment
Before SCSS 1.52.2, in the compiled css files, comments always start on a new line. With this directive, it is possible to have some comments appear at the end of the line, improving the readability of the output file.
Syntax: /*<< #comment# */
An example:
SCSS source code | Compiled CSS code | Output CSS code |
---|---|---|
Common.scss:
#content{ color: #FFF; /*<< white */ } |
Common.css:
#content{ color: #FFF; /*<< white */ } |
Common.css:
#content{ color: #FFF; /* white */ } |
The post-processor
The post-processor works on compiled CSS files. Starting from Common.css
, combine the css files according to the above custom directives and then generate output files.
Westgrass wrote one, you can find it here. An equivalent written by Rye Greenwood (for Ryebot) can be found here. Of course, you can also write one yourself.
SCSS files
References