Sunday, February 16, 2014

Adding Dotted Line Under Post Title

I was just playing around, and decided I wanted a dotted line underneath my post title. I'm always changing things up. I like to, and besides, where would I get ideas to give you?

So here's what you do: Customization>Advanced>CSS

In the CSS box, here's what I put for the dotted line you see under my post title. You can change the pixel size and the color. (Don't you just love that handy-dandy little CSS box???)

post-title
{
border-bottom:3px dotted #666666;
}

Save.

That's it!

Well, not quite. I tried to do the same thing on my Cozy Little House blog. I wanted to add a dashed red border underneath the post title. It wouldn't work in CSS. 

So, I went into html and found this:

h3.post-title, .comments h4 {
font: $(post.title.font);
margin: .75em 0 0;
text-align: center;

And I added the line below to the bottom of what is highlighted in yellow. And it worked! Remember to close the bracket, which is below it.
 
border-bottom:2px dashed #CE0000;
}

Enter your email address:


Delivered by FeedBurner
Follow on Bloglovin
follow us in feedly

4 comments:

  1. Again you have inspired me. I wanted 7 across at the top of a blog and so changed the number in the html from 5 to 7 for the number of posts to show and at the bottom in the summary changed the 5 to a 7. It worked (did this in my brothers blog IslandRustic). Made me happy. It only worked when I changed the bottom number in the summary.
    Joy

    ReplyDelete
  2. blogsaver!! this is awesome. i just applied to my blog :)

    ReplyDelete
  3. is there a way you can add a dotted line but not red?

    ReplyDelete
  4. How do I make it shorter? I don't want it to be the full width of the post just under the title.

    ReplyDelete