Work Text:
This work skin formats your fic just like this one is formatted.
If you are new to HTML/CSS and AO3's Work Skins, here are a few helpful resources:
I use Imgur to host my images, because it's free and easy. Images do become visible to everyone on upload on there though, head's up. If you want to use the same base dividers as the ones I added my themed symbols onto, click each image below to open the image link, and then you can save it to your device:
To make the dividers work, you must use the correct "class" within the actual fic content, which is a unique phrase that identifies which styles apply where.
This is what you should use at the start of your fic for the chapter divider: <hr class="chapterdiv">
This results in:
This is what you should use when you need a section divider: <hr class="hr">
This results in:
And this is what you should use at the end of your fic: <hr class="chapterend">
Which results in:
Make sure you are using the HTML editor when you enter those lines. If you use the rich text editor, the line will simply appear as text, just as it did for me above.
To change the page divider images to your own, all you need to do is replace the URLs anywhere this line appears with your image links: "background: url(YOUR LINK HERE);"
As you can see from the demos, the chapter start and end dividers are the same image, just flipped. The code flips the image for you, so you only need to upload two dividers total.
Use the same background URL in both places when you change the image in the "#workskin .chapterdiv" and "#workskin .chapterend" parts of the code, unless you purposefully want to use a different image at the start and end.
If you do and you want to stop the image from being flipped, just delete the "transform: rotateY(180deg);" line from the chapter end code. You could also alternatively flip it upside down using ""transform: rotateX(180deg);" if you prefer.
To update the image for the regular section dividers, change the "#workskin .hr" background URL to your new one.
All you need to do is copy and paste the coding below into a new work skin.
I left explanations in so you can easily take specific components if you only want to use certain ones, but when you hit save in the work skin editor it automatically strips any text comments for you, so you don't need to delete anything if you do want to use the whole thing. Just copy, paste, save.
Here is the code:
/* Colors and Font Styling: */
#workskin {
font-family: "Garamond", "Caslon", "Crimson Text", "Book Antiqua", "Georgia", serif;
font-weight: 400;
font-style: normal;
color: #000;
background-color: #fff;
padding: 1.5em 2em;
}
#workskin blockquote {
font-style: italic;
font-family: "Garamond", "Caslon", "Crimson Text", "Book Antiqua", "Georgia", serif;
font-weight: 400;
text-transform: lowercase;
}
#workskin .preface h3 {
font-size: 1.1em;
text-transform: lowercase;
}
#workskin .preface h3.title {
font-size: 1.4em;
line-height: 1.5;
text-transform: lowercase;
}
/* Chapter Body Styling: */
#workskin div.userstuff {
font-size: 1.3em;
line-height: 1.85em;
max-width: 660px;
margin: 0 auto 2.5em;
}
#workskin div.userstuff p {
margin: 0 0 0.4em;
}
#workskin div.userstuff h1 {
font-size: 1.5em;
font-weight: bold;
text-align: center;
margin: 2em 0 1.2em;
}
#workskin div.userstuff h2 {
font-size: 1.25em;
font-weight: normal;
text-align: center;
margin: 1.8em 0 1em;
}
#workskin div.userstuff h3 {
font-size: 1.1em;
font-weight: normal;
font-style: italic;
text-align: center;
margin: 1.5em 0 0.8em;
letter-spacing: 0.04em;
}
#workskin div.userstuff h4 {
font-size: 1em;
font-weight: normal;
text-align: center;
text-transform: uppercase;
letter-spacing: 0.1em;
margin: 1.5em 0 0.8em;
}
#workskin div.userstuff blockquote {
margin: 1em 2.5em;
font-style: italic;
}
/* Divider Styling: */
#workskin .hr {
display: block;
width: 100%;
max-width: 1250px;
height: 100px;
background: url(https://i.imgur.com/L3AoBn6.png);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
border: 0;
margin: 0.5em auto;
}
#workskin .chapterdiv {
background: url(https://i.imgur.com/c6DM5Lr.png);
height: 130px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
border: 0;
width: 100%;
}
#workskin .chapterend {
background: url(https://i.imgur.com/c6DM5Lr.png);
height: 130px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
border: 0;
width: 100%;
transform: rotateY(180deg);
}