Difference between revisions of "Wiki User Style"

Revision as of 19:05, 17 February 2008

Example of Wiki User Style

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.

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

@@ Line 1: / Line 1: @@
 [[Image:CSwiki_User_Style_Example.jpg|thumb|right|Example of Wiki User Style]]
-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. How to set this up depends on your browser.
+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.
+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 [http://www.mozilla.org/support/firefox/profile#locate 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 [https://addons.mozilla.org/en-US/firefox/addon/2108 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:
@@ Line 7: / Line 16: @@
 *Highlights for the current Tab you are using (i.e. Article/Discussion/Edit/History).
-<pre>@-moz-document url-prefix(http://cs.elderscrolls.com/constwiki/)
+<pre>
-{
+@-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 */
@@ Line 53: / Line 65: @@
    }
-/* don't forget the closing bracket */
+} /*this closing bracket is Mozilla-only */</pre>
-}</pre>

Difference between revisions of "Wiki User Style"

Revision as of 19:05, 17 February 2008

Navigation menu

Search