How to add or display lines (border bottom) separator under the posts in your blog.
In today Twenty Ten theme tutorial we are going to add a few css code to display dotted border bottom between the post.
Twenty ten is so very nice theme and lots of wordpress users use it as their themes.
I actually like simple theme that i can modify here and there, but the easy modification only :D. And customizing Twenty Ten is a bit hard, but we will try abit.
If you use another theme, you can watch the video, and the method is similar.
Before and after image.
To display your post having the dotted line as in the image above, here are the steps:
1. Login to your dashboard.
As usual to access your dashboard, you can type: yourdomainaddress.com/wp-admin
2. Find “Appearance” and then “Editor”.
3. Search for “style.css”.
4. Add this line of code in the very bottom:
.entry-utility{border-bottom:1px dotted black; padding-bottom:13px;}
If you want “dashed” instead of “dotted”, you can replace “dotted” in the code, with “dashed” or even “solid”.
5. Update your file.
Refresh your blog for the end result, and it should have dotted border under your post. If it still doesn’t show up, try to clean your browser’s cache as well.
Video Tutorial:
{ 8 comments… read them below or add one }
Thank you ;)
I wanted this one for my twentyten theme :)
You’re very welcome, using twenty ten is certainly giving us benefit.
Thank you for commenting
Love your site.
is there a way to add a box around a post? or at least a border between the posts and the sidebar?
thanks!
Luc, yes, it is possible by applying a specific class and style in loop.php file, see :http://codex.wordpress.org/Template_Tags/post_class
I may be will make a video tutorial someday soon, feel free to subscribe if you like.
Thank you for the nice comment!
You have got some great piece of information in this post. I think i need read this over again as I can;t help but appreciate the information. Great work.
I just added this code to my site and it worked like a charm. Thank you so much! I love your site.
Hi! Thank you so much for this!! What if I wanted to have a solid line between my post-title and the post-content (I always have a picture first). 13px under the title and 13px above the content. Is that possible?
Great little trick to make my posts stand out. Twenty Ten can be a bit “white” and this helps to break up the starkness of the page. Any idea how to make the page off-white or a wash of a pale color?