Support » Themes and Templates » WP-Andreas09 – image in post titles / post

  • I really love this theme, and am looking to change our current theme to WP-Andreas09. However I want to keep the small image that is posted in all our post titles. An example of our old theme is here –

    I’ve got the image to show in WP-Andreas09, however the post titles overlap and cover the image.
    Is it possible to have the titles indent a little, with the image to the left of each post title? (like shown in the link above)

Viewing 11 replies - 1 through 11 (of 11 total)
  • A link to your current working site would be helpful.

    The link should work –

    If that doesn’t work give this a try –

    I’ve also changed the page to show the issue I’m having with the funky image in the title posts so you can see what’s going on.

    An example of our old theme is here –

    I had a look at the example old theme, what I meant was a link to your problematic theme.

    But you’ve since changed the index to accommodate this. I’ll have a look and see what I can do.

    You can try:

    .post {
    margin:0px 0 20px 0;
    padding:10px 5px 10px 50px;
    background:url(images/cup4.jpg) no-repeat top left;

    It was difficult to check because your cup image disappeared when I tried to edit your css on-line. But play with the margins.

    If this doesn’t work, I suggest using this:

    .post h2 {

    But if you indent your header, you may need to adjust your date-time class to also align properly.

    Would it be better to post the image in a different fashion? I’m hardly a coder, so I’m sure I chose the most difficult way of doing it 🙂

    Without really playing around with your site and coding, try the above first, play with margins and padding, and if that doesn’t work, post back and we’ll see what we can do.

    One thing to note, though. When you insert an image inside an element (ie: h2) that also holds a hyperlink, its better to separate the two for aligning purposes.

    Have the image designated to the h2 element and code accordingly for your h2 a hyperlink elements.

    .post h2 {
    background:url(image/cup)no-repeat top left;

    .post h2 a {

    that type of thing, or something to that effect. I daresay there’ll be other people within this forum who are more web savvy than I.

    the above post worked great!
    I am however having trouble moving over the author/date/time section below the title.
    I will also need to move the main body of the post down a smidge so that it doesn’t cover the image as well.

    thanks so much for your help in this! I’ve been spinning my wheels for the past few days, until now!

    This is extreme, but it works.
    I noticed you inserted: .post h2 {margin-left:70px}

    So, use the same theory for your date and post entries.

    .post .date {margin-left:70px;}
    .post .entry {
    .post {

    But note, again, that when you indent to the left, which 70px is a large indent, you’ll have white space between your post entries and your sidebar. Maybe decrease the .post .entry margin just a tad so that it doesn’t display so much white space.

    Thanks! the indent works well. I moved the post text back, it may just be easier to make the image a little smaller. Ideally I’d like to have the post text move down a little. So I’m going to try and play with that. Any suggestions?


    .post .entry {

    I just added to your new additions via Fire Fox Web Developer tools. 🙂

    KatGirl, you are AWESOME!
    You don’t know how frustrated I’ve been over this! Thank you so much!

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘WP-Andreas09 – image in post titles / post’ is closed to new replies.