Let's walk through writing a simple skin, step by step. To see the changes, try adding these lines one at a time and refreshing.
Let's change the font and the font colour. The star means "everywhere":
* { font-family: georgia,serif;
color: #342f16;
}
Now the page body background. Let's put an image there, and by default it will tile in all directions.
Note -- we're using an image hosted on tinypic, but for your own private skins you can host your images anywhere. Photobucket and imageshack.us are common alternatives. Because you are the only one seeing your skin, you don't need to worry about running out of bandwidth.
body {
background: url(http://i52.tinypic.com/b6d2ld.jpg);
}
Let's change the header. We'll put a different picture there and make sure the header has enough height to show the whole image. This image only repeats along in a line, so we'll start it in the top left and say repeat-x (down is repeat-y).
#header {
background: url(http://i53.tinypic.com/2yl4j04.png) top left repeat-x;
height: 214px;
}
Now, let's hide that giant black line!
#header .clear {
visibility: hidden;
}
I don't like that white colour on the page title, so I'll change it to the global colour:
#header h1,
#header h1 a {
color: #342f16;
}
The navigation looks a bit weird, so let's take off that styling:
#header .navigation a {
background: transparent;
border: 0;
}
#header .navigation span.current {
background: transparent !important;
border: 1px dashed;
}
Now the main content. Let's make it like a piece of paper. I'm using pixel values for the fixed size pictures, and em values for the scalable elements:
#main {
background: white url(http://i56.tinypic.com/20fdnvc.png) top right repeat-x;
margin: 0 1em;
padding-top: 50px;
}
And just a tweak, I don't like that blue colour against the background now:
.flash {
background:transparent;
}
So here's the whole thing:
* {
font-family: georgia,serif !important; color: #342f16;
}
body {
background: url(http://i52.tinypic.com/b6d2ld.jpg);
}
#header {
background: url(http://i53.tinypic.com/2yl4j04.png) top left repeat-x;
height: 214px;
}
#header .clear {
visibility: hidden;
}
#header h1, #header h1 a {
color: #342f16;
}
#header .navigation a {
background: transparent;
border: 0;
}
#header .navigation span.current {
background: transparent !important;
border: 1px dashed;
}
#main {
background: white url(http://i56.tinypic.com/20fdnvc.png) top right repeat-x;
margin: 0 1em;
padding-top: 50px;
}
.flash {
background:transparent;
}
All user copy is marked with the .userstuff class, so you can make changes to it without worrying about messing up the site layout.
You may want to change the font:
.userstuff {font-family:georgia,serif;}
Indent paragraphs:
.userstuff p {text-indent: 2.5em;}
Maybe you want to do something very specific like block user-embedded images but still keep the site icons:
.userstuff img {display:none;}
The work view has a lot of metadata on it. You might want to suppress some. You can hide the whole meta block:
.meta {display:none;}
And the whole preface:
.preface {display:none;}
Or just the bits you don't want to know:
.meta .warning, .preface .notes, .preface .summary {display:none;}
In the same way, you might want to highlight some metadata:
.rating {background:red; font-weight:bold;}
You can take this approach all over the archive. Try redesigning the blurb to suit yourself better.
If you're interested in the development of the the AO3 Front End, the docs are open to you. You can work through from What Is CSS or jump right into the detailed Front End User Guide. To write a skin, you don't need to read all that, but you may find these useful:
The most useful classes and identities are: