Help:User style

From the White Wolf Wiki, the most complete White Wolf reference

← Help: Contents

For all MediaWiki skins, individual users are permitted to create custom modifications to the appearance of WWWiki (for example, concerning fonts, colors, positions of links, etc.). Cascading Style Sheets (CSS) and JavaScript (JS) are used with reference to selectors [1] of HTML elements, classes, and ID tags specified in the HTML code. Therefore, a user is able to examine the HTML source code for WWWiki and customize the appearance of the site.

Contents 1 Cascading style sheets (CSS) 1.1 Examples 2 JavaScript 2.1 Examples 3 See also

[edit] Cascading style sheets (CSS)

The default style sheets are found at the following locations:

• Monobook: http://whitewolf.wikicities.com/skins/monobook/main.css and MediaWiki:Monobook.css
• Classic (Standard): http://whitewolf.wikicities.com/skins/common/wikistandard.css and MediaWiki:Standard.css
• Cologne Blue: http://whitewolf.wikicities.com/skins/common/cologneblue.css and MediaWiki:Cologneblue.css
• Nostalgia: http://whitewolf.wikicities.com/skins/common/nostalgia.css and MediaWiki:Nostalgia.css

Only administrators are permitted to edit the above pages. Users can specify their own custom style sheets by editing the following pages:

• Monobook: http://whitewolf.wikicities.com/index.php/User:USERNAME/monobook.css
• Classic (Standard): http://whitewolf.wikicities.com/index.php/User:USERNAME/standard.css
• Cologne Blue: http://whitewolf.wikicities.com/index.php/User:USERNAME/cologneblue.css
• Nostalgia: http://whitewolf.wikicities.com/index.php/User:USERNAME/nostalgia.css

[edit] Examples

You can change the color of the background of the main content section to make it darker (and thus contrast more with white text):

    /* make the background color darker for the main content section */
    body {
            background-image: url(/graphics/background_monobook.gif);
            background-repeat: repeat;
            background-color: #202020;
    }
    #content, #footer {
            background-color: #202020;
            color: #FFFFFF;
    }
    .pBody {
            background-color: #202020;
            color: #FFFFFF;
    }

You can remove the underline style from the text, and make it only appear when you hover the mouse over the link:

    /* make underlines in links appear only on hover */
    a { text-decoration: none; }
    a:hover { text-decoration: underline; }

You can change the color of various sub-types of links, such as links to missing articles, links to external sites, and mail links:

    /* change default link colors */
    a.new { color:#ff6633; }
    a.stub { color: #772233; }
    a.external, a.extiw { color:#999999; }
    a.mailto { color: #FFCC00; }
    #p-personal { color: #00CCFF !important; }

You can suppress the "person" icon next to your user name:

    /* suppress the person icon by your username */
    li#pt-userpage { background: none }

You can hide the WWWiki logo from the layout:

    /* don't use any logo, move the boxes onto that area instead */
    #p-logo { display: none }
    #column-one { padding-top: 0; }

If you are using a Gecko-powered browser like Mozilla, Firefox, or Camino, you can create a "rounded corners" style for the layout:

    /* make a few corners round, only supported by moz/firefox/other gecko browsers for now */
    #p-cactions ul li, #p-cactions ul li a {  
      -moz-border-radius-topleft: 1em;
      -moz-border-radius-topright: 1em;
    }
    #content { 
      -moz-border-radius-topleft: 1em; 
      -moz-border-radius-bottomleft: 1em;
    }
    div.pBody {
      -moz-border-radius-topright: 1em;
      -moz-border-radius-bottomright: 1em;
    }
    
    /* same following the css3 draft specs, any browsers supporting this? */
    #p-cactions ul li, #p-cactions ul li a {  
      border-radius-topleft: 1em;
      border-radius-topright: 1em;
    }
    #content { 
      border-radius-topleft: 1em;
      border-radius-bottomleft: 1em;
    }
    div.pBody {
      border-radius-topright: 1em;
      border-radius-bottomright: 1em;
    }

You can add specific tweaks to the interface that only apply to printed pages:

    /*
    ** Place all print-specific rules in an @media print block.
    */
    
    /* save ink and paper with very small fonts */
    @media print {
        #footer,
        #content,
        body { font-size: 8pt !important; }
        h1 { font-size: 17pt }
        h2 { font-size: 14pt }
        h3 { font-size: 11pt }
        h4 { font-size: 9pt }
        h5 { font-size: 8pt }
        h6 { 
            font-size: 8pt;
            font-weight: normal;
        }
    }
    
    /* Advanced things: using :before and :after it's possible to add formatting 
    this rule adds the full href of a link after it (not needed in the current version): */
    @media print {
      #content a:link:after, 
      #content a:visited:after {
         content: " <" attr(href) "> ";
      }
    }

[edit] JavaScript

Users can also import custom JavaScript by placing the script on the following pages:

• Monobook: http://whitewolf.wikicities.com/index.php/User:USERNAME/monobook.js
• Standard: http://whitewolf.wikicities.com/index.php/User:USERNAME/standard.js
• Cologne Blue: http://whitewolf.wikicities.com/index.php/User:USERNAME/cologneblue.js
• Nostalgia: http://whitewolf.wikicities.com/index.php/User:USERNAME/nostalgia.js

[edit] Examples

You can add a set of mirrored tabs to the bottom of the #content section of the layout:

• http://meta.wikimedia.org/wiki/User_Styles/bottom_tabs

You can change the access keys by changing some elements in the "ta" array (see [2]). For example:

    ta['ca-nstab-main'] = new Array('c','View the content page');

[edit] See also

• Help: Preferences
• Meta-Wikipedia: User styles help - More examples here.
• Meta-Wikipedia: Gallery of user styles - Even more examples!