Wiki Style

Many of you may have noticed that in graphic design terms, Wiki is no more complicated than the mind of HomerSimpson [1]; this is mainly due to the principles of ramblings such as WikiNature and WikiZen etc. However, for the most part that's incorrect: it just makes the pages look terrible [if you use your browser's defaults?], and for some people difficult to read.

(Is the problem that authors write pages that look terrible, or that the TextFormattingRules are insufficient to make pages that look good?)

Both of these things are contributing factors (with more emphasis towards the TextFormattingRules), but I think that the main underlying problem is the lack of a decent default stylesheet for the pages. I'm a great believer in UserStyles (and hence this experiment), but a better solution would be if every page referenced a standard "Wiki" CSS sheet. For wiki only, ModestWikiProposal could also work.

It's a general accessibility thing: sans-serif fonts are easier to read (SerifOrSansSerif), and code is clearer when it has a border around it.

Anyway, the result is that I have taken the liberty of writing a user CSS style sheet, that when added, spruces the pages up a little bit.

 a:link { color: #0000f0;font-weight: bold; }
 a:visited { color: #0800d0; font-weight: bold; }
 a:hover { background-color: #ffffe0; font-weight: bold; }
 body { font-family: arial, sans-serif;
        font-size: 0.95em;
        margin: 1em 2.3em 1em 1.5em; }
 h1 { font-family: sans-serif;
      font-size: 2.1em; font-weight: bold; }
 p { margin-left: 0.2em; }
 strong { color: #003078; }
 img { border: 2px solid #38383f; }
 blockquote { font-style: italic; color: #303f68; background-color: #ffffff; }
 pre { margin: 0em 3em 0em 2em; color: #302580; background-color: #ffffff; 
       font-family: "courier new"; border: 1px solid #a0a0a0; 
       padding: 1em; font-size: 0.85em; font-weight: bold; 
       white-space: pre; }
 hr { color: #505087; }

If anybody actually uses this, or has any comments, I'd be very happy to hear them <mailto:sean@mysterylights.com>. I also update this sheet from time to time when I think of something else.

[1] I'm a big Simpsons fan, and I think Homer is great, so don't get me wrong there.

-- SeanPalmer

I've given it a try. I disagree that the pages as they are "look terrible", but I was intrigued by the idea, esp. as I've been interested in CSS recently, and there is definitely something interesting to it. I was unhappy with most of the settings from the sample above - I'm putting it down to the shock of seeing the familiar Wiki look garbed with strange colors all of a sudden - but I find the box margin around <pre> areas useful - it makes code samples stand out much better. -- LaurentBossavit

Strange colors? It should be just the usual black, white and blue! All it really does is set some of the margins up properly, and use a sans-serif font so that it's easier to read. I agree that when pages have too much "flashiness" they lose some of their appeal, and I know that one of the principal axioms of Wiki is its simplicity, but does simplicity have to mean boring pages that we can't style? You can also edit the style sheet if it's not to your liking, or maybe take out all the features except for the box around the <pre>, if that's the thing that you found most useful? Anyhow, I'm glad that someone tried it! -- SeanPalmer

A definitive improvement, and a great starting point for rolling one's own. Thanks a lot!!! -- FalkBruegmann

No problem; I'm glad you enjoyed it :-) Wiki is a great place to try this out because all of the pages are basically the same code-wise: there are no surprises. On the wider Web because people like to use strange color schemes and <font> tags, making designing user stylesheets practically impossible. -- SeanPalmer

Looks lovely, but the css really screws up MSDN pages. -- AndyMorris

Just to throw in my two cents: Please, please, please don't add a wiki stylesheet that controls the font families and sizes. Margins and borders are fine, and a little bit of color doesn't bother me, but please don't give me tiny fonts or huge fonts, and don't decide for me whether I want SerifOrSansSerif. I've set my browser to display things in the way that is most readable for me. Please don't take that control away from me. I'm sure you are all correct that other settings would be far more readable and aesthetically pleasing, but I like to make my own decisions. -- KrisJohnson

That's not the case. The style-sheet I just posted is intended to be used in your browser. I really understand your frustration. I know the case stylesheet can take away the control from you. I object that WikiSystem? imposes the certain StyleSheet, resulting in our losing control of the page-design. But in my style-sheet you can just change the size and the family of the font. You can just remove settings about fonts. Try it. You will love it. -- TakuyaMurata

My objection was not to your stylesheet, but to those who want a "better" stylesheet to be the default for all wiki pages. I tried your stylesheet, and the others on this page, and while they all looked nice, I didn't love any of them enough to want to use them instead of my browser's settings. -- KrisJohnson

Well, if one uses a browser that gives the both author and user control over the StyleSheet, that shouldn't be a problem. Using alternative style-sheets is supported by Mozilla and Opera 7. Opera 7 goes many steps further by having a wonderful UserStyles system where you can strip a page of its styles, then mix-n-match any additional number of CascadingStyleSheets for the display. This is the way CSS should be. -- IanAndolina?

Taking the font-weight out it's not too bad. Here's a version without the bold-ness and most of the coloring (like the links) which didn't upset too many other non-Wiki pages when forced with IE6. -- RobBiedenharn

 body { margin: 1em 2.3em 1em 1.5em; }
 h1 {  font-size: 2.1em;
       font-weight: bold;
       }
 p {   margin-left: 0.2em;
       }
 blockquote {
       font-style: italic;
       }
 pre { margin: 0em 3em 0em 2em;
       color: rgb(20%,20%,50%); background-color: rgb(100%,100%,100%); 
       border: 1px solid rgb(50%,50%,50%); 
       padding: 1em;
       font-size: 0.85em;
       white-space: pre;
       }
 hr {  color: rgb(30%,30%,60%);
       }

See UserStyles for instructions on how to use this stylesheet in your browser.