AO3 News

Post Header

Published:
2020-04-20 00:12:14 UTC
Translations:
Tags:

Several weeks ago, we took emergency measures to help the Archive handle an influx of traffic. These measures successfully reduced our database load, but left us unable to add any hits from logged out users to works' hit counts. We'll be able to resume counting these hits in the next few days, although there will be some changes to hit count behavior -- and one frequently requested feature we've been able to add thanks to these changes.

How hit counts will work going forward

Previously, a work's hit count only increased if:

  • you were not logged in as one of the work's creators, and
  • you visited a single-chapter work, a multi-chapter work in entire work mode, or the first chapter of a multi-chapter work in chapter-by-chapter mode, and
  • your IP address did not match that of the visitor right before you.

This meant hits weren't counted if you followed a direct link to a later chapter, e.g. from a subscription email, or if you were a work's sole dedicated follower who returned to it day after day.

The revised code will increase the work's hit count if:

  • you are not logged in as one of the work's creators, and
  • you visit a single-chapter work, a multi-chapter work in entire work mode, or any chapter of a multi-chapter work in chapter-by-chapter mode, and
  • your IP address has not visited the work in the last 24 hours.

This means a work's hit count will still only increase by one regardless of whether you visit one chapter or fifty, but it will no longer matter if you start on the first chapter or the tenth, or if someone else accessed the work between your daily visits.

As always, hit counts are updated approximately every half an hour to avoid placing unnecessary strain on our servers, although caching means it may take an hour for the new total to appear for logged out users.

Privacy

We don't want to hold on to your data any longer than absolutely necessary, so IP addresses used to calculate hits will be removed from our system within 48 hours of being collected.

However, the new code is JavaScript based, so you can disable JavaScript in your browser settings or by using a browser extension if you have any privacy concerns. (As always, our Privacy Policy has more information on what data we collect and how we use it.)

Hit count preferences

The preferences allowing logged in users to control the display of hit counts have been buggy or non-functional for years now, and the problem has only gotten worse as we've increased the amount of caching we do.

Therefore, we'll be removing the following preferences when the new hit count code is deployed:

  • Don't show me any hit counts
  • Don't show me hits on my works
  • Don't show other people hits on my works

If you'd prefer to avoid seeing hit counts after these preferences are removed, you can hide them with a site skin.

If you're not already using a site skin:

  1. Log in.
  2. Go to the Public Site Skins page.
  3. Choose "Create Site Skin" to go to the Create Site Skin page.
  4. Fill in the "Title" field with a unique title, e.g. "[Your username's] skin for hiding hits."
  5. In the large "CSS" field, enter the following: .stats .hits, .statistics .hits { display: none; }
  6. Press "Submit" to save your skin.
  7. Press "Use" to apply the skin.

If you're already using a public site skin like Reversi:

  1. Follow steps 1-5 from the instructions above.
  2. Press the "Advanced" section's "Show ↓" button to reveal more options.
  3. Press "Add parent skin" to add two new fields to the form, directly over the button. One field will be filled in with the number "1" and the other field will be blank.
  4. In the blank field, enter the name of the public site skin you are currently using. The autocomplete will help you find it.
  5. Press "Submit" to save your skin.
  6. Press "Use" to apply the skin.

If you're using a site skin that isn't public, you can try adding the code from these instructions directly to the skin, but it may need some adjustments depending on the other styles in your skin.

Latest chapter links

Now that going directly to any chapter of a work will increase its hit count, we've updated work blurbs to include a link that will take you from any work listing directly to the work's most recently posted chapter.

A work blurb showing the first 2 in Chapters: 2/2 is now the latest chapter link.

On multi-chapter works, the first number in the "Chapters" information at the bottom of the blurb will now be a link to that chapter, making it that much easier to get to the latest installment of your favorite work in progress.

We expect to roll out these changes in the next few days, once we've completed testing and coordinated our volunteers' schedules. We'll give a heads up on the @AO3_Status Twitter account shortly before we begin and add an update to this post once the changes are live.

Updated 08:30 UTC April 22: The changes in this post have now been deployed.

Comment

Post Header

Published:
2014-10-16 17:54:12 UTC
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-12 02:53:21 UTC
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-12 00:42:03 UTC
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-02-12 22:19:59 UTC
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 23:12:20 UTC
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