How To: Dotted Line Under Sidebar/Post Titles

I've seen a few blogs where they have lines under their sidebar gadget titles (Followers, Blog Archive etc) and post titles, and I've always wondered how to do it. After endless searching, I finally figured out it out! I think it looks super sleek, and divides the page up nicely to make it look neat. Here's how you do it, and how to customize it too!

Go to Template > Customize > Advanced > Add CSS

For a line under all your sidebar titles, copy and paste this code: 




aside .sidebar h2.title, .sidebar h2 {

border-bottom: 1px dotted grey;

margin: 0px;

padding-bottom: 0px;

padding-top: 0px;

font-size: 12px;

text-transform: lowercase !important;

font-family: 'times new roman' !important;

}

To under line your post titles, copy and paste this code:

h3.post-title {

border-bottom: 1px dotted grey;

margin: 0px;

padding-bottom: 2px;

padding-top: 0px;

font-size: 12px;

text-transform: uppercase !important;

font-family: 'times new roman' !important;

}

Now for the customization! You'll notice that I've entered my own preferences in these codes, but here's how to change them. 

border-bottom: 1px dotted grey;

This line of code is for the actual line, you can change the 1px to a higher number if you want the line to be thicker. You can also choose for the line to be: 'dashed', 'solid', 'double.' For the colour of the line, you can replace grey with your chosen colour (blue, black, red) or if you want a very specific colour, it's best to use a html colour number (read about that here). For example, if you wanted a 2px thick dashed pastel pink line, you'd type: 2px dashed #FF9999

margin: 0px;

This basically means how long you want your line to be. If you want it to be shorter, enter a bigger number (e.g. 10px) or if you want a longer line, enter a negative number. The default width (0px) of your line will be the width of your blog or sidebar. 

padding-bottom: 2px;

Padding-bottom is the amount of space between the text and the line. If you want them to be close together, enter 0px, or if you want a bigger space between them, enter a bigger number

padding-top: 0px;

Padding top is the amount of space above the line and title. So if you want a space above the titles, add a bigger number. If you want less space, type a minus number. 

font-size: 12px;

This is the size of your font of the gadget/post title (above the line.) You can either totally remove this if you want your font to be what you've customized it to be already, or make the number bigger or smaller to alter the size. 

text-transform: uppercase !important;

This line is for the title text. You can either add 'uppercase', 'lowercase' or simply remove it if you want the text to be normal. 

font-family: 'times new roman' !important;

If you want a different font family for the text, simply add the name of the font within the quote marks (this won't work with downloaded fonts.) 

Let me know if you have any troubles with this, I'll come to the rescue!