WordPress.org

Ready to get started?Download WordPress

Forums

Picture next to post title (13 posts)

  1. vegetarianepicurean
    Member
    Posted 11 months ago #

    Hi -

    I'm interested in having my blog logo next to each post title (similar to these blogs: http://www.thefauxmartha.com/ and http://localmilkblog.com/) .

    Is there a way I could do that? I'm using pagelines pro as my theme. Here is my current site in progress (I'm moving over from wordpress.com): http://biz141.inmotionhosting.com/~vegeta9/test/

    Thanks so much!

  2. CrouchingBruin
    Member
    Posted 11 months ago #

    It can be done a number of different ways, depending upon your skill level and/or experience:

    • Create a Child Theme. You'll probably need to clone the single.php and index.php files and modify them.
    • Use Javascript to insert an image before every post title when the document finishes loading.
    • Use CSS to set the background image of the post-header section, the post-title-section section, the post-title div, or the entry-title h2, and then set the padding-left to move the post title text over.

    Alternatively, you can look for a theme that has that feature built-in, or easily modified to implement that feature (may be hard to find, but I know of at least one theme in which it would be relatively easy to implement), but I'm guessing since you've paid for a Pro version of a particular theme, you're going to want to stick with it. You may see if there's a support forum for your theme where you can post questions about what you need.

  3. vegetarianepicurean
    Member
    Posted 11 months ago #

    All sound great - but my skill level is such that I might need a little more guidance...

    I tried using javascript and I'm not sure if I had the wrong image link or what, but just a little image file showed up next to the title link.

    Which one is easiest and can you give me a little guidance?

    Thanks!!

  4. WPyogi
    Volunteer Moderator
    Posted 11 months ago #

    If you're using a commercial theme, you need to ask the developers of the theme - we don't have access to commercial themes - one reason they aren't supported on these forums.

  5. CrouchingBruin
    Member
    Posted 11 months ago #

    It looks like you were able to do it using CSS; congratulations, it looks like you're skill level is good enough!

    One suggestion, though: your images are, IMO, unnecessarily large, which is causing your page to load very slowly. You might want to consider resizing your pictures, to something like 1024x768. That should be big enough.

  6. vegetarianepicurean
    Member
    Posted 11 months ago #

    Yes! I figured it out using CSS. But now I'm wondering if I can move it so it is on both the grey and white...

    And I'm trying to figure out how to remove the feature images (without doing it in each post). Can I do that in CSS?

  7. CrouchingBruin
    Member
    Posted 11 months ago #

    But now I'm wondering if I can move it so it is on both the grey and white...

    Hmm, I don't see any gray, only white...

    And I'm trying to figure out how to remove the feature images (without doing it in each post). Can I do that in CSS?

    Do you mean that big picture at the top of each post entry? Yes. If you learn to use a browser extension like Firebug, you can see what classes to target with your CSS. In this case, if you add the following CSS rule, that will hide the images, but that won't prevent the images from still being loaded (i.e., you won't be decreasing the load time). The reason why they are still loaded is so they can be displayed if the CSS rule changes dynamically.

    .full_img {
       display: none;
    }
  8. vegetarianepicurean
    Member
    Posted 11 months ago #

    Thanks!

    On mine, there is a grey linen background/border behind the white box that has the content. I'm wondering whether the image can float over onto the background.

  9. vegetarianepicurean
    Member
    Posted 11 months ago #

    And well I'm at it, Can I move part of my meta bar (the author, comments, tags) to the bottom, while leaving the date at the top?

  10. CrouchingBruin
    Member
    Posted 11 months ago #

    OK, now I see it. I guess my browser window must have been too narrow to see the background.

    Yes, you can float the image halfway over by adding a margin-left rule with a negative value to your existing .post-header selector:

    .post-header {
       /* Your existing rules for background & padding*/
       margin-left: -38px;  /* Puts image halfway over onto background */
    }

    The problem is that once the browser window gets to be a width that's narrower than the content section, the image gets cut off. You can fix that by adding a media query section that resets the margin-left value if the screen width is less than 1098px (which is the max-width of your content area):

    @media only screen and (max-width: 1098px) {
       .post-header {
          margin-left: auto;
       }
    }

    You can adjust the max-width value in the media query above.

  11. vegetarianepicurean
    Member
    Posted 11 months ago #

    You are awesome. I'm not sure if I can test if the last part is working, but it is definitely half way in between on my screen!

    Can I change the post header font size as well using CSS too?

  12. vegetarianepicurean
    Member
    Posted 11 months ago #

    Also, is it possible to put my post date on top of the image or am I getting too fancy?

    Thank you

  13. CrouchingBruin
    Member
    Posted 11 months ago #

    I'm not sure if I can test if the last part is working, but it is definitely half way in between on my screen!

    You can test it by making your browser window narrower, or looking at the page on a mobile device with a smaller screen. It seems to adjust well, though, on my browser window.

    Can I change the post header font size as well using CSS too?

    .hentry .entry-title {
       font-size: 30px;
    }

    Also, is it possible to put my post date on top of the image or am I getting too fancy?

    Almost anything is possible, especially if you use JQuery/JavaScript. Your code would have to extract the time element HTML from the metabar-pad DIV, use it to create a new DIV, and insert it above the post-header section. Can't really do it using CSS.

Reply

You must log in to post.

About this Topic