The way wikipedia works out with me is I mostly just read the articles, and hardly use the sidebar.

The default wikipedia layout is not that nice too read, since the text spans almost the full width of the browser.

So I made up this simple skin.

Screenshot

This is a screenshot for the skinned wikipedia page about the city Fontainebleau, France.

The layout uses 880px for the main content, which is centered. There are simple “Jump to navigation, search” links at the top of the page, to be able to jump to the ordinary sidebar – entries.

The “Edit this page” link is emphasized, and is close to the bottom of the page:

How to get the same skin for yourself

To use this with wikipedia

Note: this stuff only works for registered wikipedians and only when they are logged in. Not actually a hurdle.

How to adjust the skin

Some things are easy.

  • Too wide? In the “#globalWrapper” section, change width: 880px; to some other width, for example, width: 650px; to make it less wide.
  • Don’t like the shade of blue? In the “body” section, change background: #E2ECF3; to background: #F3ECE2; for light orange, or pick another colour.
  • Same for the orange header, search for #FFD1A2.

The w3schools.com site is pretty good for CSS reference; A List Apart is good for the tricky stuff. This is the wikipedia article on CSS.

Also, wikimedia has a rather large user style gallery.

The CSS itself

/* CSS for a simple, centered, wikipedia skin %>
body {
  font-family: verdana,sans-serif,arial;
  color: #252525;
  width: 100%;
  font-size: 89%;
  background: #E2ECF3;
}

#globalWrapper {
  background: #f7f7f7;
  border-left: 2px solid #ddd;
  border-right: 2px solid #ddd;
  border-top: 2px solid #ddd;
  padding-left: 20px;
  padding-right: 20px;
  margin: 10px auto
  width: 850px;
}

h1.firstHeading {
  border-bottom: solid 10px #FFD1A2;
  font-weight: normal;
  font-size:250%;
  margin-bottom: 20px;
  padding-top: 10px;
}

#siteSub {
  font-size: 10px;
  margin-bottom: 30px;
  font-weight: normal
}

#jump-to-nav {
  margin-bottom: 10px;
}

#ca-edit {
  font-size: 20px;
  background: #FFD1A2;
}

Stephan Wehner, June 2008.