How to do fancy text breaks in your AO3 story
So you hate that ugly default horizontal rule and you’re tired of using asterisks for your text breaks. No problem. There are a variety of symbols, characters, and Unicode-friendly glyphs to spice things up, but let’s say you want to use your own custom image (like the examples above) as a text break in your stories. Here’s how you can do that:
1. Find or make your divider image. I’d recommend keeping it under 500 pixels wide so it looks good on many devices.
2. Upload your image to a reliable image host site. Copy the URL once it’s done and make note of its height and width.
3. On your AO3 dashboard, go to the Skins section, click on My Work Skins, and then Create Work Skin.
4. Give your skin a name like "Fancy Divider" and paste this code into the CSS box:
#workskin hr { height: 24px; width: 200px; background: url(http://yourdomain/yourdivider.png); background-repeat: no-repeat; background-position: center; margin-top: 12px; margin-bottom: 12px; border: 0; }
Make sure you use the corresponding height and width values for your divider. You can also adjust the margin values if you want more space between your divider and your text.
Click Submit.
5. Navigate to the story you want your divider to appear in and click Edit. In the Associations block of the Edit Story section, select your "Fancy Divider” skin from the Select Work Skin drop down menu.
Now, scroll down to Work Text and view your story in HTML mode. Wherever you want your divider to appear, insert this code:
<hr>
6. Click Save and enjoy your totally sophisticated-looking (or not) story!
Tip: Remember (because I too sometimes forget) to have your “Fancy Divider” Work Skin selected (as well as using the corresponding HTML code) for every story you want your custom divider to appear in.
CHANGES: AO3 no longer requires the hr class (.hr) to be specified in the code, so you can use the plain <hr> tag.
