Wiki Style Examples

Moved from WikiStyle

Here's a modest improvement... adds some white space along text margins, and interline.

 a:link { color: #0000ff; font-weight: bold; 
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: .85 em;
        line-height: 1.5 em;
        margin-left: 7%;
        margin-right: 5%; 
        margin-top: 0 em; 
        margin-bottom: .7 em;
        color: #3366cc; }

 a:active { color: #ff0000; font-weight: bold;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: .85 em;
        line-height: 1.5 em;
        margin-left: 7%;
        margin-right: 5%; 
        margin-top: 0 em; 
        margin-bottom: .7 em;
        color: #3366cc; }

 a:visited { color: #800080; font-weight: bold; 
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: .85 em;
        line-height: 1.5 em;
        margin-left: 7%;
        margin-right: 5%; 
        margin-top: 0 em; 
        margin-bottom: .7 em;
        color: #3366cc; }

 a:hover { color: mediumblue; font-weight: bold;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: .85 em;
        line-height: 1.5 em;
        margin-left: 7%;
        margin-right: 5%; 
        margin-top: 0 em; 
        margin-bottom: .7 em; }

 body { font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: .8 em;
        line-height: 1.5 em;
        margin-left: 7%;
        margin-right: 5%; 
        margin-top: 0 em; 
        margin-bottom: .7 em;
        background-color: whitesmoke;
        color: #333333;}

 h1 { font-family: Arial, Helvetica, sans-serif;
      color: dimgray;
      font-size: 1.8 em; 
      font-weight: bold;
      line-height: 2.4 em;
      margin-left: 0%;
      margin-right: 0%; 
      margin-top: .5 em; 
      margin-bottom: .7 em }

 p {line-height: 1.5 em; margin-left: 7%; margin-right: 5%; margin-top: 0 em;
    margin-bottom: .7 em;}

 strong { color: #333333; }

 pre { margin: .5em 3em .5em 2em; color: #302580; background-color: ivory; 
       font-family: "courier new"; border: 1px solid #a0a0a0; 
       padding: 1em; font-size: 0.9em; font-weight: bold; 
       white-space: pre; }

 hr { color: #cdcdcd; }

I've also noticed that the Wiki pages are made with black body text and a white page background... which makes it impossible to control these attributes via the browser's CSS style file. Could Wiki pages be set up to let the user control the body text color and page color? If so, the CSS file could put in a light pastel background and dark gray text, making it easier to read on-screen...

Using !important, you can override default settings of the browser.

-- JonDonahue

---

I added some cool features, small-caps, justified alignment as well as making radical changes.

 a {
   margin-left: 0.7%;
   margin-right: 0.7%;
   font-variant: small-caps;
 }

 a:link {
   color: #0000ff;
 }

 a:visited {
   color: #3366cc;
 }

 a:hover {
   color: mediumblue;
   text-decoration: underline;
 }

 th, td, p, body, div, dt, dd {
   font-family: Verdana, Arial, Helvetica, sans-serif, serif;
   font-size: 10pt;
   font-style: normal;
   line-height: 1.5 em;
   text-align: justify;
   color: #333333 !important;
   letter-spacing: 0;
 }

 body {
   padding-left: 1em;
   padding-right: 1em;
 }

 li, ul, ol {
   display: list-item;
   list-style: lower-alpha;
 }

 ul, ol {
   margin-top: 1em;
   margin-left: 3em;
 }

 h1 {
   font-family: Arial, Helvetica, sans-serif;
   color: dimgray;
   font-size: 1.8 em;
   font-weight: bold;
 }

 pre {
   font-family: "courier new";
   border: 1px solid #a0a0a0;
   white-space: normal;
   padding: 1em;
 }

 hr {
   color: #cdcdcd;
   height: 3pt;
 }

-- TakuyaMurata

---

Here's my own style sheet. It uses a small-but-legible font, makes links bold, and looks pretty good on all the web sites I've tried:

 body {
    font-family: Verdana, Sans-Serif;
    font-size: 8pt
 }
 p, dt, dd, dl, li, td, th { font-size: 8pt }
 li { margin-top: .2em; margin-bottom: .2em }
 a 
 h1, 
 h2, 
 h3,
 h4, h5, h6, h7, h8 { font-size: 13pt }

-- KrisJohnson

---

I have the following in my MozillaFirefox userContent.css; it keeps WikiPages down to a readable width (not quite TenWordLine, but close) while letting me maximize my browser window. The [text=black] should mean that only divs called "wiki" on this site (which uses that string) are affected.

 body[text=black] div#wiki {
   width: 66%;
 }

-- EarleMartin

Where is this "[text=black]" technique described, and how come MicrosoftInternetExplorer doesn't recognize it?

http://www.w3.org/TR/REC-CSS2/selector.html#attribute-selectors. Because Internet Explorer sucks golf balls through a hosepipe.

Ah CSS2! Microsoft do admit IE6 doesn't fully support that. At least "div#wiki" is supported, and is necessary for some of the earlier examples on this page, which presumably predate Wiki's use of the div tag.

Sure. My example will still work for IE if you take out the attribute selector, but you'll find it being applied to any div called "wiki" on any site. Admittedly this isn't all that likely to happen, but the selector is useful just in case it does. In general, until IE7 turns up, IE should be treated like damaged goods. -- EM

Your example would need enhancement to restrict the width of monospaced text, but perhaps you didn't want that effect.