AO3 News

Post Header

Published:
2014-10-16 13:54:12 -0400
Tags:

What Are Work Skins?

Works skins allow you to customize the appearance of your works beyond the basic HTML tags the Archive supports. In order to do this, they use Cascading Style Sheets (CSS), a style language that allows you to define a set of rules for how specific HTML elements in your work should be displayed.

This guide will take you through creating and applying a work skin on the Archive. For a more in-depth tutorial on how work skins and CSS work, we invite you to take a look at our tutorial on styling works, or check out some of the HTML and CSS resources listed at the end of this article.

Creating and Applying a Work Skin

1. Create the Work Skin

From your AO3 Dashboard, choose Skins from the sidebar, then select My Work Skins. Select Create Work Skin at the top left to open the Create New Skin webpage.

My Work Skins Page

2. Enter Work Skin Information

In the shaded area labeled About, ensure that Type is set to "Work Skin". Then, give your work skin a unique title (e.g., "SMS Text"). Optionally, you can also give your work skin a description (e.g., "For SMS text within fic").

About section of My Work Skins Page with example information

Once you have created your work skin, you may want to return to this form to upload a preview image or to apply to make your skin public for the use of other fans. For now, move down into the CSS text box to continue.

3. Write the CSS

CSS allows you to create a blueprint for how you'd like the HTML in your work to be displayed.

For example, using CSS, you can give instructions in one line of code that makes all your paragraphs look like monospaced computer code. As you might already know, you can do the same thing using an HTML code tag on all your paragraphs--but using CSS has a number of advantages over using HTML all by itself.

Firstly, by separating your work's appearance from its content, aesthetic changes are kept consistent. CSS ensures all items with the same labels are automatically displayed with the same settings. As work skins can be applied to multiple works, this feature is helpful in ensuring series are formatted consistently across all works.

CSS also helps you avoid redundancy by allowing you to define rules that will apply to all matching elements within your text, without needing to retype the same HTML over and over. In the previous example, if you wanted to change all your paragraphs to monospace font using HTML, it would involve adding extra HTML code for every paragraph of your work. Using CSS, on the other hand, you could make this change with a handful of CSS lines that would then apply to every single paragraph (p) tag. As such, using CSS in work skins is ideal for customized or complex styling, while still being easily changeable.

Finally, using CSS for styling instead of HTML avoids violating the principle of Semantic HTML--that is, the idea that HTML should be about describing the meaning of content, not its appearance. Semantic HTML is not only easier for humans to read and write, it's also more accessible: people using screen-readers or other assistive technologies to access AO3 will have a much easier time accessing your work if you use CSS instead of HTML for styling.

CSS Example

If this all sounds a little complicated, don't panic! This example will walk you through the basics of CSS styling in relation to work skins.

To begin, imagine you want to make the text messages characters send and receive look different from the rest of your work's text. For instance, you might want all SMS text to use a monospace Courier New font, while the rest of your work continues to use the Archive's default font. Using only HTML, this would be impossible, as the Archive does not allow use of the HTML font tag required to select a different font family. Using a work skin, on the other hand, you could easily create a simple CSS rule--a line of code that declares new settings for a particular HTML element--saying that every instance of a newly-envisioned HTML class textMsg should use a monospace Courier New font.

The entire CSS rule could look something like: #workskin .textMsg { font-family: "Courier New", Courier, monospace; }

CSS Example

Let's deconstruct this example.

To start, write #workskin to declare the rule as part of your work skin. This doesn't change, regardless of the kind of rule you're writing.

After this, you specify which section of your HTML the CSS rule will affect; in other words, a "selector". You can apply a rule to any combination of HTML elements and classes. Possible selectors include:

  • Element only: To use an HTML element as your selector, simply write the element name after the #workskin declaration. For example, selecting all paragraph elements (p) becomes #workskin p.
  • Class only: To select all instances of an HTML class, write the name of the desired class preceded by a period. As in our CSS Example, #workskin .textMsg will modify any element in the work with the class name textMsg.
  • Element and Class pair: To select only items with a particular element and class name, combine both methods by writing the element name and the class name separated only by a period: #workskin p.textMsg selects only paragraph elements with the textMsg class.

Following the HTML selector, you'll need to type a left curly bracket ({). This signals the start of your declaration, which defines what your rule is actually going to do.

