the Oblivion ConstructionSet Wiki

Difference between revisions of "Wiki User Style"

Wiki User Style (edit)

Revision as of 18:08, 22 November 2008

1,049 bytes removed ,  18:08, 22 November 2008
m
stupid extra s
imported>DragoonWraith
(→‎Using Stylish (Firefox only): made it EVEN SIMPLER)
imported>DragoonWraith
m (stupid extra s)
 
(10 intermediate revisions by the same user not shown)
Line 1: Line 1:
[[Image:CSwiki_User_Style_Example.jpg|thumb|right|Example of Wiki User Style]]
[[Image: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 [[Special:MyPage/esstyle.css|here]] - 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 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.
Currently, there is only two public style sheets available:
<ul><li>[[Wiki User Style/Liquid Design.css|Liquid Design]] - copy the following line into [[Special:MyPage/esstyle.css|your esstyle.css file]] to use this style
<pre>@import "/constwiki/index.php?title=Wiki_User_Style/Liquid_Design.css&action=raw&ctype=text/css";</pre>
The Liquid Design style allows the page content to fill your window, so that the black borders are only a small decoration rather than large amounts of wasted space. The banner is modified to fit above the navigation boxes and allow the content to also reach the top of the page. In addition, the navigation boxes are set to stay on screen always, to make the links always handy, and the currently selected tab gets highlighted. Also provides a fix in Firefox for page-stretching code-boxes (unnecessary in Internet Explorer, which will insert wrap the text, and does not work in Opera, which does not support the non-standard "overflow-x" property).</li>
<li>[[Wiki User Style/Thread Archive.css|Thread Archive]] - copy the following line into [[Special:MyPage/esstyle.css|your esstyle.css file]] to use this style
<pre>@import "/constwiki/index.php?title=Wiki_User_Style/Thread_Archive.css&action=raw&ctype=text/css";</pre>
This style sheet enables thread archive pages, which use special style rules which are not (currently) in the general style sheets. Eventually it is planned to include these in the general style sheets, making this unnecessary.</li></ul>


=== User Style-Sheet ===
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.
 
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).
 
=== Using Stylish (Firefox only) ===
 
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 go [http://userstyles.org/styles/5310 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 ==
<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/32771...32782"