Help:User style

From VistApedia
Jump to: navigation, search

← Help: Contents

For all MediaWiki skins, individual users are permitted to create custom modifications to the appearance of OpenVistA Wiki (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 OpenVistA Wiki 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:

  • Monobook: http://www.memory-alpha.org/en/index.php/User:USERNAME/monobook.css
  • Classic (Standard): http://www.memory-alpha.org/en/index.php/User:USERNAME/standard.css
  • Cologne Blue: http://www.memory-alpha.org/en/index.php/User:USERNAME/cologneblue.css
  • Nostalgia: http://www.memory-alpha.org/en/index.php/User:USERNAME/nostalgia.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 OpenVistA Wiki 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

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

  • Monobook: http://www.memory-alpha.org/en/index.php/User:USERNAME/monobook.js
  • Standard: http://www.memory-alpha.org/en/index.php/User:USERNAME/standard.js
  • Cologne Blue: http://www.memory-alpha.org/en/index.php/User:USERNAME/cologneblue.js
  • Nostalgia: http://www.memory-alpha.org/en/index.php/User:USERNAME/nostalgia.js

Examples

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 also

Retrieved from "https://vistapedia.com/index.php?title=Help:User_style&oldid=9520"