Yesterday I cam across a blog I didn’t knew yet, which have the particularity of using a nice horizontal image to separate each post. Let’s see how to do it in your blog. That’s really easy, just read on!
To achieve this recipe, you first need an image: You can grab one from this website which provide some excellent separation images.
Once you have it, upload it to your wp-content/themes/yourthemes/images directory, open up your index.php file, find the loop and make sure that each post is embedded throught a <div class="post"> tag. This is the case on most themes.
Then, edit your style.css file. Find the following line:
.post {
And paste this code:
background: transparent url(images/yourimage.jpg) no-repeat bottom;
That's simple as that! Good weekend to all of you!
If you enjoyed this article, please consider sharing it!
Leave a Comment
- Neatothemesget 20% off every theme […]
- WordPress Defendersave $4 on your purchase […]
- Templaticsave 20% on your purchase […]
- Squeeze Themeget 25% off your order […]
- Canvas ThemeGet 25% off the Canvas theme […]
- WPShiftsave 10% on your order […]
- ModThemessave 15% off your purchase […]
- Zidalgo Themessave 20% on your order […]
- WooThemessave 20% on your purchase […]
- Autobloggedsave $40 on multi-site licence […]
On Twitter : Are you on DesignBump? If yes, I'll appreciate your support! Thanks a lot in advance :) http://bit.ly/dbkPHW
Theme & content : Copyright © 2008 - 2010 Jean-Baptiste Jung. Graphic art by GreenBubbles.org.ua, all right reserved.
12 Responses
I’ve been interested in doing something like this, but I can’t figure out how to get each of my posts surrounded by the correct div. What I get is the first post in a separate div and then all of the remaining posts in a second div. I want to enclose the post title, post metadata and excerpt for each post on the home page.
This is a really great idea. Thank you so much for blogging about it!
Interesting. This is a great way to spice up a blog.
thanks alot
i have a question
i want to creat a link box in top of my site
above the post area
i want to add great post in the net in that Box. can i do that with wordpress ?
Jean-Baptiste what’s going on with your recipes!
C’mon I’m sure you still have more nifty tricks up your sleeve
What was the website you found this on?
@Giancarlo: When a recipe is taken from a website, a link to the original article is always inclued.
Please,can anybody help me?
My style.css doesn’t have any .post {
Where could I put this?
Thanks.
Ishtar, if your styles.css does not have a .post, just add one. And then edit your theme’s single.php file to wrap the post content with a post class:
…post content…
Or alternatively, find out what class wraps the post and add the
background: transparent url(images/yourimage.jpg) no-repeat bottom;
code there.
Oops, my html tags got blasted. Let my try this again:
If your styles.css does not have a .post, just add one. And then edit your theme’s single.php file to wrap the post content with a post class:
<div class=post>
…post content…
</div>
Or alternatively, find out what class wraps the post and add the
background: transparent url(images/yourimage.jpg) no-repeat bottom;
code there.
I really suck at coding and find it a bit difficult to follow this simple guide. I can’t get this to work and here are my questions:
1. I have several index.php, which one should I choose? The one in my K2-theme folder?
2. Which style.css file should I edit? I only had the .post {-code in my Wordpress default folder.
3. Where exactly should i post “background: transparent url(images/yourimage.jpg) no-repeat bottom;”?
Thanks in advance!
Trackbacks: