Wiki User Style

Revision as of 20:05, 17 February 2008 by imported>DragoonWraith (information on using this code)

This code is designed to be a "User Style Sheet" for the CS Wiki. This means that these style changes are affixed by the browser, overriding the code used on the site.

File:CSwiki User Style Example.jpg
Example of Wiki User Style

This code only works for Mozilla applications (Firefox, Thunderbird, etc) - there is no standard way to direct a browser to use this code only for this site. Internet Explorer and Opera both have user style sheets that affect all sites - which means that this code may break other sites. Options with other browsers are unknown.

To use this code, determine how your browser handles user CSS. In most cases, it must be saved as a "CSS" file, which is just a text file with a ".css" extension. Open a plaintext editor, copy and paste this code in, and save it with a .css extension. If you are not using Firefox, omit the first, second, and final line of code (marked with comments)

  • For Internet Explorer, there is an option for user CSS in the Accessibility menu (Tools->Internet Options->General->Accessibility).
  • For Firefox, by default, you can use the "userContent.css" file in the "chrome" directory of your Firefox profile (save "userContent-example.css" as "userContent.css" and use that if you do not have one yet). There are better alternatives, however.
  • In Opera, you can set your user style sheet in the Style Options menu (Tools->Preferences->Advanced->Content->Style Options).

If you are using Firefox, the Stylish extension is highly recommended to make this simpler. Install stylish, and then open its Options menu, click Write, and paste this code into it and hit Save (give it a name if you like).

Current features:

  • Reduced-width banner, allowing the main content of the page to have the entire height of the screen
  • Fixed-position left-hand nav-boxes. This way the boxes will scroll with you as you read the page.
  • Highlights for the current Tab you are using (i.e. Article/Discussion/Edit/History).
@-moz-document url-prefix(http://cs.elderscrolls.com/constwiki/) /* omit this line if not using a Mozilla application */
{ /* this line too */

/* actual code for the style sheet */
  #content2 { position: relative; } /* this is actually to fix a typo in Beth's CSS */

/* Reduced-width banner */
  div#p-logo
  {
    float: left !important;
    width: 152px !important;
    height: 124px !important;
    padding-left: 50px !important;
  }

  div#p-logo a 
  {
    background-image: url("http://cs.elderscrolls.com/constwiki/images/a/a4/CSwiki_Icon.gif") !important;
  }

  .portlet
  {
    margin: 5px 0px 1px 0px !important;
  }

/* tab highlight */

  #p-cactions .selected a
  {
    color: #6e5229 !important;
    background-image: url("http://cs.elderscrolls.com/constwiki/skins/esstyle/textbg.jpg") !important;
    border: 1px #6e5229 solid !important;
  }

/* Fixed-position nav-boxes */
  div#p-logo
  {
    position: fixed !important;
    top: 10px !important;
  }
  #column-one
  {
    position: fixed !important;
    top: 140px !important;
    left: auto !important;
    margin-left: 50px !important;
  }

} /*this closing bracket is Mozilla-only */