Chapter Text
The images are all from the free version of Canva.com, which I downloaded and adjusted to erase the background and clean up the edges. The idea to make these came from this post by the series with the best workskin tutorials I found on this site: AO3 Work Skins/Tutorials by Codename Carrot, La Temperanza. I suggest you check out that series for more cool ideas.
Edit: In terms of crediting, I'd love if you linked back to this fic if you use these dividers so others can find them too, but it's not necessary if you'd rather not :) Just, please, don't take credit for having made them.
To use these, follow these steps:
- Open your Dashboard in a different tab than this one, and click "Skins".
- Near the upper right corner, click "My Work Skins".
- If you're already using a skin for that fic, select the one you're using and click "Edit". If you're not using one, click "Create Work Skin" on the upper right corner.
- Give your skin a title
- Come back here, and from this list of dividers, scroll to the divider you want, and copy all the text quoted under "CSS" (either with right click > Copy or with Ctrl+C).
- Go to the "New skin" tab. In the text box that says "CSS", paste the text you copied. If there's already text in that skin, paste the new text at the very end.
- If you want more dividers, repeat steps 5 & 6 until you've got them all.
- Click "Submit".
- Open the New/Edit Work page for the fic in which you want your dividers and scroll down to the box labelled "Associations".
- Click the dropdown in the last item on that box, "Select Work Skin", and click on the skin you just added the code to.
- Now scroll all the way down to the "Work Text"/"Chapter Text" box. Make sure the "HTML" option is selected instead of the "Rich Text" one.
- Come back here and copy the text quoted under "Work Text" (either with right click > Copy or with Ctrl+C).
- Go back to your editor and paste the text where you want your divider to be. It can be a bit confusing if you're used to rich text only, but try to find the last bit of text before the place where you want the divider, and you'll see this after it: </p>. Paste the text after that.
- Alternatively, add the divider in the rich text editor by clicking the button with the horizontal line, and then switch to HTML and replace the <hr> with the code for the divider you want.
- Then click "Preview" to make sure it looks okay and then either save it as a draft or post it.
Without further ado, these are the dividers I can offer you:
Divider 1 ↓
CSS:
#workskin .divider1 {
background: url(https://i.postimg.cc/Dw8XDR1t/divider1.png);
height: 50px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
border: 0;
width: 100%;
}
Work text:
<hr class=“divider1” />
Divider 2 ↓
CSS:
#workskin .divider2 {
background: url(https://i.postimg.cc/7YbhY0bz/divider2.png);
height: 80px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
border: 0;
width: 100%;
}
Work text:
<hr class=“divider2” />
Divider 3 ↓
CSS:
#workskin .divider3 {
background: url(https://i.postimg.cc/CxBRJkg0/divider3.png);
height: 80px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
border: 0;
width: 100%;
}
Work text:
<hr class=“divider3” />
Divider 4 ↓
CSS:
#workskin .divider4 {
background: url(https://i.postimg.cc/285bbg9V/divider4.png);
height: 80px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
border: 0;
width: 100%;
}
Work text:
<hr class=“divider4” />
Divider 5 ↓
CSS:
#workskin .divider5 {
background: url(https://i.postimg.cc/GmVy1zQ9/divider5.png);
height: 50px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
border: 0;
width: 100%;
}
Work text:
<hr class=“divider5” />
Divider 6 ↓
CSS:
#workskin .divider6 {
background: url(https://i.postimg.cc/g0h6cRSs/divider6.png);
height: 50px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
border: 0;
width: 100%;
}
Work text:
<hr class=“divider6” />
Divider 7 ↓
CSS:
#workskin .divider7 {
background: url(https://i.postimg.cc/05nKN9fT/divider7.png);
height: 80px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
border: 0;
width: 100%;
}
Work text:
<hr class=“divider7” />
Divider 8 ↓
CSS:
#workskin .divider8 {
background: url(https://i.postimg.cc/qMZt8QWQ/divider8.png);
height: 80px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
border: 0;
width: 100%;
}
Work text:
<hr class=“divider8” />
Divider 9 ↓
CSS:
#workskin .divider9 {
background: url(https://i.postimg.cc/Jzkhj8N4/divider9.png);
height: 110px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
border: 0;
width: 100%;
}
Work text:
<hr class=“divider9” />
Divider 10 ↓
CSS:
#workskin .divider10 {
background: url(https://i.postimg.cc/26fL16gD/divider10.png);
height: 50px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
border: 0;
width: 100%;
}
Work text:
<hr class=“divider10” />
Divider 11 ↓
CSS:
#workskin .divider11 {
background: url(https://i.postimg.cc/wvcyLzds/divider11.png);
height: 50px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
border: 0;
width: 100%;
}
Work text:
<hr class=“divider11” />
Divider 12 ↓
CSS:
#workskin .divider12 {
background: url(https://i.postimg.cc/C5hZ42Fr/divider12.png);
height: 50px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
border: 0;
width: 100%;
}
Work text:
<hr class=“divider12” />
Divider 13 ↓
CSS:
#workskin .divider13 {
background: url(https://i.postimg.cc/pdMLZSCQ/divider13.png);
height: 110px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
border: 0;
width: 100%;
}
Work text:
<hr class=“divider13” />
Divider 14 ↓
CSS:
#workskin .divider14 {
background: url(https://i.postimg.cc/023Q6jJB/divider14.png);
height: 110px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
border: 0;
width: 100%;
}
Work text:
<hr class=“divider14” />
Divider 15 ↓
CSS:
#workskin .divider15 {
background: url(https://i.postimg.cc/d0RtS9Nb/divider15.png);
height: 110px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
border: 0;
width: 100%;
}
Work text:
<hr class=“divider15” />
Divider 16 ↓
CSS:
#workskin .divider16 {
background: url(https://i.postimg.cc/cHs4q8Vr/divider16.png);
height: 110px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
border: 0;
width: 100%;
}
Work text:
<hr class=“divider16” />
Divider 17 ↓
CSS:
#workskin .divider17 {
background: url(https://i.postimg.cc/MH9n3YH6/divider17.png);
height: 50px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
border: 0;
width: 100%;
}
Work text:
<hr class=“divider17” />
Divider 18 ↓
CSS:
#workskin .divider18 {
background: url(https://i.postimg.cc/s25vCzx0/divider18.png);
height: 80px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
border: 0;
width: 100%;
}
Work text:
<hr class=“divider18” />
Divider 19 ↓
CSS:
#workskin .divider19 {
background: url(https://i.postimg.cc/tTy7XcVR/divider19.png);
height: 80px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
border: 0;
width: 100%;
}
Work text:
<hr class=“divider19” />
Divider 20 ↓
CSS:
#workskin .divider20 {
background: url(https://i.postimg.cc/503yjmwB/divider20.png);
height: 80px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
border: 0;
width: 100%;
}
Work text:
<hr class=“divider20” />
Divider 21 ↓
CSS:
#workskin .divider21 {
background: url(https://i.postimg.cc/htkfYvDd/divider21.png);
height: 80px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
border: 0;
width: 100%;
}
Work text:
<hr class=“divider21” />
Divider 22 ↓
CSS:
#workskin .divider22 {
background: url(https://i.postimg.cc/nrrFrfVx/divider22.png);
height: 110px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
border: 0;
width: 100%;
}
Work text:
<hr class=“divider22” />
Divider 23 ↓
CSS:
#workskin .divider23 {
background: url(https://i.postimg.cc/rmQyqwkg/divider23.png);
height: 110px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
border: 0;
width: 100%;
}
Work text:
<hr class=“divider23” />
Divider 24 ↓
CSS:
#workskin .divider24 {
background: url(https://i.postimg.cc/prS2ncyF/divider24.png);
height: 110px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
border: 0;
width: 100%;
}
Work text:
<hr class=“divider24” />
Divider 25 ↓
CSS:
#workskin .divider25 {
background: url(https://i.postimg.cc/G3g3Ntzm/divider25.png);
height: 110px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
border: 0;
width: 100%;
}
Work text:
<hr class=“divider25” />
Divider 26 ↓
CSS:
#workskin .divider26
background: url(https://i.postimg.cc/28qjfYXF/divider26.png);
height: 110px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
border: 0;
width: 100%;
}
Work text:
<hr class=“divider26” />
Divider 27 ↓
CSS:
#workskin .divider27 {
background: url(https://i.postimg.cc/28Pkktsp/divider27.png);
height: 110px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
border: 0;
width: 100%;
}
Work text:
<hr class=“divider27” />
Divider 28 ↓
CSS:
#workskin .divider28 {
background: url(https://i.postimg.cc/qvykzLrN/divider28.png);
height: 110px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
border: 0;
width: 100%;
}
Work text:
<hr class=“divider28” />