Help:CSS

From the Super Mario Wiki, the Mario encyclopedia
Revision as of 19:31, February 1, 2007 by Wayoshi (talk | contribs) (→‎Example)
Jump to navigationJump to search
  1. Be familiar with hex colors before reading this.
  2. Many of the codes shown on this page can be used as Template:Link styles.

CSS (officially known as Cascading Style Sheets) sets how a page looks. On a special sub-page on your user page, you can override the Monobook skin 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 set by default and the true item you are changing.
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 element, as long as they are closed by a closing brace (}). 

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

Keep in mind that while the wiki has selectors that are common to all sites, some of them are also unique to wikis only

The following is a list elements, attributes, and values that are common to be changed, thus likely vital to your CSS page.

Example

Wayoshi (talk) has been kind enough to allow us to use an old version of his his CSS page for an example first, using all three parts of CSS.

Let's take a look at the "body" and "a" selectors: 

body { font-family:Arial; font-size:10px;}
a { color: #080; text-decoration: none; }
a:visited { color: #050; }
a:active { color: #111; }
#p-personal a.new { color: #b00; }
#p-personal a.new:visited { color:#800; }
#bodyContent a.external { color: #0a0; }
#bodyContent a.extiw:active { color: #020; }
  • The body selector covers the basic text on any page (such as what you'd see as content on a wiki page).
  • The a selector is the basic link that hasn't been clicked on recently.
  • a:active is when you are in the midst of clicking the link.
  • a:visited is the link that has been clicked recently. Often, it is simply the same color, but darker than a.
  • #p-personal a.new is the wiki-unique link-that-hasn't-been-created (red) link.
  • #p-personal a.new:visited is when you try to create a page, but don't right away, so it has a different color elsewhere until it's created, when it becomes a.
  • #bodyContent a.external is the external link.
  • #bodyContent a.extiw:active is when an external link is being clicked on.
  • Result: Normal text is changed from 12px Verdana to 10px Arial. The normal and external links are now green. When clicking on a link, the color is a dark shade of green or gray. The uncreated page links are a darker shade of red.
  • In the first example, different parts were on different lines. In fact, all of it can be on one line if you so choose. Incidentally, there is no need for a space inbetween the colon and the value as well.

List of Properties and Values

Single bullets show properties, indented bullets show values. Some properties are grouped if they take the same type of values.

  • font-family – also known as the "font face".
    • Many font types. Check out Microsoft Word's list – over 90% of those fonts are compatible.
  • font-size
    • ___% increases the font as a ratio to the default font size. There is also px and pt – px is actual pixels and pt is as it would appear in MSWord.
  • font-style – sets italics.
  • font-variant
  • font-weight &nash; sets bold.
    • normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900
  • font – declares all of the above in one statement...
    • ...in the order of font-style, font-variant, font-weight, font-size, and font-family: font: italic small-caps lighter 13px Arial;
  • text-align
    • left, center, right, justify
  • text-decoration – sets underline.
    • none, underline, overline, line-through, blink
  • text-transform – sets caps
    • none, capitalize, uppercase, lowercase
  • color, border-color
  • border-style
    • none, dotted, dashed, solid, double, groove, ridge, inset and outset
  • border-width
    • thin, medium, thick; or uses pixels, suggested that they are only positive integers – decimals such as 1.5 causes two sides to be 1px and two sides to be 2px
  • border, border-top, border-bottom, border-left, border-right
    • Unique shorthand way to define width, style, and color in one declaration: border: 1px dashed black;, border: 2px solid #289;. Only one side can be affected by using the last four properties if one so chooses.1
  • background, background-color, background-image
    • Can be a color value OR a complete url – background:url(http://www.imagesite.com/youralbum/bgpic.jpg);
  • background-repeat – image only.
    • repeat, repeat-x, repeat-y, no-repeat; with x being repeating horizontally only and y being repeating vertically only.
  • background-attachment – image only as well; sets whether the background scrolls with the page or not.
    • scroll, fixed
  • margin, margin-top, margin-bottom, margin-left, margin-right – Margin sets space between elements themselves. Honestly, it won't be used that much on a wiki.
    • Margin has a lot of measurements (px, em, cm, etc) but all do the same (ie a paragraph with a margin-bottom of 100px would look separated from the other paragraphs).
  • padding, padding-top, padding-bottom, padding-left, padding-right – Padding sets space in between the border of an element and its text.
    • Pixels only. Here decimals are OK.
  • list-style-image – This is special for the ul (unordered [bullet] list) selector, and can change the 5X5 pixel bullet image. More on this below.
    • url(url);
  • list-style-type – This is special for the li (ordered list) selector, and can change the numbers to:
    • decimal (default), lower-roman (i, ii, v), upper-roman (I, II, V), lower-alpha (a, b, c), upper-alpha (A, B, C)
  • -moz-border-radius, -moz-border-radius-topleft, -moz-border-radius-bottomleft, -moz-border-radius-topright, -moz-border-radius-bottomright – this Firefox-only property cuts off corner[s] at the edge of a table by a specified amount – that is, making the edge rounded.
    • Takes pixels or ems. One em is – wide (yes, the em dash is the long dash standardly used on this wiki).

1There are properties such as border-left-width, border-bottom-style, border-right-color as well.

List of Selectors

Keep in mind that a) some selectors will only take certain values (experiment!), b) many selectors will have specific names, unique to wikis, and c) Wayoshi's example provided eight common selectors. Those selectors all take font, color, and text-decoration values.

  • p – common paragraph. Used in raw websites from HTML, and used as a compound on wikis.
  • #content, #content table, #p-cactions ul li a – grouped together for a reason, see below.
  • .usermessage – the message table that appears when your talk page has been revised.
  • #p-logo a – the logo. Code for changing the logo is found below. (background)
  • textarea – Edit box. Code that utilizes the Mario bg we use now can be found at MediaWiki:Monobook.css.
  • pre – the table used inbetween <pre> tags.
  • ul – unordered (bullet) list
  • li – ordered (number) list
  • h1, h2, h3, h4, h5, h6 – in order: Title of Page, Section Header, Sub-Section Header, – matching to as number of = used in wiksyntax.
  • #catlinks – the table that contains categories.
  • #siteNotice – as says.
  • select – dropdown menus.
  • input – input boxes, like Summary.
  • input.searchButton – the buttons such as "Go" and "Save page".
  • #searchInput – specific selector for the search box.

Putting it All Together

Here's another excerpt from Wayoshi's CSS: 

 #content, #content table
 #p-cactions ul li a { background: #fcfffc; }

 .usermessage {
  background: #00E400;
  border: 1.1px dashed #060;
 }

 #p-logo a { background: url(http://img.photobucket.com/albums/v506/Kimi12715/MarioWiki/Wayoshilogo3.png) 35% 50%
 no-repeat !important; }

 pre { border: 1px dashed #060; }

 ul { list-style-image: url(http://img.photobucket.com/albums/v506/Kimi12715/MarioWiki/uldot.png); }
 h1 { font-family:Jokerman; font-size:28px;color:#117611;}
 h2,h3,h4,h5,h6 { color:#020; }

 #catlinks {
  border: 1px dotted #272;
  background-color: #fdfffd;
  padding: 4px;
 }
 #siteNotice {
   background: #fcfffc;
 }
 select {
   border: 1px solid #2f6f2f; 
 }
 input {
  background-color: #fdfffd;
 }
 textarea {
   font-family: Boukman Old Style;
   font-size: 14px;
 }

Result: Text background is a very light green. The usermessage table is redesigned to be green and have a dashed border. The logo has changed (notice after the url some specifications – these are important to have for the logo). The pre border is green. The bullet image has changed (to a green circle). The title of each page is shown in a different font and color. The rest of the headers are a dark green. The categories table has a green background, border, and some space between the text and the border. The sitenotice has the same background as the content. The select box has a green border. The input box has a light green bg. Textarea has a different font.

With the above selectors, properties, and values above, you should be able to stylize your wiki to your needs very well – here are some advanced tips.

Advanced Tips

  • #p-cactions ul li a is actually corresponds to the tabs at the top of the page. So, using the color property can change the blue to match the background.
  • Here's the code to make the content, tabs, and sidebar have rounded edges:
 #p-cactions ul li, #p-cactions ul li a {  
  -moz-border-radius-topleft: 1em;
  -moz-border-radius-topright: 1em;
 }
 #content { 
  -moz-border-radius: 1em;
 }
 div.pBody {
  -moz-border-radius-topright: 1em;
  -moz-border-radius-bottomright: 1em;
 }
  • div.pBody is the sidebar. It can use the background color property, but since all the text is links, color doesn't affect anything. Additionally, the square light blue bullets cannot be changed.

Creating Your Monobook.css

Everyone has their own skin page at User:Username/monobook.css, with stress on the lower case m. 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 inbetween /* 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, hard refresh (press the F5 key, sometimes Ctrl + F5). Congratulations, you now have your own unique skin!

Retrieved from "https://www.mariowiki.com/index.php?title=Help:CSS&oldid=84409"