How to Add Separator Lines Between Posts in Blogger's Mr. Moto Template

I use the Mr. Moto template (one of the included templates for Blogger) for Better Tech Examples. The only problem I had with the template is I feel there is a lack of separation between posts, especially those of the same date.

After a lot of Googling and some trial-and-error, I was able to add a dotted divider between posts by going to Layout > Edit HTML > Download Full Template (for backup of the template) > and then I modified the CSS to read this way for the applicable classes:

h2.date-header {
color: $dateHeaderColor;
padding:13px 0 13px 0; <--- added
}

.post-footer {
font-style: italic;
border-bottom:1px dotted #9D9D8C; <--- added
padding:13px 0 13px 0; <--- added
}

3 comments:

  1. Thank's! That was just what I was looking for. Only found to add a image as a separator, but I wanted a simple line!

    ReplyDelete
  2. oh, instead of dotted... how can I get it striped? like this -------- ?

    ReplyDelete
  3. haha, never mind ^^ I already found it! it's called 'dashed' :) x

    ReplyDelete

Note: Only a member of this blog may post a comment.