Help:Custom css

From Shifti
Jump to: navigation, search

In the past people styled HTML by using inline tags such as <FONT> and that was good. But as time progressed people began searching for easier and easier ways to maintain consistent styling across large websites. In the end the W3C (Worldwide Web Consortium) settled on CSS (cascading stylesheets). This is the technology that provides the style for all websites that seek to be compliant with the standards that the W3C has published. Since the MediaWiki engine that runs Shifti is the exact same code that runs Wikipedia, it outputs HTML that is compliant with one of the more recent forms of HTML (XHTML 1.0/Transitional).

But because of it's reliance on CSS for all styling, we get a bonus. MediaWiki[1] allows all users to create custom CSS files that are loaded and can override settings in the sites own stylesheets. NOTE: These Custom CSS files are unique to each user—styles or formatting you have in your own is not visible or accessible by another user—and you must be logged in for this to work.

Basics

The basic format of a stylesheet is:

<selector> { <rules> }

A 'selector' is how the element or section of the page that the style applies to is defined. There are various forms of them and we'll get into that in a bit. The 'rules' are a series of name/value pairs and the end of a rule is specified with a semicolon (;). These will 'cascade' to all parts of a page that are at a 'lower level' than the part specified by the selector.

Selectors

As stated above, there are multiple forms of selectors. There are 'id selectors', 'element selectors', 'path selectors', 'class selectors' and 'pseudo-selectors'. Each of these has a specific and different format—although a 'path selector' is a special form of 'element' selector that specifies a specific element (or set of elements) based on how they are nested in the document.

id selectors

An 'id selector' uses the 'id' property that can be given to an HTML tag. It has the form: #<id> and uniquely identifies a single element in the entire page. By using an 'id selector' you do not have to know what type of element is being specified, just the name. A good example of an 'id selector' is the one that is used to reference the part of a page that contains the text of a story—#bodyContent—and while this name might seem specific to just the "Monobook" skin that is the default look of a Wiki based on the MediaWiki software, it is referenced even in the 'common' CSS files that all skins use, so it should be valid regardless of the current skin.

This is the preferred format of selector because id's are unique—no element can have the same id as another if the page is expected to be considered standards compliant. Since the MediaWiki engine (and hence, Shifti) tries to only output standards compliant pages, there will only ever be one element with any given id. If you're using FireFox you can use the Firebug extension to find out which ID is used by which element of the page. If you are not using FireFox you can use the 'view source' command to see the HTML that a page is built from—however it can be tricky to figure out which element covers the part of the page you are referencing this way.

element selectors

Element Selectors are used to apply the same base styles to all elements with a certain name in the entire page. For instance, using 'div'[2] as a selector will cause that set of CSS rules to apply to all the <div> elements in a page. This is a very generic selector and unless you are extremely skilled at styling websites, you should avoid using it.

path selectors

No, this isn't formatted like the path to a file. Instead it is actually a list of 'id' and 'element' selectors that specifically identifies either a section of the document or a specific element based on the way the various HTML tags are nested. For instance you can specify all <p> tags inside the body of a page using the path selector: #bodyContent p

class selectors

Class selectors either start with a period or have a period in them and specify a name that can be used as the value of the "class" property of an HTML tag. It is unclear, but generally no element in a page output by the MediaWiki engine has a class parameter so this type of selector is of no real use on Shifti. Class selectors, like all other types of selector (save the pseudo-selectors) can be used as an element in a path selector.

pseudo-selectors

A pseudo-selector does not, actually, identify an element in the page. Instead it identifies a special property or action. Pseudo-selectors are nominally used for providing proper styling to links[3] and for having things happen when you 'hover' the mouse-pointer over them. The only pseudo-selector that is used in the CSS for Shifti is :link[4]—though there are many others.

Rules

As previously stated, a rule in CSS has the format:

<name>:<value>;

It should not need to be said, but the 'name' part is pre-defined. These range from things such as 'font-family' (for defining which font to use) to 'text-align' (for defining how to 'align' the elements[5] and text contained in a given element). For more information about the various names of 'CSS Properties' look for a reference on Google.

The value part changes based on what property you are modifying. For instance, to set a page to use a 'serif' font[6] you'd use the 'font-family' name and the value 'Times, Roman, serif'[7]. The complete rule would be: font-family: Times, Roman, serif; – don't worry if that's too complex for you, there isn't going to be a quiz.

Custom CSS

Creating the File

This one is actually simple… Okay, maybe not that simple, but it is really easy to understand. To create a custom CSS for Shifti you'd just go to Special:MyFiles/<skin name>.css—for the basic 'MonoBook' skin this means you'd go to Special:MyFiles/monobook.css. This will redirect you to a sub-page of your User: page and you then click on the 'create' link and you're editing CSS that will then be loaded every time you are logged in and viewing Shifti.

Simple Ideas

One of the most requested features of Shifti is for paragraphs to start with an indent like you see in print. To achieve this on Shifti you'd put the following into your custom CSS file:

#bodyContent p {
  text-indent: 2em;
}

For more ideas, see the Custom CSS Hacks page. (Go ahead and add your own hacks - even create new headings if you need to!)

Footnotes/References

  1. The software that Shifti is built on
  2. Yes, without the quotes
  3. Since the <a> element doesn't just mean 'link' (it can also create an 'anchor point' in the text of a page that can then be linked to) this is rather important
  4. Which, as the name suggests, is used for styling links
  5. Okay, so only 'inline' elements are actually affected.
  6. These are typefaces that have the little 'lines' on the edges—the (in)famous 'Times New Roman' is an example of a serif font
  7. That is, 'Specific Font', 'Generic Font', 'Font Type' - ie: if you wanted to use 'Times New Roman' as the exact font and 'Georgia' as the fallback, you'd specify it as 'Times New Roman, Georgia, serif'