Terraria Wiki:CSS

See also: mw:Manual: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 and
all 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.