Adding a Post Divider between Posts in Blog Index Page
I intended to add an image divider between the posts in the blog index page since the current horizontal line looked quite boring. It’s not difficult to figure out where to add in the CSS code but I was not sure which CSS selector should I use.
Luckily, with the help of Headway Premium Wordpress Theme administrator at the membership forum, I was able to obtain the code as below to be added inside the custom.css file.
However,this code made the image divider to appear at the bottom on the single post page as well. Fortunately, after adding a “blog” to the first line, it seemed to be able to limit the image divider just to the blog index page.
Now, there is another problem. The spacing between the comment and image divider was too close to each other. After a few tries and advices from the administrator, finally got the following code to work.
If you would like to add an image divider to your blog, you can copy the above CSS code into your custom.css file and just replace the URL with the URL of your image. This file can be accessed from your Wordpress dashboard under “Appearance” then “Editor”. The custom.css file is located at the bottom on the right hand panel. Remember to click on the "Update File" to save the changes.
Luckily, with the help of Headway Premium Wordpress Theme administrator at the membership forum, I was able to obtain the code as below to be added inside the custom.css file.
/* Post Divider */
body.custom div.post {
background: transparent url(URLOfImage/nameOfImage.jpg);
border: none;
background-repeat: no-repeat;
background-position: bottom center;
}
/* End of Post Divider */
However,this code made the image divider to appear at the bottom on the single post page as well. Fortunately, after adding a “blog” to the first line, it seemed to be able to limit the image divider just to the blog index page.
/* Post Divider */
body.custom.blog div.post {
background: transparent url(URLOfImage/nameOfImage.jpg);
border: none;
background-repeat: no-repeat;
background-position: bottom center;
}
/* End of Post Divider */Now, there is another problem. The spacing between the comment and image divider was too close to each other. After a few tries and advices from the administrator, finally got the following code to work.
/* To Add Space between the comment and divider */
body.custom.blog div.meta-below-content {
padding-bottom:20px;
}
/* End of To Add Space between the comment and divider */
/* Post Divider */
body.custom.blog div.post {
background: transparent url(URLOfImage/nameOfImage.jpg);
border: none;
background-repeat: no-repeat;
background-position: bottom center;
}
/* End of Post Divider */If you would like to add an image divider to your blog, you can copy the above CSS code into your custom.css file and just replace the URL with the URL of your image. This file can be accessed from your Wordpress dashboard under “Appearance” then “Editor”. The custom.css file is located at the bottom on the right hand panel. Remember to click on the "Update File" to save the changes.
Comments
Post a Comment