wpvidZ

Learn WordPress With Video Tutorials

  • Blog
  • Browse
    • Backup & Restore
    • WordPress Localhost
    • WordPress Hosting
    • WordPress themes
    • Version Updates
    • Plugin Tips
    • Security
    • Tutorials
    • WordPress SEO
    • WP Miscellaneous
    • Sitemap
  • WP 5+ Tutorial
  • Search
wpvidZ Blog Tutorials Adding Border/Lines Between WordPress Posts

Tutorials

Adding Border/Lines Between WordPress Posts

Last updated on February 18, 2017
Posted on August 24, 2010

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;}

  • Is my site loading fast? I use this shared hosting
  • Try my theme >

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:

add line posts twentyten Wordpress

Latest Posts

  • Twenty Nineteen Theme Full Tutorial – Creating a Website
  • Uninstall W3 Total Cache Plugin – Incredibly Easy!
  • Create WordPress Website 2018 on SiteGround Genesis
  • WordPress Noopener Noreferrer Rel Attribute Quick Fix
  • WordPress CDN Setup with MaxCDN and W3 Total Cache Plugin
  • Twenty Seventeen One Page Parallax Scrolling Website Style
  • How To Add Google Map in WordPress Contact Page
  • WordPress 4.7 Justify Text and Underline
  • Twenty Seventeen Footer “Proudly Powered By WordPress” Text
  • How To Add YouTube Subscribe Button To WordPress Website
← WordPress 3- Changing “Leave A Reply”
→ WordPress Upgrade 2.7+ to 3.0.1 Tutorial

Comments

  1. Kamal Hasa says

    September 9, 2010 at 1:24 pm

    Thank you 😉

    I wanted this one for my twentyten theme 🙂

    • Kimi says

      September 9, 2010 at 5:18 pm

      You’re very welcome, using twenty ten is certainly giving us benefit.

      Thank you for commenting

  2. Luc says

    September 29, 2010 at 7:20 pm

    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!

    • Kimi says

      September 29, 2010 at 11:58 pm

      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!

  3. Richard Chidike | Africanary says

    March 20, 2011 at 1:37 am

    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.

  4. Dorenda says

    April 19, 2011 at 6:54 pm

    I just added this code to my site and it worked like a charm. Thank you so much! I love your site.

  5. Oda says

    June 7, 2011 at 9:20 pm

    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?

  6. Denzil says

    August 31, 2011 at 9:07 pm

    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?

Comment form on this post is closed after 60 days.

Search

Worth Reading

  • WordPress CDN setupWordPress CDN Setup with MaxCDN and W3 Total Cache Plugin
  • WordPress Google maps in contact pageHow To Add Google Map in WordPress Contact Page
  • The configuration of YouTube Subscribe button in Google Developers web pageHow To Add YouTube Subscribe Button To WordPress Website
  • Adding Social Media Links to WordPress Menu With CSS Classes
  • Unable to create directory wp-content/uploads in WordPress
  • Forward Twitter to Facebook Using App and Feedburner Tutorial
  • Kitchen Sink WordPress - Seem Simple But Important
  • Admin Pointers, Drag and Drop WordPress 3.3 Media Upload Features
  • How to sell ebook in a wordpress blog?
  • Check your site's performance using Google labs Page Speed

Backup & Restore

Backup WordPress Without a Plugin or FTP

Export WordPress Database using phpMyAdmin

BigDump Alternative – When BigDump Failed Importing Large WP Database

At This Place The Current Query Includes More Than 300 Dump Lines

View All..

Live Online Website

View All..

Offline Installation

How to Upload WordPress localhost to live server manually

Steps to Install WordPress on Windows 8 and WAMP 2.4

Install WordPress on Mavericks OS X 2014

Maximum upload file size in WAMP WordPress

View All..


WPvidz Hosting Image

  • About Me
  • Contact
  • Affiliate Disclosure
  • Privacy Policy
  • Term of Use

Copyright© 2023 wpvidz.com SG2021 | sitemap.xml


WPvidz.com is independent from WordPress.org but is proudly powered by WordPress & its block-based editor (Gutenberg)

WpvidZ.com uses cookies" to give you the best browsing experience possible. If you click "I Accept" below then you are consenting to this. For more information about your privacy settings on this website, please visit the Privacy Policy page. I Accept