Archive FAQ > Skins and Archive Interface

Can I change the Archive interface?

Yes! You can change the colours, fonts and layout of the Archive by applying a skin. You can use skins created by other people or write your own using custom CSS.

What is a skin?

Skins are customised stylesheets which change the way the Archive looks for logged-in users. You can choose to apply an existing public skin, or create one for yourself. You can also create work skins to change the display of individual works.

Where can I see a list of available skins?

You can browse all publicly available skins in our Skin Chooser.

Can I change the fonts the Archive is displayed in?

Yes! You can customise viewing options such as font and colour by applying a skin.

Can I view the Archive without images?

You can choose a text-only interface which will not display Archive interface images such as the icons on our works listings by selecting our plain text skin. Images embedded by other Archive users will still display.

How do I apply or create a skin?

You can choose to apply a skin by going to 'My Preferences' and selecting a skin from the drop-down menu under 'Site display'. Check out our Skins tutorial for full details on how to create and apply skins.

What CSS properties and values can I use in custom skins?

For security reasons, you can only use a limited set of CSS properties and values on this archive.

Comments

You can use comments either before or after a complete block of CSS, but not in the middle. (PS: comments are awesome!)

This will work fine:
/* here is a comment before my awesome code */
body {background: #fff;}
/* here is a comment after my awesome code */


This will not work:
body {/* comment in the middle of my code */ background: #fff;}
Properties


Allowed properties

background, border, margin, padding, azimuth, background-color, border-bottom-color, border-collapse, border-color, border-left-color, border-right-color, border-top-color, clear, color, cursor, direction, display, elevation, float, font, font-family, font-size, font-style, font-variant, font-weight, height, letter-spacing, line-height, min-height, overflow, pause, pause-after, pause-before, pitch, pitch-range, position, richness, speak, speak-header, speak-numeral, speak-punctuation, speech-rate, stress, text-align, text-decoration, text-indent, unicode-bidi, vertical-align, voice-family, volume, white-space, width, -moz-border-radius

URLs

We allow external image urls (specified as url('http://somesite.com/my_awesome_image.jpg')) in JPG, GIF, and PNG formats. Please note however that skins using external images will not be approved for public use.

Allowed keywords

absolute, auto, blink, block, bold, both, bottom, center, collapse, dashed, dotted, !important, inline, italic, left, medium, none, no-repeat, normal, nowrap, pointer, repeat, right, scroll, solid, static, top, transparent, underline

Numeric Values

You can specify numeric values up to two decimal places, either as percentages or in various units: cm, em, ex, in, mm, pc, pt, px

PS: we highly encourage learning about and using em, which lets you set things relative to the viewer's current font size! It will make your layouts much more flexible and responsive to different browser/font settings.

Colors

You can specify colors using hex values (eg, #000000 is black in hex) or with rgb values (eg, rgb(0,0,0) is black). This may be safer since not all browsers will necessarily support all color names.

However, color names are more readable and easier to remember, so we allow the set of commonly-supported color names:

aliceblue, antiquewhite, aqua, aquamarine, azure, beige, bisque, black, blanchedalmond, blue, blueviolet, brown, burlywood, cadetblue, chartreuse, chocolate, coral, cornflowerblue, cornsilk, crimson, cyan, darkblue, darkcyan, darkgoldenrod, darkgray, darkgreen, darkkhaki, darkmagenta, darkolivegreen, darkorange, darkorchid, darkred, darksalmon, darkseagreen, darkslateblue, darkslategray, darkturquoise, darkviolet, deeppink, deepskyblue, dimgray, dodgerblue, firebrick, floralwhite, forestgreen, fuchsia, gainsboro, ghostwhite, gold, goldenrod, gray, green, greenyellow, honeydew, hotpink, indianred, indigo, ivory, khaki, lavender, lavenderblush, lawngreen, lemonchiffon, lightblue, lightcoral, lightcyan, lightgoldenrodyellow, lightgrey, lightgreen, lightpink, lightsalmon, lightseagreen, lightskyblue, lightslategray, lightsteelblue, lightyellow, lime, limegreen, linen, magenta, maroon, mediumaquamarine, mediumblue, mediumorchid, mediumpurple, mediumseagreen, mediumslateblue, mediumspringgreen, mediumturquoise, mediumvioletred, midnightblue, mintcream, mistyrose, moccasin, navajowhite, navy, oldlace, olive, olivedrab, orange, orangered, orchid, palegoldenrod, palegreen, paleturquoise, palevioletred, papayawhip, peachpuff, peru, pink, plum, powderblue, purple, red, rosybrown, royalblue, saddlebrown, salmon, sandybrown, seagreen, seashell, sienna, silver, skyblue, slateblue, slategray, snow, springgreen, steelblue, tan, teal, thistle, tomato, turquoise, violet, wheat, white, whitesmoke, yellow, yellowgreen

Font Families

Keep in mind that a font has to be installed on the user's operating system to work. It's a good idea when specifying fonts to use fallbacks in case your first-choice font isn't available. See the set of web-safe fonts with fallbacks.

We allow the following font families:

serif, sans-serif, monospace, cursive, fantasy, andale mono, arial, arial black, book antiqua, bookman old style, calibri, cambria, candara, charcoal, comic sans ms, consolas, constantia, corbel, courier, courier new, fertigoproregular, gadget, garamond, geneva, georgia, helvetica, impact, liberation mono, liberation sans, liberation serif, lucida console, lucida grande, lucida sans unicode, monaco, ms sans serif, ms serif, palatino, palatino linotype, symbol, tahoma, times, times new roman, trebuchet ms, verdana, webdings, wingdings, zapf dingbats

Can I get rid of styling other users have used on their works?

Styling options such as font colour and size on users works can be applied using our custom styling options. If you don't want to see this styling, then select the 'View in light style' option on an individual work, or go to the 'Site Display' section of 'My Preferences' and select 'Disable User Generated Styles'.

What are you doing to make the Archive accessible?

Accessibility is a top priority for us, and we've done our best to make things work well for all users. We try to write clear, well-validated code which will respond well to different browser settings and play nicely with assistive technology. That said, we know there is always more work to be done in this area, and we value feedback from our users about accessibility.

If you encounter accessibility problems on the site, please let us know via the Support and Feedback form. To help us understand and reproduce your problem, please be as specific as possible about the problem and your setup (browser settings, any assistive technology that may be relevant).

Our philosophy is that the Archive of Our Own is for ALL fans, so we welcome feedback if we're not meeting your needs.