#page breaks

Credits:

Knife icons created by Freepik - Flaticon

Revolver icons created by Smashicons - Flaticon

Crow icons created by iconixar - Flaticon

Arrest icons created by Freepik - Flaticon

Cardiology icons created by Irfansusanto20 - Flaticon

Bomb icons created by Candy Design - Flaticon

Hey guys, if you've been following along with the wonderful chapter reads of Unbreakable Bonds by Mystery Red Reads on Youtube then you may have heard her mention a few times about Page Breaks and Artwork. I had to do some Googling to figure out those things myself but since I am in possession of the knowledge I figured I would share it because AO3 in particular is kind of weird about adding artwork to your stories. So, I took some screenshots and hopped onto Canva and made some visual aids for you guys and I hope it helps dress up your stories! @amunetredhere you are!

32 Witchy themed page dividers for your blog! Eight total designs in four variations each: black with white border, white with black border, solid black, and solid white; and all are transparent. At 1000 x 250 px they're the perfect size to use on your tumblr, and look crispy on desktop and mobile.

Hello! I'm opening commissions for AO3 page dividers! No more boring straight lines - spruce up your fanfic with a little doodle in between your scenes!

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.