Difference between revisions of "Wiki User Style"

From the Oblivion ConstructionSet Wiki
Jump to navigation Jump to search
imported>DragoonWraith
(added fixed position nav-boxes)
imported>DragoonWraith
(update)
Line 1: Line 1:
[[Image:CSwiki_User_Style_Example.jpg|thumb|right|Example of Alternate Icon]]
[[Image:CSwiki_User_Style_Example.jpg|thumb|right|Example of Alternate Icon]]
Using this code as a User Style Sheet within your web browser will remove the full-width banner image from the Wiki, giving far more screen-space to the actual content of the site.
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.


Also causes the left-hand navigation boxes to scroll with the page, so you don't have to scroll back to the top to access the links there or the search box.
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.
**''This code is specifically coded for a screen-width of 1268.'' If you use another width, or do not have the window maximized, this will cause problems. Please do not use the noted portions of the code if you have a different resolution. A fix for this is being worked on.
*Highlights for the current Tab you are using (i.e. Article/Discussion/Edit/History).


<pre>@namespace url(http://www.w3.org/1999/xhtml);
<pre>@namespace url(http://www.w3.org/1999/xhtml);
Line 8: Line 12:
@-moz-document url-prefix(http://cs.elderscrolls.com/constwiki/)
@-moz-document url-prefix(http://cs.elderscrolls.com/constwiki/)
{
{
  #content2 { position: relative; }
   div#p-logo
   div#p-logo
   {
   {
    position: fixed !important;
     float: left !important;
     float: left !important;
     top: 10px !important;
     top: 10px !important;
Line 23: Line 28:
   }
   }


   div#p-navigation
   .portlet
  {
    top: 140px !important;
    position: fixed !important;
  }
 
  div#p-tb
   {
   {
     top: 250px !important;
     margin: 5px 0px 1px 0px !important;
    position: fixed !important;
   }
   }


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


   div#p-personal
/* DO NOT USE THIS CODE UNLESS YOU HAVE A SCREEN WIDTH OF 1268 AND KEEP THE WINDOW MAXIMIZED */
   div#p-logo { position: fixed !important; }
  #column-one
   {
   {
    top: 430px !important;
     position: fixed !important;
     position: fixed !important;
    margin-left: 131px !important;
   }
   }
}</pre>
}</pre>

Revision as of 17:51, 17 February 2008

File:CSwiki User Style Example.jpg
Example of Alternate Icon

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.

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.
    • This code is specifically coded for a screen-width of 1268. If you use another width, or do not have the window maximized, this will cause problems. Please do not use the noted portions of the code if you have a different resolution. A fix for this is being worked on.
  • Highlights for the current Tab you are using (i.e. Article/Discussion/Edit/History).
@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document url-prefix(http://cs.elderscrolls.com/constwiki/)
{
  #content2 { position: relative; }

  div#p-logo
  {
    float: left !important;
    top: 10px !important;
    left: 181px !important;
    width: 152px !important;
    height: 124px !important;
  }

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

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

  #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;
  }

/* DO NOT USE THIS CODE UNLESS YOU HAVE A SCREEN WIDTH OF 1268 AND KEEP THE WINDOW MAXIMIZED */
  div#p-logo { position: fixed !important; }
  #column-one
  {
    position: fixed !important;
    margin-left: 131px !important;
  }
}