Wikia

Memory Alpha

Help:User style

Discuss0
37,162pages on
this wiki
Revision as of 13:55, February 8, 2012 by Archduk3 (Talk | contribs)

Help icon  Contents → User style

For all MediaWiki skins, individual users are permitted to create custom modifications to the appearance of Memory Alpha (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 Memory Alpha and customize the appearance of the site.

Cascading style sheets (CSS)

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:

  • Wikia (Oasis): http://en.memory-alpha.org/wiki/User:USERNAME/wikia.css
  • Monobook: http://en.memory-alpha.org/wiki/User:USERNAME/monobook.css

Examples

You can change the color of the background of the main content section to make it darker (and thus contrast more with the 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 Memory Alpha 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) "> ";
      }
    }

JavaScript

The default script can 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:

  • Wikia (Oasis): http://en.memory-alpha.org/wiki/User:USERNAME/wikia.js
  • Monobook: http://en.memory-alpha.org/wiki/User:USERNAME/monobook.js

Examples

  • 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 also

Around Wikia's network

Random Wiki