Help:CSS

CSS (officially known as Cascading Style Sheets) sets how a page looks. On a special sub-page on your user page, you can override Halopedia's Monobook, Nimbus, or Vector skins to create your own personal look for the wiki.

Background

CSS has three parts: A selector is the variable (officially the HTML element you're editing). A property is the attribute of the element you want to change. Each property has a value, which is what you set to change the style of the selected element.

Consider the following line:

body {
  color: #00FF00;
 }

The selector/element that was edited was body – all the general text on a page. The property/attribute was color – text color. The value was #00FF00 – making all text a green color.

Note the syntax for CSS. The selector is defined first, then an opening brace ({) "opens" the element for editing. Then the property appears, with a colon (:) after it, then the value (hex colors must have the # sign). Each time a value is set, a semicolon (;) is required at the end (except for the last line). Multiple lines of properties and redefined variables can occur within the curly braces ({ }), and all affect the same selected element.

selector {
  property1: value;
  property2: value;
  property3: value;
 }

It is also possible to apply values to the properties of multiple selectors at once, separating them with a comma (,):

selector1,
selector2 {
  property: value;
}

Creating your own custom CSS

Halopedia has three different skins, Monobook, Nimbus, and Vector. Each user has there own custom CSS page for each skin.

• Monobook: User:Username/monobook.css
• Nimbus: User:Username/nimbus.css
• Vector: User:Username/vector.css,

Note that each skin name starts in lower case . When editing it, you should see some new text:

Tip: Use the 'Show preview' button to test your new CSS/JS before saving.

Whatever is entered into here is put into a style sheet (inbetween <style> and </style> tags). So, it is only necessary to put the list of selectors you want to change, with their properties and values, no "header" or "footer". If you want to add comments (text that the CSS won't read), put it in between /* and */. While you can preview the new CSS, some changes (like to the categories table) require you to save it first.

To see the changes after saving, you need to clear your cache, which can be done by doing a hard refresh (press the F5 key, sometimes Ctrl + F5). Congratulations, you now have your own unique skin.