ThemeShaper Forums » Thematic

[closed]

Adding images next to postfooter elements

(5 posts)
  • Started 2 years ago by simonafilote
  • Latest reply from simonafilote
  • This topic is resolved
  1. I've just started with WP and I'm a complete dummy with CSS and PHP but yet I'm keen to customise and style the blog theme as I wish...

    I've been searching for days for some solution to add a small speech bubble next to the comments count displayed in the postfooter of each post. Also, I'd like to add a graphic next to the other two elements displayed in the postfooter (post category and tags), something like it's being displayed on this blog: http://www.blago.net/baking/.

    My blog is crumbsofjoy.co.cc

    I would really appreciate your help with this.

    Simona

    Posted 2 years ago #
  2. why don't you take http://getfirebug.com or chrome's developer tools and examine what that site is doing? and then copy it? it is only a little CSS background image in conjunction with some left padding.

    Posted 2 years ago #
  3. Hi Helga

    Many thanks for your answer. In fact I had taken a look at the example site's CSS through Firebug, and what I found is the following:

    To add an image besides the tag links, I guess this is the code. I added it in my style.css and that created some space right before the tag-links in the postfooter where the small image should come, but the image itself doesn't appear...what am I missing? I double checked the image name to make sure it's right.

    #content .entry-utility .tag-links {
    background: url("../images/pencil6.png") no-repeat scroll 4px 1px #FFFFFF;
    padding: 0 8px 0 32px;
    }

    ---------
    To add the image before the comment count, I copy/pasted this code in the style.css but there is no effect at the frontend...not even some space as in the first case.

    #content .entry-utility .comment-link {
    background: url("../images/pencil1.png") no-repeat scroll 0 2px #FFFFFF;
    padding: 0 11px 0 18px;
    }

    What do you think?

    Simona

    Posted 2 years ago #
  4. simona,

    your code looks good, but make sure that the path to the file name is correct.

    if you've added this code to your theme's style.css and your images are in a folder called 'images' (in the root of your theme) then your path should actually be:

    background: url("images/pencil1.png") no-repeat scroll 0 2px #FFFFFF;

    the ../ means go UP one level from where you are (style.css) so no doubt it isn't finding the image folder. you can see that in firebug too usually as you'll get 404/not found errors.

    Posted 2 years ago #
  5. Hey, you were right, I removed the dots and it worked! Thanks for helping me out :)

    Posted 2 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.