Wiki User Style

Revision as of 20:12, 17 February 2008 by imported>DragoonWraith (→‎Using Stylish (Firefox only): made it EVEN SIMPLER)

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

Installation

This code as is only works for Mozilla applications (Firefox, Thunderbird, etc). It may be modified for other browsers, but the code will not apply these changes only to this site - which may break other sites. Internet Explorer and Opera are known to have user style options. Options with other browsers are unknown.

User Style-Sheet

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).

Using Stylish (Firefox only)

If you are using Firefox, the Stylish extension is highly recommended to make this simpler. Install stylish, and then go here and click "Load into Stylish" to install the code.

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).

Planned Features

  • Remove the black borders on the sides of the site, giving access to the full width of the screen.

The Code

@-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 */