Actions

Work Header

Rating:
Archive Warning:
Category:
Fandom:
Additional Tags:
Language:
English
Series:
Part 9 of AO3 Work Skins/Tutorials
Collections:
Fanfiction Reference Works, A Guide to Coding and Fanworks, HTML & CSS stuffs, The Witch's Brew, Useful CSS code, AO3 Useful Work Skins, Lyra's collection for bookmarks for ao3 references
Stats:
Published:
2016-01-30
Words:
2,156
Chapters:
1/1
Comments:
92
Kudos:
1,400
Bookmarks:
912
Hits:
60,719

How to Make Customized Page Dividers

Summary:

Bored with the default page dividers? This is a tutorial/live example on how customize your page dividers with no images needed (though I do show you how you could use images if you wanted to do such a thing).

Notes:

(See the end of the work for other works inspired by this one.)

Work Text:

So, here's your average Horizontal Rule (<hr>) divider on AO3:

While I think it's kind of cute and simple, I realize it might not be for everyone, so here's how to customize your own using a workskin and CSS.

First, go to "My Work Skins". If you're not currently using a work skin for your piece, hit the button on the top right that says "Create Work Skin". If you are using a work skin already, you must add the following code to that skin's CSS box, since you can't implement more than one skin for a work at a time.

Put anything you want in the "Title" box, and in the "CSS" box put the following code:

#workskin .hr {
 !--nothing here yet!
}

Now, this is going to be a little different than my other tutorials, because first I'm going to try to break it down section by section so you can customize your own, and then I'll show you some pre-fabricated ones you can pop right into your work.

WIDTH
This is a complaint I saw before, that the HR isn't wide enough for the screen. So to affect the width of the divider, you would add width: percentagehere% to your workskin. For example:

#workskin .hr {
  width: 100%;
}

Would create:

While as:

#workskin .hr {
  width: 75%;
}

Would be not as wide, but still wider than the default:

The reason I use percentage here over say width: 100px is because by doing a percentage, the width of the divider will fit the window no matter what size it is, thus preventing unnecessary horizontal scrolling for those with smaller browser windows.

COLOR
So you want to add color to your dividers, you would use color: #hexcodenumber. For example, if we use: 

#workskin .hr {
  color: #E75768;
}

We get the following colored divider:

If you want some suggestions on color suggestions and the HEX codes you need, I would definitely recommend COLOURlovers.

WIDTH
This is for those who might want a little thicker line which can be achieved using border-width. For example: 

#workskin .hr {
  border-width: 2px;
}

Would produce a slightly thicker line:

While as:

#workskin .hr {
  border-width: 5px;
}

Would produce something much more chunky:

I use px over percentage here because it's much easier to finetune how thick the line is supposed to be displayed.

STYLE
But just a simple solid line can be boring, so we can change it up using border-style. Here are some of the basics:

Dotted 

#workskin .hr {
  border-style: dotted;
}

Which creates:

Dashed 

#workskin .hr {
  border-style: dashed;
}

Which creates:

Double
Technically, AO3 is not allowing this by using border-style, but we can use border-top instead.

#workskin .hr {
  border-top: double;
}

Produces something that looks like a thin line on top of a thick bottom line:

But we can add border-bottom: none as well:

#workskin .hr {
  border-top: double;
  border-bottom: none;
}

To get two, thin lines:

By using border-top and border-bottom, we can even combine styles. For example, if we used:

#workskin .hr {
border-top: 2px dotted;
border-bottom: 4px solid;
}

We get the following snazzy little divider:

One last thing we can add to play around with the style of the divider is using height: #px to give us sort of a boxy-looking divider. In this example, if we use: 

#workskin .hr {
  height: 10px;
}

Then we get the following:

We can even color the white inside the box by using background-color: #hexcodenumber:

#workskin .hr {
  height: 10px;
background-color: #45D8BB;
}

Then we get the following:

So it's definitely something you can play around with to get new styles.

IMAGES
"But wait!" You might be saying. "I could just input my image straight into the story as a divider without using a workskin!" And while that is true, which would be easier to type over and over in a story? This

<center><img src="image url here"></center>

OR:

<hr class="hr">

