AO3 News

Post Header

Published:
2010-09-12 19:12:20 -0400
Tags:

Skins are here at long last! You can now choose how the Archive displays fonts and colours when you're logged in to your account. So, if you'd like a larger font, or you want lower contrast, or you just really love the colour green, you can tweak the Archive to look how you want it to look.

Please note that the skin you choose only affects how you see the Archive, not how your works display to other people.

What is a skin?

A skin is a Cascading Style Sheet (CSS) file that changes how a webpage displays in your browser. Skins change font size, font face, and display colours for each user, providing a reading experience customized to your wants and needs.

Who creates skins?

The Archive coders have a few site skins ready-made for you. You can also create skins for yourself (more details follow), and use skins created by users which have been publicly shared.

How do I change my skin?

You must be a logged-in user to use skins. There are two ways to change the skin you use for the Archive:


  • Go to 'My Preferences' under your user home. Under the 'Site Display' section there is a drop-down menu where you can choose from all approved and publicly available skins, as well as your own skins. Simply select the skin you want and select 'Update'.

  • Go to the Public Skins page where you can view all publicly available skins. Select the skin you want by clicking the "Use" button. The page will reload using the selected skin.

How do I create a skin?

Skins are created using CSS (Cascading Style Sheets). If you've never used CSS before, fear not - it's easy to pick up the basics. We also have a Skins Wizard to help people who are unfamiliar with CSS - this is still in beta, and we'll be adding more options to this in the future.

Creating a skin using Custom CSS



  • Go to 'My Skins' under your user home and select 'Create New Skin'. By default, you'll be taken to the page for entering Custom CSS.

  • You can use a limited range of CSS properties and values. The full range of allowed CSS is listed under the Archive Interface section of our FAQ, or you can select CSS help (accessible via the blue question mark) to access the list of allowed properties and values directly on the page. You can also use the Allowed Value Autocomplete to check whether a particular value is allowed - just start typing the value and see whether our autocomplete recognizes it. For example, typing 'lemon' will bring up the value 'lemonchiffon', one of our allowed colour values.

  • Your skin title is a short descriptor that lets you remember what this skin is like. You can enter more detail in the Description field. Then you input the CSS you want. You can also add a preview image - this is entirely optional for private skins, but you must include a preview if you want to submit the skin for public use.

  • If you check the 'public skin' box, it will submit your skin to be added to the site skins available to everyone. Our volunteers will check it over to make sure it is appropriate, and then add it to the public skins. Please note: Once a skin submitted as public has been officially approved, you will no longer be able to edit or delete it. Please be sure you are happy with this before submitting a public skin! Please also note that not all skins will be approved.

  • When you've filled in all your choices, select 'Create' to save your skin.

  • Once you have saved your skin, it will appear as an option in the drop-down menu on your preferences, and will show up under 'My Skins'.

  • Select your new skin as described under 'How do I change my skin?'

  • If your skin is not public, only you will see it in the drop-down menu in 'My Preferences', and only you can access it.

If you need help writing custom CSS you can browse the code of existing skins under Public Skins to see examples of the kind of code you can use. There are lots of great general resources for CSS online - we recommend the W3 Schools CSS tutorials as a great place to start. There's also an unofficial AO3 skins community on Dreamwidth - check out [community profile] ao3_skins for other shareable skins and help and advice from other fans.

Creating a skin using the Skins Wizard

Please note: This feature is in extreme beta and lots more spiffy user-friendly features will be added in the future.

  • Go to 'My Skins' under your user home and select 'Create New Skin'. By default, you'll be taken to the page for entering Custom CSS - select 'Use Wizard Instead?'


  • There is a list of basic options which you can fill in to suit your preferences:



    • Skin title: A short descriptor that lets you remember what this skin is like.

    • Description: this is where you can put more detail about the skin.

    • Width of margins: This will set the width of the margins on works pages (i.e. when you are viewing a story). The default is 3 - using a bigger number will give you bigger margins, and a smaller number will make the margins smaller!

    • Font, with comma-separated fallbacks: This will set the font used for all body text (e.g. works, summaries, etc but not titles or headings). Just input the name of the font you would like to use. If that font is not installed on the computer you are using, then the Archive will 'fall back' to your next favourite font - either the next font in your list, or the Archive's own default fonts. For example, if you put 'Papyrus, Comic Sans' then the Archive will display in Papyrus if you have it, but if it doesn't find Papyrus on your machine it will display in Comic Sans instead.

    • Background colour: This will set the main background colour for the Archive, i.e. the main page colour. You can specify the name of the colour you want, or for more control use the hex colour code - the W3 Schools list of colour codes lists the most common of these.

    • Foreground colour: This will set the font colour for the Archive. You can specify the name of the colour you want, or for more control use the hex colour code - the W3 Schools list of colour codes lists the most common of these.

    • Relative font size: This will set the size of your font. The default is 100 - if you pick a number bigger than this, the font will enlarge. If you pick a number smaller than 100, the font size will decrease!


  • When you've filled in all your choices, select 'Create' to save your skin.


  • Once you have saved your skin, it will appear as an option in the drop-down menu on your preferences, and will show up under 'My Skins'.


  • Select your new skin as described under 'How do I change my skin?'


  • Skins created via the Skins Wizard cannot be submitted as public, so only you will see you skin in the drop-down menu in 'My Preferences' and only you can access it.


  • How do I add a preview image for my skin?

    Create a screenshot of how the Archive looks while using your skin and save it in PNG, JPEG or GIF format. Edit the skin and use the Browse (or Choose, in some browsers) button to navigate to your image. Click Update. The image will appear as a clickable thumbnail, leading to the original image.

    What happens when I submit a skin as public?



    1. The skin will be added to a list for review by Archive admins, and will appear as 'Pending approval' on your Skins page.

    2. An Archive admin will review the skin for security, accessibility, and innovation and decide whether or not it should be added to our range of Public Skins. Please note that skins will not be reviewed immediately, and not all skins will be accepted.

    3. The admin will decide whether to approve or reject your skin:


    • If they accept the skin, it will be marked 'Approved' on your Skins page and added to the range of available Public Skins. You will no longer be able to edit this skin. The admin may add a short comment which will also be visible on your Skins page - this will not be visible to other users.

    • If they reject the Skin, it will be marked 'Rejected' on your Skins page. The admin will usually add a short note explaining their decision.


    What if I want a particular skin?

    If you want a particular design for the Archive, you can create it yourself! If you don't have the skills, you can browse Public Skins to see if someone else has created something you like. You can also try asking at the unofficial [community profile] ao3_skins community for help.

    If you have particular accessibility needs which you think might be met by a skin, then get in touch with our Support team for help. (We can't create custom skins for individual users, but we are keen to develop skins that will address issues for groups of users, particularly where accessibility is a factor.)

    As always, if you have questions about how skins work or hit a problem, our Support team will be happy to help. Go forth and customise your Archive!