Difference between revisions of "Wiki User Style"

Jump to navigation Jump to search

Wiki User Style (edit)

Revision as of 06:58, 28 February 2008

3,271 bytes removed ,  06:58, 28 February 2008
A very simple, bare-bones summary
imported>DragoonWraith
m (→‎Internet Explorer: not the third line, the last line.)
imported>DragoonWraith
(A very simple, bare-bones summary)
Line 1: Line 1:
[[Image:CSwiki_User_Style_Example.jpg|thumb|right|Example of Wiki User Style]]
[[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.
User Style Sheets are used to modify the display of the Wiki. Your User Style sheet can be found at ''User:Your_Name/esstyle.css'' - this is a special page associated with your account and with the skin used on this site, known as ESstyle. Here you can place CSS code to change the layout of the site to make it easier for you to see, read, and edit.


== Installation ==
If you do not wish to do the CSS yourself, this page also serves as a repository for CSS code that you can use. This code can be used as your Style Sheet by using the @import command - simply copy and paste the @import command listed for each style into your esstyle.css page to include it in your personal style sheet.


This code was primarily designed for Mozilla Firefox, and is therefore simplest to install for that browser. It is also guaranteed to work in Firefox.
Currently, there is only one public style sheet available:
* [[Wiki User Style/Liquid Design|Liquid Design]] - copy the following line into your esstyle.css file to use this style
@import "/constwiki/index.php?title=Wiki_User_Style/Liquid_Design.css&action=raw&ctype=text/css";


It should also work for other Mozilla products, and can work with Opera as a script (more on that later). For Internet Explorer, it may be used with some modification, but it may break other websites, as IE lacks any way to specify the site that the code is run on.
You may also use the style sheets of other users with similar commands, substituting the page title of their esstyle.css pages for the title of the public sheets above.
 
=== Firefox ===
 
By default, Firefox users may copy and paste the code below into their "userContent.css" file in the "Chrome" directory inside their [http://support.mozilla.com/kb/Profiles Firefox profile]. If the "userContent.css" file does not exist, save a copy of "userContent-example.css" as "userContent.css" and paste the code into that.
 
However, it is recommended that Firefox users instead install the [https://addons.mozilla.org/en-US/firefox/addon/2108 Stylish Extension]. With this extension installed, simply go [http://userstyles.org/styles/5310 here] and click "Load into Stylish" to install this code.
 
The GreaseMonkey extension is another possibility. GreaseMonkey uses JavaScript, similar to Opera's system. To get the JavaScript version of the code, follow the second half of the Opera installation instructions.
 
=== Opera ===
 
Opera users are recommended to install this code as a User Script. To do so, the User Script directory must be defined by going to
Tools -> Preferences -> Advanced -> JavaScript options...
and then selecting the desired directory.
 
After doing so, go [http://userstyles.org/styles/5310 here] and click "Load as User Script" to be directed to the code converted into JavaScript. Save this page in the User Script directory defined above.
 
=== Internet Explorer ===
 
Using this code with Internet Explorer is '''not''' recommended. Because Internet Explorer cannot be told to use this code only on this site, other sites using similar coding schemes (likely any Wiki) will be broken with this code.
 
For numerous other reasons, including personal security and the betterment of the Internet as a whole, users are strongly urged to switch to another browser, such as Firefox or Opera.
 
However, if this is impossible or undesired, this code is available as is. There are no guarantees provided, and no one other than the user him or herself may be held responsible for any damage, temporary (likely) or permanent (extremely unlikely), that it may cause.
 
The code also must be modified to remove the Mozilla-only wrapper function. This means the first, second, and last lines, which are marked, must be omitted.
 
== 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 ==
<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 */
 
/* 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 */</pre>
Retrieved from "https://cs.uesp.net/wiki/Special:MobileDiff/32774"

Navigation menu