Plus, by using a workskin, you could repeat the image as your divider. For example, say we wanted the following image as our divider (with it's height at 42px):

If we just wanted it to show up once, we would use the following CSS:

#workskin .hr {
  height: 42px;
  background: url(http://i.imgur.com/OuXCKRD.png);
  background-repeat: no-repeat;
  background-position: center;
  border: 0;
}

Which would look like something like this:

I know, it seems awfully convoluted to have so much coding for something that could be achieved other ways. Which is why I recommend only using this as part of your skin when you want your divider image to repeat itself. For example:

#workskin .hr {
  height: 42px;
  background: url(http://i.imgur.com/OuXCKRD.png);
  background-repeat: repeat-x;
  border: 0;
}

Which creates this:

While this is a cool effect, it's probably not the best image to use for this. This is best (in my opinion) with a background image/pattern that can be repeated horizontally. Here's a few examples:

(Image Credit: 77words)

(Image Credit: Everyday icons)

(Image Credit: Everyday icons)

Notice how I have these at different heights and widths, regardless of the original image's dimensions. I just wanted to show that you didn't have to use the whole image for it to be a cute divider.

PLACEMENT
If for some reason, you didn't want the divider centered, you can change that. For example: 

#workskin .hr {
  margin-left: 0;
  text-align: left;
}

Causes the divider to move to the left:

While the following CSS:

#workskin .hr {
  margin-right: 0;
  text-align: right;
}

Causes it to move to the right:

Once you've customized your divider to your liking, hit "Submit" (or "Update" if adding to a previous work skin), and you've created the work skin for customized dividers. Now to implement them.

Go to your the work you want the divider, and before you even get to the "Work Text" box, look above it for a box labeled "Associations". In that box should be an option called "Select Work Skin" with a drop-down box by it; make sure your work skin is currently selected.

Now, go to your "Work Text", make sure the "HTML" button is selected over the "Rich Text", and whenever you want your divider, you put the following:

<hr class="hr">

And that's it!

Here's a couple of pre-fabricated dividers I made, just to give you an idea of what you can do when you combine things. Feel free to change around to your liking! The following are all without using any sort of images.

#workskin .hr {
  border-top: 15px dotted #1fa0f2;
  border-bottom: none;
  border-right: none;
  border-left: none;
}
#workskin .hr {
  border-top: 10px dashed #ff00ba;
  border-bottom: none;
  border-right: none;
  border-left: none;
}
#workskin .hr {
  border-top: dotted #bb78e1;
  border-bottom: dotted #472d56;
  border-right: none;
  border-left: none;
}
/* Notice how the height is 3 times that of the other two borders. This needs to be the case so the middle bar shows up equal to the others. So if your border-top and border-bottom go to 10px each, your height needs to be 30px, etc. */
#workskin .hr {
  border-top: 5px solid #f1ebe9;
  border-bottom: 5px solid #c68d84;
  height: 15px;
border-right: none;
  border-left: none;
  background-color: #ffccff;
width: 75%;
}
/* By having lighter colors on the top and left borders and darker colors on right and bottom borders, you can create a 3D effect. */
#workskin .hr {
  border-top: 10px solid #90F0A8;
  border-bottom: 10px solid #78C090;
  height: 30px;
  border-right: 10px solid #180507;
  border-left: 10px solid #C0F0C0;
  background-color: #78D890;
  width: 5%;
}

The following examples have a little bit more complicated code than what I've explained above, but as long as you just edit the basics and leave the rest of the code alone, they should be easy to modify.

/* We can have a gradient effect by putting the lighter color (#f5d5d8) as the first and third in the list under linear-gradient, and the darker color (#61040a) as second so it's in the middle  */
#workskin .hr {
  border: 0;
  height: 1px;
  width: 75%;
  background-image: linear-gradient(to right, #f5d5d8, #61040a, #f5d5d8);
}
/* You can add as much or as little colors as you want to the gradient  */
#workskin .hr {
  border: 0;
  height: 2px;
  background-image: linear-gradient(to right, #ff0000, #ff6600, #ffff00, #00ff00, #0066ff, #0000ff, #6600ff);
  width: 100%;
} 
/* You can have a line with a drop shadow  */
#workskin .hr {
  height: 10px;
  border: 0;
  border-top: 1px solid #84260d;
  box-shadow: inset 0 10px 10px -10px #C65537;
}
/* Or get rid of the line and add a background-color to get an ombre effect.  */
#workskin .hr {
  height: 25px;
  width: 25%;
  border: 0;
  background-color: #f8f6e1;
  box-shadow: inset 0 25px 25px -25px #5ea171;
} 
/* Make sure if you change the colors for this flared edges, you change both cases of border-color to the color you want.  */
#workskin .hr {
  height: 30px;
  border-style: solid;
  border-width: 1px 0 0 0;
  border-radius: 20px;
  border-color: #D0A5AF;
  width: 45%;
}

