Introduction To Skins

The new skins on the Archive have lots of spiffy features. We'll be building up documentation on them as we go along, but we wanted to start you off with a few key bits of information!

What public skins are there for me to use?

There's a masterlist of all the new public skins with some brief descriptions of what they do. Many of these skins are designed to affect very specific bits of the Archive - you can chain them together to get the effect you want.

What's chaining skins? How do I do it?

Basically, chaining skins means joining more than one skin together so that you can reuse rules from existing skins and then write your own CSS for the things you want. Some of the skins already on the Archive are built up from more than one skin; for example, if you take a look at Zebra Mono you can see a Parent Skins listing with "Snow". This means that the Zebra Mono skin is using all the code from the Snow skin, which turns all the backgrounds white.

To create a chained skin:

1. Go to http://archiveofourown.org/skins/new (accessible from your user dashboard).


2. Scroll down and expand 'Advanced'.


3. Select 'Add parent skin'


4. Type in the name of the skin you'd like to use as a parent (for example, if you'd like to base your skin on For the trees type that in). An autocomplete will trigger to help you make sure you get the name of a real skin.


5. Your parent skin will be loaded first, and anything you put in the CSS box will override the things in the parent skin.


6. If you want to use more than one parent skin, you can do so, so you could combine, e.g. Don't Care a Button and Wide margins to get a skin which had plain text buttons and wide margins on work pages.


7. Give your new skin a name and a description (and a preview image if you want to submit it as a public skin, or just for your reference).


8. Hit 'Create'. You'll be taken to a page which lets you preview or use your skin.


9. One known issue which will be fixed very shortly, but so it doesn't trip you up right now: if all you change in your skin is the parents, the display won't update, so try just sticking a comment in your css and editing it when you make other changes!
   

   How can I create spiffy new skins using the new system?

   The skins added with the new code are a good place to start - check out the masterlist of all the new public skins and follow the links to view the code for each skin. For basic skin customisation, simply copying the code of a skin you'd like to use and editing it is often effective.

   If you want to get more complicated, you might find the Archive front end documentation useful for digging into the details of the site CSS.

   If you're working on developing skins, the Firefox add-on Web Developer is a nifty tool which lets you live-edit CSS so you can try out different changes without repeatedly saving and editing a skin.

   Can I see skin creation in action?

   For the visual learners among you, you might like to check out lim's screencast showing the creation of a new skin.