In the declaration, you write a series of statements that assign a value or values (in this case, "Courier New", Courier, monospace) to a property (in this case, font-family). Your property describes the aspect you would like to change (the font family), while the value you assign it controls the kind of change that will be affected (in this case, changing it to monospace Courier New font style). The two are connected by a colon (:) and the whole statement is followed by a semicolon (;) to indicate that the font-family declaration is finished and complete. You can now type a right curly bracket (}) to close your rule.

In this example, the CSS rule only contains a single declaration; more commonly, rules will consist of several of these statements before closing off. To apply more settings to a single selector, simply end each declaration with a semicolon before defining the next property, and ensure you close the statement with a final semicolon and right curly bracket.

For some more examples of CSS rules and how they are written, you may want to take a look at our tutorial on styling works or any of the other resources listed at the bottom of this article.

4. Applying the Work Skin

Once you've written your CSS, use the Submit button to create your work skin. Congratulations! It will now show up under the My Work Skins header of the Skins section of your dashboard, where you can edit it to add additional rules, add a preview image, or make your skin public for others to make use of.

My Work Skins Page with example work skin

Now that your skin has been created, the next step is to link it to the work you'd like it to modify. In order to do this, you'll need to navigate away from the Skins page to the work in question. Select Edit on the desired work, or create a New Work, and scroll down to Select Work Skin under the Associations heading.

Associations section on Post New Work page

By default, this drop-down box should be populated with two public work skins: "Basic Formatting" and "Homestuck Skin". You should also see any personal work skins you just created listed here. Select the desired work skin and save your work.

5. Formatting the Work

Now that your work and your work skin are linked together, the CSS in your work skin will map onto the HTML elements of your text. For this to work properly, the selectors defined by your CSS rules need to be present in your work.