#workskin .hr:before {
  display: block;
  content: "";
  height: 30px;
  margin-top: -31px;
  border-style: solid;
  border-width: 0 0 1px 0;
  border-radius: 20px;
  border-color: #D0A5AF;
}
#workskin .hr {
  border-top: 1px dashed #d7d8d8;
  border-left: none;
  border-right: none;
  border-bottom: none;
  width: 80%;
}

#workskin .hr:after {
  content: '✁';
  display: inline-block;
  position: relative;
  top: -19px;
  left: 40px;
  padding: 0 3px;
  color: #779193;
  font-size: 25px;
/* You can change the skull in the content section to any ASCII/Unicode character */
#workskin .hr {
  padding: 0;
  border: none;
  border-top: medium double #E3E3E1;
  color: #675757;
  text-align: center;
}

#workskin .hr:after {
  content: "☠";
  display: inline-block;
  position: relative;
  font-size: 25px;
  padding: 0 10px;
  top: -0.7em;
  background: white;
}

/* You don't even have to have borders; you can just use symbols in the content to make a divider. However, try to not use too many, because they won't scale well with the page */
#workskin .hr {
  padding: 0;
  border: none;
  text-align: center;
  color: #FFDD83;
}

#workskin .hr:after {
  content: "★☆★☆★☆★";
  display: inline-block;
  position: relative;
  top: -0.7em;
  font-size: 30px;
}

Somewhere Outside the 3rd Quadrant, February 1st, 300X (turn creator's style back on?) 

/* You can even use this kind of coding to designate POV changes, Calendar dates, settings, etc.  */
#workskin .hr {
  padding: 0;
  border: none;
  border-top: 1px solid;
  text-align: center;
  width: 95%;
}

/* I added font-variant: small-caps; because I thought it looked good for the heading, but you can modify the text with usual CSS to get the text look you like. */
#workskin .hr:after {
  content: "Somewhere Outside the 3rd Quadrant, February 1st, 300X";
  display: inline-block;
  position: relative;
  top: -0.75em;
  font-size: 1em;
  padding: 0 10px;
  background: white;
  font-variant: small-caps;
}

/* Since this coding won't show if the creator's style is turned off or if the work has been downloaded, this code allows you to hide another copy of your divider text that will only show up when the creator's style is not accessible */
#workskin .hide {
  display: none;
}

In your Work Text for this, you would have something like the following:

<hr class="hr" />

<span class="hide">

<i>Somewhere Outside the 3rd Quadrant, February 1st, 300X<i>

</span>

To see an example in real time, hide the creator's style.

Honestly, there's so many combinations you can come up with, I'm not going to create them all here. But if there's a certain combo you're interested that you can't seem to get to work, please leave a comment on this work and I'll try my best to help?

NOTES

So this won't work offline? Unfortunately, it seems this coding will only work on the AO3 site itself and if the creator's style is turned on.

How do I put this in my work? Go to your the work you want the dividers, and before you even get to the "Work Text" box, look above it for a box labeled "Associations". In that box should be an option called "Select Work Skin" with a drop-down box by it; make sure your work skin is currently selected. Now, go to your "Work Text", make sure the "HTML" button is selected over the "Rich Text", and for your divider, you would put either just <hr> if you stuck with the #workskin .hr code labeling, or you would use <hr class="dividername"> if you went something like #workskin .dividername in your coding. (Changing it to something like dividername or whatever means you can have your divider only be customized some of the time, or if you want multiple dividers--see below)

What if I want more than one type of divider? Then I suggest you label your dividers like something along the lines of hr, hr1, hr2, etc., just like I did. (I got all the way up to hr33) and then use <hr class="hr1">, <hr class="hr2">, etc. in your work's Work Text.

What if I want a different type of divider without using a workskin? For that, I would direct you to Chapter 2 of josephina_x's wonderful HTML guide, where there's options for those who don't want to resort to using a workskin. EDIT 3/20/16: Or there's also this awesome tutorial on writing section breaks with no coding required. It was geared towards fanfiction.net users, but it should work for AO3 as well.

If you liked this, please leave a comment or at least a kudos? As always, if you have any questions or concerns, you can leave a comment here or send me a message at my AO3 skin tumblr, To Skin a Fic.

Series this work belongs to:

Works inspired by this one: