FANDOM


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.

Cascading style sheets (CSS)Edit

The default style sheets are found at the following locations:

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

ExamplesEdit

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) "> ";
      }
    }

JavaScriptEdit

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

ExamplesEdit

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

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');

See alsoEdit

This feature is not currently available on new wikis which use the new Unified Community Platform (UCP).
See this page for more information on the new platform.

Through personal CSS and JavaScript, you can change the way Fandom looks and behaves. Things like fonts, colors, and positions of page elements can be altered. However, it will only affect the way that you see Fandom when you're logged into your account, and you have to make alterations to a few, specific user pages, as well as one account preference.

CSS

To customize how the site looks for you using CSS, create and edit Special:MyPage/global.css on Community Central. This will apply the changes wherever you go on Fandom.

If you want to apply personal CSS on just one community, visit Special:MyPage/common.css on that community.

JavaScript

You must manually enable personal JS in your preferences before you'll be able to see the effects of changing your personal JS. Please understand the implications of turning the feature on by reading all the notes below. The option can be found on the Under the Hood tab, under Advanced display options.
 
PersonalJSPreference

The personal JS preference

To customize how site looks for you using JS, create and edit Special:MyPage/global.js on Community Central. This will apply the changes wherever you go on Fandom.

If you want to apply personal JS on just one community, visit Special:MyPage/common.js on that community.

  • Before enabling personal JS on your account for the first time, please double-check any existing personal JS you have and make sure you are happy with it.
  • JS errors can break basic functionality - be careful! (But there may be an easy way out!)
  • Please avoid including JS that you do not understand and don't import from sources that you do not fully trust or that are not secure.
  • Fandom cannot be held responsible for any issues that occur as a result from the use of personal JS. It is your responsibility to maintain your personal JS (and CSS).
  • Note that "personal JS" pages are currently considered to be: /global.js (on Community Central only), /common.js, /wikia.js, and /chat.js.

Additional notes

  • Personal CSS and JS pages are best edited in the source editor.
  • As noted on the customization policy, personal CSS and JS is an area in which you can make any tweaks you like (so long as they do not adversely affect any other users).
  • Only account owners can edit their own CSS and JS pages - other users on a community, including admins, cannot edit another user's personal CSS and JS pages.
  • You can also target specific communities in your global CSS and JS:
    • CSS: a wiki-specific class is available on the <body> tag, based on the database name of a community. The format is: .wiki-[database name].
    • JS: the wgDBName (database name) variable can be used to target a community.

Troubleshooting

If your view of Fandom gets weird, there's an easy way to test whether it's your personal code causing the problem.

Just add ?useusercss=0 or ?useuserjs=0 to the end of your current URL. ?useusercss=0 temporarily removes all styles applied into your personal stylesheet(s), and ?useuserjs=0 temporarily removes all scripts applied into your personal JavaScript page(s).

(The same can be done with community CSS and JS for individual wikis, using ?usesitecss=0 or ?usesitejs=0.)

See also

Further help and feedback

Community content is available under CC-BY-SA unless otherwise noted.