For example, a CSS rule for paragraph elements (#workskin p { }) will only apply to sections of text in your HTML which are wrapped in the p and /p tags. In this instance, they will work immediately, as p and /p tags are added automatically to your text by AO3's parser. However, this won't be the case for the rules in your work skin which make use of classes or other HTML elements.

HTML class tags can easily be added to both individual paragraphs and in-line text:

  • Paragraph: To apply the settings of the textMsg class used in our CSS example to an entire paragraph, simply add the class name textMsg to the p tag preceding the paragraph: p class="textMsg". No modification needs to be made to the closing /p tag.
  • Span: To apply the settings of the textMsg class to some text within a paragraph, surround the selected text with span class="textMsg" and /span tags.

Work Text with included HTML class examples

There are a couple things to remember when adding HTML class tags to your text. Firstly, make sure you're editing your work in HTML mode, not rich text mode, otherwise the changes will not take effect. Secondly, you'll need to use the exact same class name in your HTML as the one you defined in your work skin CSS. Keep in mind these are case-sensitive, so be sure to match the names exactly.

Once you've formatted your text so that it references the items modified in your work skin, hit save and inspect the fruits of your labour. Congratulations! You've just customized a work's appearance on the Archive using a work skin!

Work with applied work skin settings

Useful Links for More Information

Work Skin Resources

Tutorial: Styling Works
Example Work Using Work Skin
Public Work Skins
Homestuck-specific Tutorials

CSS & HTML Resources

AO3 CSS Help
AO3 HTML Help
CSS Tutorial

Comment

Post Header

Published:
2011-11-11 21:53:21 -0500
Tags:

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.


Comment

Post Header

Published:
2011-11-11 19:42:03 -0500
Tags:

This reference list of new skins was compiled by front-end coder lim. Lots of modular skins have been created to modify different aspects of the Archive. You can combine different skins to get exactly the look you want. More info coming soon on how to get the most out of the new skins!

Reference and Teaching List of Completed Skins

I've tried to comment quite extensively inside the skins.

  1. Blurblings

    Shows, hides, and rearranges the blurb. You can chain these together to perfect your metadata display.

    1. Hide warnings
    2. Hide stats
    3. Hide summaries
    4. Hide tags
    5. Hide fandom
    6. Hide datetime
    7. Hide freeform tags
    8. Hide relationships
    9. Hide characters
    10. Hide nearly everything (except the title, author, fandom)
    11. Hide everything except the header
    12. Show the landmarks (landmark headings on tags, summary, etc)>
    13. Blurb drop drops the blurb group entirely (makes a plain text blurb)
    14. Shipper emphasises the relationship tags
    15. Faint Warning de-emphasises the warnings
    16. Chain Example demonstrates chaining.
    17. Byline Breaks the tags out into blocks by type (updated version of a skin by Branch so doesn't use the blurblings nomenclature).
  2. Workings

    Similar to blurblings, but modding the work view

    1. Hide meta
    2. Hide author notes
    3. Hide author summary
    4. Big margin
    5. Max Width restricts the work width to 39em
    6. Fix Actions Right fixes the bookmark/save etc buttons to the right of the page as you scroll
    7. Fix Actions Left fixes those left
    8. Hide feedback
    9. Hide kudos
  3. Typeset In My Ways

    This series is tarted up code from our very first Accessibility, Design and Technology meetings in 2007. Very stark, very simple text styles.

    1. Typeset In My Ways Uses the Archive typography and layout, with plain text blurb and a limited width work view.
    2. Typeset In My Ways Erasure drops all archive parents except core and loads a simple typographical style.
    3. Typeset In My Ways Sans simple sans serif text.
    4. Typeset In My Ways Serif simple serif text.
    5. Typeset In My Ways Negativity light on dark
    6. Typeset In My Ways Terminal simple console/terminal style
    7. Typeset In My Ways Scully simple Word Perfect style
    8. Typeset In My Ways 2.0 uses Archive 2.0 style but plain text blurb and big margins.
    9. Typeset In My Ways Landmarks shows the landmarks and lays them out
    10. Typeset In My Ways Textura adds a (subtle) textured background
  4. The Screeny

    various screenreader optimisations

    1. Screeny Exposure! exposes all landmark headings to the readers that can't read them.
    2. Screeny Oppression! suppresses all landmark text.
    3. Screeny Drop It drops all archive parents except core
    4. Screeny She's Got Form drops all archive parents except core and interactions.
    5. Screeny Shut It Any component you don't care to read, add to the beginning of this code, or remove ones you do want. Remember to separate with a comma!
  5. Parental Guidance

    1. Colour Flip Combos a reference skin grouping the archive into a 5 level colour and contrast palette.
    2. Key Colour Reference this lists everything that is red.
    3. Exploded Worker this is an advanced parenting reference parent. *g* It explodes the archive 2.0 cascade into all its component parents, so you can live edit the CSS in tabs with a plugin like Firefox Web Developer. Only use this for reference, because it will slow down your page load.
    4. Trouble O'Head zeroes out the default background, borders, and shadows on the header navigation. This is useful to just parent in when you don't want to drop the whole AO3 header region style.
    5. Region Drop this is an advanced parenting parent for replacer layouts. It drops header, dash, footer, and main from AO3 default. In most cases you're better off overriding instead. Check out Trouble O'Head for fast header overrides and the Tile Puzzle series to move the dashboard around with overrides.
  6. Graphical

    I've uploaded a ton of tiling textures you can call to decorate your layouts. There are loads more graphical styles to come but this is what I could do with two days notice!

    1. Simply Twilling introducing textures - this is a simple override CSS3 skin that demonstrates how you can leverage region and group transparency to build dramatically different styles quickly.
    2. Threw Twill Out an introduction to parenting.
    3. Desk Job a template "desk top" layout you can adapt to your own design. [needs a bit of testing so have not preloaded sorry]
    4. Panda Madness this is like, pink and round and it has pandas on it
    5. The Hustings a stripped down version of a more complex theme made ready quickly for deploy
    Chained Melody

    Here I'm demonstrating breaking a css3 theme apart into components so each piece can be used in other skins. There are brill free fonts to download linked in. CSS3.

    1. Chained Buttons
    2. Chained Head hover the icon
    3. Chained Groups
    4. Chained Quotes
    5. Chained Icons
    6. Chained Key (colours, fonts, background)
    7. Chained Melody the whole lot chained together
    Fixie

    A fixed region layout, again with components you can use in other skins pretty easily, but this one drops components of the site style: it doesn't just override them, it replaces them. Free fonts to download linked . IE7 and up

    1. Fixie Fix explodes the site layout and takes out portions of it, then fixes the regions: header, dashboard, footer, and scrolls the main region. This is "parent only" meaning you have to chain it in to a style - it doesn't work on its own as a layout.
    2. Fixie Buttons makes scribbly buttons with Mido font
    3. Fixie Icons make scribbly backed icons
    4. Fixie Groups this makes some swooshy CSS3 rounded boxes
    5. Fixie this chains everything together to make a layout!
    6. Fixie Free Wheel (coming soon) this spoofs the basic look of Fixie, but as an override skin, and with normal scrolling regions.
  7. Palettes

    Colour changes, some based on the most popular colour changes in the old skins system

    1. Mono black and white where red all over
    2. Zebra Mono black and white where red all over, with zebra fur detail
    3. Reversi light on dark, with blue key
    4. Dusted off based on Dusty Rose by sistabro
    5. For the trees based on Sunny Forest by enigel
    6. The Blues based on Medium Blues by Arduinna
    7. Snow makes everything that is very light lavender pure white. Useful to chain in.
    8. Snow Blue
    9. Get the Backers makes all the group backgrounds white.
  8. Tile Puzzle

    1. Wide Horizon Horizontal dash in blocks
    2. Dash Line Horizontal dash, inline
    3. Eyes to the right Right side dash
    4. 100% width filters
    5. Stick It sticks the secondary (page specific) navigation to the left and fixes it there
    6. Mark My Words Shows all landmarks and gives some minimal visual style
    7. Slim Shaded makes a slimmer, texty header, with a shaded strip, snow body, and lowercase buttons
    8. One Point Faux spoofs the old style on top of the new style. Might look slightly different to the original old style, but broadly the same.
    9. 2 Point No takes off all the box shadows, text-shadows, and rounded corners
    10. Look and Read swaps the logo for a text title: "Archive Of Our Own
    11. Imago swaps your header icon for a text greeting: "Hi, username!"
    12. Incommodious takes off the commas we add into long lists of inline tags, if you find them odious!
  9. Wiggle It

    Some pure CSS3 mods. Modern browsers only.

    1. Head Buoy slides the header up out of sight and slides down on hover.
    2. Sliders slides the meta header off a work and slides out on hover.
    3. The Bubbler probably the most useful skin here. Bubbles everything. No animation.
  10. Mash Up

    So you can just stick on different buttons.

    1. Aqua Buttons You can just swap the buttons, or use them in a more complicated layout.
    2. Gel Buttons showing how you can change the colours for a different effect.
    3. Scribble Buttons pencil scribble buttons good for paper styles.
    4. Massive Buttons they're really big and bold.
    5. Don't Care A Button makes the buttons just plain text.
    6. Dusted Buttons chain in Dusted Rose

Comment

Post Header

Published:
2011-11-06 16:59:42 -0500
Tags:

The good news!

Shed your skin! We're about to have a massive deploy of new code that will bring us - among other things - radically new skins! The underlying code for the Archive has been streamlined and modified to make it more accessible and maintainable, and much easier to override. This is going to allow for fantastically beautiful and awesome customizable looks for the archive; fanartists, prepare to go wild! As a bonus, we've also added some skins options for logged-out users (you'll find these in the footer)!

The bad news :(

Since we had to radically retool the underlying code to make this all work well, existing skins are not going to work right out of the box. (We did mention that this was an archive in beta, right?) We're really sorry for the inconvenience, but we had to sacrifice consistency in the short term to make the skins feature more awesome and ensure our code remains maintainable in the long term.

To make sure that no one comes to the archive and finds a broken skin, we'll be temporarily turning off the existing skins when we deploy the new code - don't be alarmed if you come to the Archive to find it looks different! You'll be able to preview your old skins to see how they'll look with the new code, so you can fix the private ones before turning them back on if necessary. We've also already upgraded a bunch of the existing public skins and added some new ones-- for instance a new light-on-dark skin, and a new plain text skin. We'll be posting a list of these skins as soon as the code deploys.

What's so great about the new skins?

LOTS OF STUFF! \0/ One major improvement is that you'll no longer have to use the dreaded !important for most of your overrides to the default skin. In fact, if you want to you can strip away our default skin altogether and write your styles without using any of our CSS at all. But that's only the beginning! There are a whole bunch of new features:


  • Modular system so you can make your skin a 'child' of another skin. This means that when you find that skin which has a perfect layout but a color you hate, you can apply that skin for your layout, then add another one on top which just changes the color. (And that's just the beginning of what you can do with the modular skins - we'll have more in a future post explaining the cool possibilities.)

  • Make different skins for different devices (this is courtesy of the modular skins) - you'll be able to make a custom skin for when you're browsing on your computer, and another one for when you're browsing on your phone, and have them kick in automatically when you're logged in to your account (providing your phone respects mobile stylesheets). Customization wherever you are!

  • An array of images you can use to customize your skins! You can already use images hosted offsite in your own skins (but not in public ones because we need to be sure the images won't change or break). Now you'll be able to pull from a bunch of stock images on the Archive to make your skins even prettier.

Essentially, the new system is aimed at giving you control of ALL THE THINGS! We'll be posting a list of pre-loaded skins as well as loads of shiny new skins over the coming days. We'll also post tutorials and examples so you can get to grips with the new shiny!

O NOES MAH SKINS ARE BROKEN

All may not be lost! If your skins are broken or you think they're likely to be, you can do some things to prepare. We'll be holding a Skins Open House in a week or two where we'll go over how to make new skins and fix old ones - watch this space for news on that.

Accessible skins

One last note - one reason it was important to us to make this change is that it makes it MUCH easier to customize skins to meet specific accessibility needs. If you are using one of the public skins geared towards particular accessibility needs (e.g. low contrast, plain text, etc), then we have either fixed this to work right out of the box under the new system or (where that wasn't feasible) added a new skin to do the same job. We're adding new accessible skins for logged-out users too - you'll be able to access a Low Vision skin and a Light on dark Small Text skin in the footer even when you are logged out. If you need a customized skin for accessibility reasons and our existing skins don't meet that need, please get in touch with support and let us know what you need - we'll do our best to help! (Also, if you run up against an accessibility issue anywhere on the Archive, please let us know - we're committed to keeping the site as accessible as possible, but inevitably there's stuff we miss!)

Stay tuned for more info about skins!

Comment

Post Header

Published:
2011-02-12 17:19:59 -0500
Tags:

So you want to apply some formatting to your fics! You probably already know how to use some basic HTML tags to make stuff <strong>bold</strong> or <em>italic</em>. But perhaps you want something a bit more complex - a different font, or maybe a different color. You can do this by creating some custom CSS for your works!

Cascading Style Sheets are a way to style elements of your story (or any webpage) without having to mess with the HTML markup itself. Where you used to scatter <font> tags all over your code to make some text look like this and some like that, you would now simply assign names (classes or IDs) to parts of your webpage and do all the styling in a separate document (the stylesheet). The upside of this is that if you decide to change the look of your page, you don't have to comb through the HTML code and change all the tags, you can just play around with the CSS rules until you find a style you like.

As is so often the case, things are a lot more complicated once you really dive in, especially if you use CSS to position elements on a page, but this shall not concern us here. You will most likely use CSS to apply a little formatting to your fic that goes beyond the allowed HTML tags, which is what this tutorial will be about.

The Basics

You may have already used Archive skins to change the way the Archive as a whole looks to you when you are logged in. Formatting a work uses the same basic principles: to apply styles to your fics, you create a "work skin" and define what classes you want to use in your stories and what they should look like. And while the general archive skins only affect the user that created them, the styling that you define for your fics will be visible to all readers (unless they disable custom styles; more on that later).

There are three HTML tags you might need in your works:

<div> - creates a container for all sorts of content
<p> - wraps around a paragraph and creates a blank line before and after it
<span> - is used for styling some words or phrases within a paragraph

To apply formatting to your story, you assign a class name to the HTML element in question and create rules for that class in your CSS skin. That sounds way more complicated than it is, so have an example:

Under Dashboard > My Skins > See Work Skins Instead you'll see a work skin like this, with CSS rules defined.

Screenshot of a work skin, showing example CSS

The #workskin at the beginning of each line is an id, and is added automatically. It makes sure that the CSS can be applied to your whole work, and isn't applied to the rest of the page.

The words which begin with a period, like .align-justify are classes. These allow you to create a specific rule and apply it to a specific bit of your work. When you define these in your work skin they must have the period at the beginning.

When you edit a work, you'll use markup like this to apply the CSS rules in your work skin.

Screenshot of the edit work page, showing the HTML markup needed to apply the CSS

(Note: There is no need to apply <p> tags to your whole work, just add tags and classes where you need them and leave the rest alone; the parser should take care of everything else. The Tutorial on HTML Sanitizing and Parsing has more information on marking up your works; however, we are aware of some issues with how the parser behaves right now and are working on fixing those. If you run into wonky-looking text in your own stories, do a quick check if the paragraph in question starts with a <p> tag and ends with </p>. If not, adding those yourself will usually take care of the problem.)

Caveats

If you style a story so heavily that it becomes unreadable or if the reader simply doesn't agree with your font choice, there's a "Hide Creator's Style" button on top of each work that will strip out all bells and whistles except for the basic HTML formatting. CSS formatting will not appear in downloads (.pdf, .epub or .mobi files) either. Keep this in mind when you apply CSS to structure your story and make sure it doesn't fall apart when all CSS is stripped out.

CSS formatting is a great way to enhance certain elements of a story, such as letters in an epistolary fic or character voices in a story that's told from two points of view, but it shouldn't overshadow the actual contents of the fic. Sometimes you really just want a <strong> tag. Conversely, while there is an option to "Hide custom styles on works" under Preferences, which will hide all CSS by default, you might lose out on some really neat stuff if you never see it in action.

Examples

You can find an example stylesheet under Public Work Skins that comes with the most common formatting options already in place. Chances are, if you just want to change some text alignment or font colors, you won't even need to build your own stylesheet. Of course, you can also add more classes or create separate skins as you go. The world is your oyster! Just don't forget to pick the skin from the "Custom Stylesheet?" dropdown when you post.

Let's have a look at some CSS classes.

-

#workskin .align-justify {
text-align: justify;
}

This will make your fic appear as justified text, i.e. neatly aligned on both sides, if you do this:

<div class="align-justify"> Your story goes here. </div>

-

#workskin .font-serif {
font-family: Cambria, Constantia, Palatino, Georgia, serif;
}

This will make a paragraph appear in Cambria if your reader has that font installed on their computer. If not, it will try for Constantia and so on, until it has to fall back on that reader's default serif font, which will be Times New Roman in a lot of cases. To do this, use the following in your fic:

<p class="font-serif">Your paragraph goes here.</p>

-

#workskin .font-orange {
color: orange;
}

This will turn a word in your story orange for the following code:

This is an <span class="font-orange">example</span> sentence.

-

Achtung! Keep in mind that the parser will interpret all carriage returns as linebreaks, so don't use new lines to make the code easier to read for you. They will get turned into <br /> tags.

Where you can use CSS

You can use CSS to style the main body of your work, and in notes fields. You can't use it in summaries, because these show up in indexes, where user-input CSS is not supported. So, if you want to use styled text to include warnings or spoilers, you'll need to put these in the notes field.

Practical Uses

To see how this all works in practice, check out our example story Sliding Doors.

The default display for the work will show you the CSS in action, giving a two column display. If you click 'Hide creator's style' then the CSS styling will be suppressed and you'll see the basic text. As an added bonus, you'll also see the HTML tags which were used to style each bit of the text. The CSS style rules are at the bottom of the page, so you can see how these match up to the HTML and how they were applied to the work. (Note: HTML tags won't normally be revealed when the creator's style is hidden - this was achieved with a bit of extra CSS magic for the purposes of the tutorial.)

Other Frequently Asked Questions About Styling Works


Can I use inline CSS?

No, sorry. We've chosen to limit CSS to work skins in order to preserve the separation of style and content. By creating reusable classes for your fics you can control all your formatting in one stylesheet, and we can easily strip your CSS from a story (important for accessibility reasons) without interfering with the site caching (important for performance reasons). Everybody wins!

Do I need a separate skin for every work I post?

No. The formatting rules you define in one stylesheet can be used and re-used in any of your fics. However, if you have a series of stories that rely heavily on CSS for consistent formatting, it might make sense to create a separate skin just for that set of stories.

What if I never want to see styling on other users' works?

Check the "Hide custom styles on works" box in your Preferences. Alternatively, you can disable styles on a case by case basis by clicking the "Hide Creator's Style" button above the story header.

Will the custom CSS also be applied to file downloads?

No. The files you download (pdf/html/epub/mobi) will have no CSS formatting.

Tutorials and References

For more help on using CSS for styling, you may find the below sites useful. CSS is used to style all modern websites, so there are lots of resources out there (and it's well worth learning a bit about it).


Comment

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!

    Comment