WordPress.org

Ready to get started?Download WordPress

Forums

WP-Andreas09 - image in post titles / post (12 posts)

  1. tpsr
    Member
    Posted 7 years ago #

    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 -
    http://podcast.tpsradio.net

    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)

  2. KatGirl
    Member
    Posted 7 years ago #

    A link to your current working site would be helpful.

  3. tpsr
    Member
    Posted 7 years ago #

    The link should work - http://podcast.tpsradio.net

    If that doesn't work give this a try - http://www.tpsradio.net/podcast/index.php

    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.

  4. KatGirl
    Member
    Posted 7 years ago #

    An example of our old theme is here -
    http://podcast.tpsradio.net

    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.

  5. KatGirl
    Member
    Posted 7 years ago #

    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 {
    margin-left:30px;
    }

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

  6. tpsr
    Member
    Posted 7 years ago #

    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 :)

  7. KatGirl
    Member
    Posted 7 years ago #

    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;
    padding-right:30px;
    margin:0;
    }

    .post h2 a {
    margin:0;
    padding-left:10px;
    color:black;
    background:white;
    }

    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.

  8. tpsr
    Member
    Posted 7 years ago #

    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!

  9. KatGirl
    Member
    Posted 7 years ago #

    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 {
    margin-left:70px;
    }
    .post {
    margin-top:30px;
    }

    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.

  10. tpsr
    Member
    Posted 7 years ago #

    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?

  11. KatGirl
    Member
    Posted 7 years ago #

    try:

    .post .entry {
    margin-left:15px;
    margin-top:40px;
    }

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

  12. tpsr
    Member
    Posted 7 years ago #

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

Topic Closed

This topic has been closed to new replies.

About this Topic