AO3 News

Tutorial: Styling works

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

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

Tutorial: HTML Sanitizing and Parsing

Published: 2010-11-11 23:11:40 -0500

Along with the upgrade to Rails 3, there have been significant changes and improvements to our HTML sanitizing and parsing in Release 0.8.2. These changes should make things clearer for authors and much faster for readers!

Here is a quick breakdown for those who just want the highlights, followed by a more detailed explanation of what was changed and how it all works.

Highlights

  • Blank lines and carriage returns will now be converted to paragraph (<p></p>) and line-break (<br />) tags in the text editor.

  • The text will automatically be parsed and "cleaned up" -- any tags that were left open get closed, any mis-nested tags get fixed, etc.

  • The text will be sanitized, to remove any elements that are potentially harmful to our server.

  • This change fixes the known bug where switching from HTML mode to Rich Text mode causes all your paragraphs to disappear. (Yay!)

  • This change will also allow users to embed video from: youtube, vimeo, blip.tv, dailymotion, viddler, metacafe, and 4shared. (Yay!)

What's Behind the Scenes

The new back end for content works in three steps.

  1. There is now a paragraph-adder that converts blank lines and carriage returns into paragraph tags (<p></p>) and break tags (<br />) based on a few simple rules:
  • A blank line left between two pieces of text will be made separate paragraphs:
  • Here is paragraph one.

    Here is paragraph two.

    will become:

    <p>Here is paragraph one.</p>

    <p>Here is paragraph two.</p>

  • A carriage return or newline in the middle of text will add a break tag:
  • Here is a line
    with a carriage return in the middle.

    will become:

    Here is a line <br />
    with a carriage return in the middle.

  • We also will preserve extra blank lines -- if you have TWO blank lines in a row, we will add in an empty paragraph:
  • Here is paragraph one, and I want extra space after it.

    Here is paragraph two.

    will become:

    <p>Here is paragraph one, and I want extra space after it.</p>

    <p> </p>

    <p>Here is paragraph two.</p>

  • Note: The paragraph-adder will put <br /> tags at the end of each line whenever there is a carriage return, even in things like lists. So, if you have a nice chunk of HTML in your story that you coded up by hand like this:
  • <ul>
    <li>Item one.</li>
    <li>Item two.</li>
    </ul>

    You can avoid having <br /> tags added by putting the list into a single line with no carriage returns instead:

    <ul><li>Item one.</li><li>Item two.</li></ul>

  • The next step is a Ruby on Rails gem (basically a kind of plugin) called Nokogiri, which parses the text and gives it back to us as a well-formed chunk of XHTML. What this means among other things is that:

    • any tags that were left open get closed

    • any mis-nested tags get fixed (eg, if you do <strong><em>foo!</strong></em> Nokogiri will turn that into the correct version (<strong><em>Foo!</em></strong>)

    • any attribute values that aren't properly in quotes get fixed

     

  • Finally, we use the gem Sanitize to clean up this XHTML and take out anything that is legal but not necessarily safe. Sanitize uses a whitelist, meaning that only the tags and attributes we specifically tell it are allowed are let through. It's very customizable, and we have been able to write special rules for Sanitize to safely allow embeds of videos from specific sites (currently: youtube, vimeo, blip.tv, dailymotion, viddler, metacafe and 4shared.) Once Sanitize is done, the final version is saved into the database.

  • There is lots of documentation available on Nokogiri and Sanitize on their respective sites.

    What you see when editing

    • If you are working in a field (like content in the Post New Work form) that allows you to use the Rich Text Editor, the tags <p> and <br /> will show, because otherwise if you switch to the Rich Text Editor, it will do that horrible thing where your whitespace disappears and your text all runs together into one giant blob!
    • If you manually put in some <p> tags that had extra attributes on them, like "<p align=center>", the tags will show.
    • The <p> and <br /> tags will not show when you edit fields like notes and summary, however, where there is no option to use the Rich Text Editor.

    Here's an example of how the tags will look on content in the Post New Work form:

    Comment

    Tutorial: Skins

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

    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

    Challenges tutorial: creating and running a gift exchange

    Published: 2010-08-12 16:21:12 -0400

    Creating and editing a collection

    So, you've decided to run a gift exchange challenge. Awesome. Here's a guide to help you get started.

    1. Go to the Collections tab and click New Collection.

    A gift exchange is run within a Collection.

    New collection button, black text on white. To the left are Title, Date and Size buttons.

    2. You should see this screen:

    Screen headed New Collection, with suggestion text and a series of text boxes used to set up a new challenge.


    • Select owner pseudonym(s): Which pseudonym you'd like to be shown as the owner of the collection.

    • Icon: The icon (if any) you'd like to represent the challenge.

    • Parent collection: If this is a sub-set of another collection (for example, one year of a challenge that has been run for multiple years), enter the parent collection here.

    • Collection name: the name of the collection. For example, Annual_Example_Challenge_2010. This will define the URL (web address) of your challenge so there can be no spaces.

    • Display Title: For example, Annual Example Challenge 2010. There can be spaces here.

    • Email: If you've got a separate email address for running the challenge enter it here. If you haven't, by default email messages will go to the challenge owners.

    • URL for custom header: If you'd like to have a custom header for your challenge, enter the URL where the image can be found on either your own webspace, or that of a photo sharing site.

    • Brief description: A brief description of your challenge, which will show on the Collections main page and the Profile page.

    Series of tick-boxes with options for seting up a new challenge.


    • Is this collection moderated?: Tick this if you would like your collection to be moderated. If a collection is moderated any registered user can post to it, but all works must be approved by a moderator or owner.

    • Is this collection closed?: Tick this if your collection is Closed. If a collection is closed, no one can post to it. Remember to open it when asking people to post their works.

    • Is this collection currently unrevealed?: Tick when you would like to hide your challenge entries, untick when you would like to reveal them.

    • Is this collection currently anonymous?: Tick if you would like your challenge's works to be anonymous. Untick to reveal the authors of the works.

    • Would you like to show random stories on the front page instead of the most recent: Tick this if you'd like to show random works on the home page of the collection instead of the most recent.

    • If this collection is for a challenge, please choose the type: Select gift exchange from this drop down menu.

    The next three optional fields are where your Introduction, FAQ (Frequently Asked Questions) and Rules can be entered. These will appear on the Profile page. However, the Rules and FAQ become their own menu entries on the left-hand side once entered so they can be easily found by your participants.

    Menu with Dashboard at the top in white on black text, followed by menu items, Profile, FAQ, Rules and Parent Collection below.

    Note: If you are creating a sub-collection these will be inherited from the parent collection by default, but anything you enter in this sub-collection will take precedence.

    Gift Notification Message: In this field you can create a custom message that will appear in the emails when works are revealed and participants are notified of their gift. This is optional.

    To alter these at any time go to the Settings menu item, or select the Settings button at the bottom of the Profile screen.

    Black on white row of buttons. Signups button to the left, with Challenge Settings, Settings, Delete and Delete Challenge to the right.

    Membership

    Depending on what sort of challenge you're running and its size, you may want to assign moderators and tightly control who can post to the collection. This is done on the Membership screen.

    To go there click the 'Membership' button on the challenge's dashboard or Profile page.

    Black on white row of buttons, Profile, Membership and Manage Items, from left to right.

    By default you will appear as an owner of the challenge. You can have multiple owners if there is someone or a few someones helping you run the challenge. Everyone you assign a role to must have an AO3 account. When you enter a name the site will search for AO3 user names.

    The roles it is possible to assign are:

    • Member: This person can post works to the challenge without prior approval.
    • Moderator: This person can approve/reject works, and add members.
    • Owner: The owner can approve works, assign pinch-hitters, and alter the sign-up form and FAQ and Rules fields. You can have multiple owners.

    • Invited: This functionality has yet to be rolled out.

    Note: By default, all registered users can post to a challenge, being a member of a challenge just means that they can post to a moderated challenge, and their work will be accepted without moderator approval.

    Sign-Up Form Settings

    To set up the challenge sign-up form go to Challenge Settings, this is near the bottom of the left-hand side menu.

    Menu with Dashboard at the top in white on black text, followed by menu items Profile, Parent Collection, Your Signup, Signups, Matching, Fandoms, Works, Bookmarks, Random Items, People, Tags, Challenge Settings which is highihgted in red with white text, and Settings.


    You should see this page:


    Sign up form headed 'Setting up the 2010 Example Challenge Gift Exchange. Below that is paragraphs of suggestion text and then a Schedule heading with a series of drop down menus with times.


    Schedule

    To set up the timings of your challenge, use the Schedule.

    Close-up of Schedule drop down menus with a sign-up open tick box at the top which is not selected.

    These times are only for information and will not automatically open sign-ups, close sign-ups or reveal works. This will all need to be done manually.

    The times will appear on the Profile page of the challenge.

    Sign Ups Open?

    The Sign Up open tick-box is where you open or close sign-ups. Leave this box unticked until you have your sign-up form ready.


    tickbox with sign up open? written beside it. it is not selected.

    Requests and offers

    Request and Offers sets the number of requests and offers you'd like the participants to use. You can set a required number (how many they need to have) and an allowed number (what is the maximum number they can have).

    Two rows of two text boxes with Required 1 and Allowed 1 on the top row, and Required 1, Allowed 2 on the second.

    In the example above, participants must be make at least one request and offer, but can make two separate offers if they chose.

    Then, you have to set the tag settings for the requests,

    A series of text boxes listing field names with a field beside each one for Required and Allowed numbers.

    and offers.

    Another series of text boxes listing field names with a field beside each one for Required and Allowed numbers.

    These will define what a participant's requests and offers can contain.

    • Optional tags: Click this if you would like to allow optional tags. These are tags that participants can add which will be matched on if possible, and allows your participants a little more flexibility with their requests and offers.
    • Details/Description: Tick Required if your challenge needs to include more details than just a relationship or fandom, and Allowed if you would like to give participants the choice to include more details.
    • URL : Tick Required if your challenge needs a URL (for example, where the participants works are archived) or Allowed if you would like to give participants the option of including one (for example, a link to a Yuletide letter).

    You can leave both of these blank if you like and select neither box.

    Now, you can define how many fandoms, relationships, or ratings participants are allowed to chose.

    To do this enter numbers into the required and allowed boxes. You do not have to fill in all of these, and if you are using automatic matching it will take a longer time to match them if you fill in too many.

    If you are running a challenge that is specifically for a given fandom or relationship or character, just leave that set of tag options set to no tags required or allowed -- don't put in that one tag as the only choice. Tag options should only be used where you want participants to have a choice.

    Next you can define what tags people can chose from when making their requests and offers.

    Seven text fields. Character, Relationship, Freefrom, Category, Rating and Warning are all blank, but Fandom has a series of fandoms listed in in separated by commas.

    In the example above, participants can choose from any of the fandoms listed in the fandoms field. Anything entered in these fields should be comma-separated and will auto-fill.

    Close up of Character text field. Buff is typed with auto-filled fields showing below listing, Buffy Summers, Buffybot, Pheobe Buffay ...

    Note: In all of the fields, you will only be able to choose canonical tags that are already in the AO3 system. If you wish to include a fandom, relationship, character or additional tag (freeform) which is not already in the system, please contact the Tag Wrangling Committee through the Support and Feedback form or via the Tag Wrangler's twitter account, @ao3_wranglers. When possible, the committee asks that these requests be lodged at least one month before opening a challenge, to give tag wranglers time to review and add necessary tags. The Committee can also add additional tags (freeforms) for members to add to their posted works as required.

    .

    The next set of drop-downs determined the minimum level of matching that must occur in each field. That is, how many characters or fandoms must match between the participants to consider them a match. The simplest option is to chose to match them on Requests, meaning anyone with a Request matches another person with a Request, but this may not work for more complicated challenge with a variety of different tags in use.

    Image:List of drop down menus with numbers for minuimum number of matches to make. List includes Requests, Fandoms, Characters, Relationships, Freeforms, Categories, Ratings, Warnings.

    If you leave a 0 in the drop down it will not match on this field.

    Note: the most options that are chosen here the longer matching may take, and the harder it will be for matches to be found.

    Optional tags: If you chose to use optional tags above, you can choose what field(s) they are used to match on if possible.

    Next are three fields which define the challenge-specific instructions that will go with the sign-up form.

    You can also change the labels for the URL and Description fields if you are using them.

    Three large text boxes, and four smaller text boxes for changing labels in Sign-up form.


    For example, as seen above, if you are running a challenge where participants need to provide a link to where their fic is archived, you could call the field, 'My fic is located at:.'

    Remember: check the Sign-Up Form to make sure it's working how you'd like before opening it up for people to sign-up for the challenge.

    Now you're ready to open the sign-ups!

    To do this go to the Settings menu and tick the 'Signups open?' tickbox.

    Checking the Sign-Ups

    You can check the sign-ups as they come in by going to the sign-ups menu item on the challenge side-bar.

    Two rows of light pink boxes in a table with a summary of a sign up going horizontally.

    Here you can see what participants have chosen.

    To make the list easier to navigate (especially if you have multiple requests and offers) you can hide the descriptions using the Hide Descriptions button on the top of the screen. To bring them back click Show Descriptions.

    If you need to contact a participant for any reason you can click the envelope icon next to their username.

    Close up of a particpants name called aworldinside with Edit and Delete links to the left and red envelope icon to the right.

    If for any reason you wish to edit or delete a sign-up use the edit and delete links on the left hand side.

    You can also download an Excel spreadsheet of the sign-ups. To do this click the Download (Excel) button at the top of the screen.

    Close Sign-Ups

    Since the dates on the Schedule are provided only for information, you must close sign-ups manually.

    To do this go back to the Challenge Settings menu and untick the Signups Open tickbox.

    tickbox with sign up open? written beside it

    Sign ups are now closed.

    Generate potential matches

    Now you have closed sign-ups, let's do some matching for your gift exchange.

    Depending on the choices you made when you set up the Sign-Up Form this may not be necessary, or you may chose to manage the assignments manually. If so skip through to Adjusting Assignments

    To generate matches go to the Matching menu.

    There will only be information here once you have closed sign-ups.

    Matching menu item selected to the left, with a matching screen to the right. Headings for Pseud, Giving Gift to, Assigned Giver, Potential Gifver, and Write in Pinch Hitters. There are nothing below them.


    Click Generate Potential Matches.

    If your challenge settings mean that you don't require automatic matching, you will get a warning that the automatically generated matches will be at random. Click OK if you wish to continue.

    Grey warning box with Blue circle with a white question mark to the left.


    Matching can take a while depending on how big your challenge is and the criteria you have set.

    You will receive an email when the matching is complete.

    The matching screen should look something like this:

    Pink table with partipants names to the left, with names under Giving Gift To, drop down menus under Assigned Giver and a link titled Show 13 under Potential Givers. A field titled Write in Pinch Hitter is on the right.

    Adjust assignments

    You can adjust the assignments in two ways:

    1. Automatically

    To automatically adjust the assignments click 'Regenerate assignments' and the matching process will be run again.

    White button with black text titled Regenerate Assignments

    Note: Depending on your matching settings, this might not make a lot of changes to your assignments. If you alter something on the Challenge Settings Page then this may make more of a difference.

    2. Manually

    To adjust the assignments use the drop down menus.

    Image:Pink table with Assigned Giver drop down expanded.

    Note: If you adjust the assignments, they will not readjust automatically so that each participant has another writing for them. You will need to check them manually (or regenerate assignments).

    To see all the potential givers for any one participant use the links under the Potential Givers column.

    Image: Pink table with two row showing. One has Show 13 link expanded to show a list of participant names.

    Clicking on a potential users name brings up their sign-up.

    Image: Series of black text summarising a participants sign-up.

    Once you have finished click 'Update Assignments'

    White button with black text titled Update Assignments

    If you have any participants who don't have an assignment, it it will show up under 'Missing recipients'

    Assignments screen with extra box at the top under Missing Recipients. Drop down menu with a participant highlighted in blue under Pinch Recepient.

    Use the drop down menu to select the recipient and click 'Update assignments' and they will return to the main table.

    You can also chose to write in a pinch-hitter in the right-hand field. Pinch hitters do not have to be signed-up for the challenge, but must already have an AO3 account.

    Send assignments

    Once you are happy with the assignments, to send them to participants click 'Send Assignments.'

    White button with black text titled Send Assignments.

    All of the challenge maintainers will receive an email when the assignments have been sent to all participants.

    Managing Posted Works

    Once the assignments have been sent out you should now see this screen when you click Assignments (which has replaced Matching in the side menu).

    Light pink table with list of participants on the right, red envelope icons, and then list of who they are writing for. Work info says not posted for all participants. Tick boxes with Default on all rows. Not eelected.

    As participants post works this will be shown in this table.

    Image:Work-posted.jpg

    If you are running a moderated challenge, each work will have to be approved by an owner or moderator before it can be added to the collection.

    This is managed through Manage Items, which can be found on the profile page of the collection.

    White buttons with black text. From left to right: Profile, Membership, Manage Items.

    Use the drop-down menu under Collection Approved to either accept or reject the work.

    Pink table with a series of entries called 'awesome chalenge agan.' Creator column says aworldinside, Member column is Y, Creator approved column says approved. Collection approved drop down says approved, Unrevealed tick box is selected. On far right are two links, Manage and Delete.

    You also have to option to Remove a work, using the option on the right-hand side and to keep a work unrevealed from the rest of the collection using the Unrevealed tickbox.

    Works, once they are accepted, will be added to the collection (but will remain hidden until you reveal them) as well as any by users who are Members of the challenge and have therefore been pre-approved to post to it.

    If you are not running a moderated challenge, the works will be added to the collection automatically.

    Managing Defaulters

    If a participant has defaulted, use the tick box beside their name.

    Once they have been marked as a defaulter this will appear:

    Pink table with three rows under Defaulted Assignements. A pinch hitter field is shown blank. Three rows under Assignments appear below.

    To assign a pinch-hitter:

    Enter the pinch-hitter's archive username in the pinch-hitter field (again remembering they don't have to be already signed up for the challenge but do have to have an AO3 account). The field will auto-complete to check that the user has an AO3 account and this may take a second.

    Once you have done this click 'Assign' and an email with their assignment will be sent to them.

    Once a pinch-hitter has been assigned they will not appear on the main table on the Assignments screen, but will rather remain at the top of the screen in the separate pinch-hitters table. By default covered pinch-hits are hidden, and uncovered ones are shown, but to unhide covered ones click 'Show Covered Defaults.'

    Note: You can also default all participants who have not posted to the challenge by using the 'Default All Unposted' button at the top of the screen.

    White button with black text titled Default All Unposted.

    Close Challenge

    To close the challenge so no more gifts can be added, go to 'Challenge Settings' and tick the box beside 'Is this collection closed?'

    Tickbox with 'Is this collection closed selected. Is this collection currently unrevealed tickbox is unselected.

    You can of course chose to leave this open if you'd prefer. :)

    Reveal works

    It's time to reveal the works!

    To do this go to the Settings page for your challenge and untick the box that says 'Is this collection currently unrevealed? '

    You can leave the collection closed if you don't wish participants to add any more works.

    Tickbox with 'Is this collection closed selected. Is this collection currently unrevealed tickbox is unselected.

    You've successfully set up and run a gift exchange challenge on AO3. Congratulations! :)

    Comment

    Tutorial: posting to a challenge

    Published: 2010-03-16 16:10:56 -0400

    You've done it - you've written your story for a challenge on the AO3! \0/ Congratulations. Now you just have to post it, and hopefully that will be easier than the writing was...

    1. The easiest way to post your work is to first go to the collection it's going to be part of. Be sure you get the right one! It's worth bearing in mind that many challenges which take place on a regular basis have subcollections for each specific challenge, in which case you need to be sure you go to the right subcollection. The fastest way to find a challenge you've signed up for is via the "My Signups" page, which is linked in the sidebar of your "My Home" page.

      A user's challenge signups page with a link to the collection and manage links

      In the example below, we're going to be posting a work to the "Awesome Exchange 2010" subcollection, which is the 2010 round of the "Awesome Annual Challenge" collection.

      Dashboard of the Awesome Exchange 2010 collection, with Profile, Post To Collection and signup managements links

    2. Clicking on the "Post To Collection" link will take you to the form for posting a new work, which you can fill out as normal. In the "Associations" section, you need to make sure that the name of the collection or subcollection you are posting to is listed in the "Post to Collections/Challenges" field. If you've come to the form by clicking the link on the collection's page, this will be added for you automatically.

      The Post to Collections or Challenges field on the Post New form, with awesomeexchange2010 filled in

      If you are participating in a gift exchange, you should enter the name of the person you've written your work for in the field immediately below that. The form will suggest possible matching names to you.

      Recipient field on the Post New form; paren has been typed in, and parenthetical is being suggested by the autocomplete

    3. Once you've finished filling out the form, you can preview and then post! \0/ Bear in mind that if the challenge is set to be anonymous or unrevealed, your work may only be fully visible to you. For example, you may see something like this:

      Author view of the blurb for an anonymous and unrevealed work; the work details are visible, and the author's name is listed in brackets after Anonymous

      If your work is currently anonymous, however, other people won't be able to see your name after Anonymous, and if it is currently unrevealed, other people will see only a "Mystery Work":

      Mystery Work blurb which is seen by other users; no details except the name of the collection are provided

      If you're nervous about whether this is really working correctly, one thing you can try is logging out and seeing how your work appears to you then - you should also then see the Mystery Work blurb or the anonymous blurb. The owner or moderator of the challenge will reveal your work when the time comes!

    Hopefully this should help to ensure that the process of posting your challenge fic goes smoothly, but if you run into any problems, please contact the Support team and we'll do our best to help!

    Comment

    Tutorial: signing up for a gift exchange

    Published: 2010-03-16 16:05:11 -0400

    Here's a quick guide to walk you through signing up for a gift exchange!

    1. First you need to find the challenge. You may be linked from elsewhere, but if not, go to the Archive's main Collections page.

      The main Archive navigation, with the collections tab active

      You can find a collection using the filter and sort options on the right:

      The collections sort options and filter box, with options to filter by title, fandom, closed, moderated and gift exchange

      The collection title and fandom fields offer autocomplete suggestions when you start typing.

      Filter By Title field - the word awesome has been typed in and the autocomplete is suggesting Awesome Annual Challenge

    2. Once you've found the collection you're looking for, you will see its blurb:

      Blurb for the Awesome Annual Challenge, showing its name, owner, a short description and its status

      Clicking on the title will take you to that collection's page:

      Dashboard of the Awesome Annual Challenge collection; a sidebar contains links to a subcollection, as well as to the collection's profile, rules and random items

      The links in the sidebar on the left allow you to view the collection's profile, read its rules, and view any subcollections it may have. If the collection is a challenge, the signup form will also be linked from the sidebar.

      Sometimes, however, a challenge which is held on a regular basis will have a subcollection for each round. That's the case in our example: the Awesome Annual Challenge contains a subcollection called "Awesome Exchange 2010", the home for this year's challenge.

      Dashboard of the subcollection Awesome Exchange 2010 with Sign Up link

    3. The challenge's sidebar will contain similar links to that of the parent collection. If you want to see when signups are due to open, check the Profile; it should list the important dates for the challenge (and if you've set your timezone on your Preferences page, it will even show you the exact times for your timezone as well). Once signups are open, there should be a link to the Signup Form in the sidebar, as well as in the navigation on the right.

      Exactly what is contained on the signup form for a gift exchange will of course depend on the exact nature of the challenge! The owner of the challenge should have added more detailed instructions for your specific challenge to the signup form, but there are some basic things to look out for.

      Normally, you will need to specify what your Requests - what you would like in the work created for you - and your Offers - what you are willing to write for the user you are assigned.

      Any fields marked in red are required, while the others are optional. In the example below, for example, you are required to specify a certain number of fandoms. The numbers next to the label indicate how many you need to select - "Fandoms (1 - 5)" would mean that you must select between one and five fandoms. "Characters (0 - 2)", on the other hand, would mean that you are not required to list any characters, but you have the option of listing up to two.

      An excerpt from a signup form. The label is red and reads Fandoms (1-5); three fandoms are shown with checkboxes, with a link below to show more

      In some cases, you may be required to choose from a predefined list. In the example above, the owner of the challenge has defined a certain number of eligible fandoms. Only a few are shown by default; clicking on the "X more fandoms to choose from" link will show the entire list.

      In other cases, rather than having to select from a predefined list, you will be asked to type into a field. In the example below, this is the case for the characters you can request. To request more than one, separate them with a comma. Please note that in cases like this, the autocomplete will suggest specific forms of fandoms and character names, etc - you need to use these 'canonical' forms of the tags on signup forms so we can be sure everyone is using the same version and match people up correctly.(Note that the 'canonical' tags are those that appear in the sidebar filters when browsing the archive, and in the auto-complete.) If you try to put in something else not in the autocomplete, you will receive an error. If characters or relationships you want to select are not appearing, you will have to contact the exchange's moderator.

      An excerpt from a signup form. The label is red and reads Characters (1-2); one character has already been typed into a text field, followed by a comma, with a new character in the process of being entered and the autocomplete suggesting possible names

      You could be asked to choose from a predefined list or to type in directly any of the following kinds of information. Very few forms will include all of the options below, however!

      • Fandoms
      • Characters
      • Relationships
      • Ratings
      • Categories
      • Freeforms
      • Archive Warnings

      Other fields which could appear in the requests and/or offers sections, depending on the challenge, include:

      • Prompt URL: If you are allowed or required to provide a link of some sort, this is where you'd enter it. Exactly what kind of link is expected will depend on the challenge, but it could be a link to a letter you've written to the person who'll be writing for you, or a link to your stories in a remix-type challenge, for example.

      • Description/Details: If you are asked to provide a more detailed prompt or other information, you would enter that here.

      • Optional Tags: This would be a space for you to add additional tags - for example, for things which aren't included in a predefined list for you to select from, or which fall into a category which doesn't appear elsewhere on the form. These optional tags will be used to try to ensure the best possible match with another user in the exchange, but they may be ignored if it isn't possible to match you using them. If you enter more than one additional tag, you should separate them using a comma.

        An Optional Tags field from a signup form; the tag Plotty has been entered, with the tag Schmoop being suggested via autocomplete as a new tag is typed in

    4. Once you've finished filling in the details of your offer and request, click the Submit button at the bottom of the page to sign up!

      You can view and edit your signup at any time after you've submitted it. On the sidebar of your "My Home" page, there is a "My Signups" section where you can view your signups for all challenges you're participating in.

      A small part of the sidebar on the user My Home page, with My Signups appearing below My Collections

    5. Success! Once the owner of the challenge has matched you up with a user to write for in the gift exchange, you will be notified by email.

    We hope that this will help you when signing up to participate in a gift exchange, but if you run into problems, please contact the Support team and we'll do our best to help!

    Comment

    Tutorial: uploading a user icon

    Published: 2010-03-16 15:59:48 -0400

    The old placeholder icon with the text 'your icon (eventually), with eventually crossed out and the word NOW! added below

    "Eventually" is here at last! We're very excited to be adding icons to the Archive of Our Own. \0/ Here's a quick guide to help you get started.

    What you need to know

    • You can upload one icon for each of your pseuds.
    • Icons must be 100 by 100 pixels in size; you can upload images which are smaller or larger, but be aware that they will be automatically resized to 100 by 100.
    • The images can be in png, jpeg or gif format.
    • There are a few restrictions on what content you can show on your icons. Our Terms of Service state that they "should not contain depictions of genital nudity or explicit sexual activity". Read the relevant section of the ToS.
    • Your icon(s) will show on your Dashboard and Profile pages, your Pseuds page, your blurb on the People page, and next to any comments you leave under that pseud.
    • Collections and subcollections can also have icons; owners and moderators can upload an icon for their collection when creating or editing it.
    • We have a new placeholder icon for people who choose not to upload one, now that "eventually" has arrived!

    How to upload an icon

    1. Go to your dashboard (also known as your "My Home" page).
    2. Click on the placeholder icon. This will take you to the edit page for your default pseud.
    3. At the bottom of the form you can see what icon is currently in use (if you haven't already uploaded one, it will be the AO3 placeholder icon), and there is a field for you to specify the image you would like to upload. You should also specify alt text for the icon: a brief description of its purpose which is used if the image isn't showing - for example by people browsing with images turned off or visually impaired people using screenreaders.
    4. Once you've specified the image and alt text for it, click the "Update" button.
    5. Admire your shiny icon! \0/
    6. If you have more than one pseud, you can upload icons for them too. Your sidebar contains a link to your "My Pseuds" page, which lists each of the pseuds you have created, with "Edit" links to the page where you can upload icons for them.

    We hope you enjoy the icons! But if you have any questions or run into any problems, please contact the AO3 Support team and we'll do our best to help.

    Comment

    Tutorial: changing your username

    Published: 2010-03-16 15:54:53 -0400

    We know how annoying it is when you suddenly think of the perfect username two days after you've signed up for an account, or when you belatedly realise you would have preferred to have your username start with a capital letter. Now we've made it possible for you to rename your account!

    Before you rush into changing your username, though, there are a few things you should bear in mind.

    • We won't forward links from your old username. Links to your individual works won't break, because your username doesn't appear in the address. But any links you or others have posted on other sites to your dashboard, profile, user works page, series page and so on will. Please weigh that up before you change your username!
    • Your former username won't be reserved; it will be possible for another user to claim it.
    • Usernames have to be unique, so you can't change your username to one currently being used by someone else.
    • You can, however, change the capitalisation of your existing username. In other words, if you currently have the username "superfangirl10", you can rename your account to "Superfangirl10", "SuperFangirl10", or even "SuPeRfAnGiRl10" if you want.

    If you're certain you want to change your username, here's how to go about it!

    1. Go to your Preferences page, which you can reach from the bottom of the sidebar on your My Home page.
    2. In the options available at the top right, there is a new link: "Change My Username". It will take you to the edit username page.
    3. To change your username, enter the new username you want in the "Desired Username" field. You'll be warned if you choose a username which has already been taken by someone else. You will also need to enter your password for security reasons.
    4. When you click "Change", your username will be changed.

    We hope you'll enjoy this new feature! If you have any questions or run into any problems, please contact our Support team using the Support and Feedback form.

    Comment


    Pages Navigation