Hiding featured image and blog post summaries

  • Unknown's avatar
    mjellefson · Member ·

    Hi! I’m sorry … I’ve been searching high and low and can’t find what I’m looking for. I’m trying to hide the featured image in the header of certain pages, but keep them on my static home page. I’ve looked at forums and they recommend editing the CSS. Do I have to have a premium account to edit the CSS? Is there another way?

    I’d also like my blog posts to only show a summary. I have that box checked in settings, but the summary only works on my home page and not on my blog post page. Any help would be MUCH appreciated.

    Thanks so much,
    Lauren

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    rachelmcr · Member ·

    Hi Lauren,

    You can add custom CSS with the Custom Design upgrade — you can purchase that upgrade separately, so you don’t need to get WordPress.com Premium unless you’re interested in the other upgrades included with that. There isn’t a way to customize how featured images appear in your theme without that custom design upgrade, so that’s the way to go for that.

    If you decide to go that route, we have tips for getting started with CSS here:

    You can also get CSS help from the expert staff and volunteers in the CSS Customization forum:

    https://en.forums.wordpress.com/forum/css-customization

    I’d also like my blog posts to only show a summary. I have that box checked in settings, but the summary only works on my home page and not on my blog post page.

    The summary setting in your reading settings is actually meant more for your blog’s RSS feed and the email notifications that go out to your blog’s subscribers than for how the posts appear on your blog itself. To show summaries or excerpts on your blog page, you can use the More Tag in your posts. Anything you write before the more tag will be shown on your blog page, and then visitors can click through to read the rest of the post.

    Please let me know if you have any questions about that. :)

  • Unknown's avatar
    mjellefson · Member ·

    Yay! Thank you! :)

    lfb

  • Unknown's avatar
    rachelmcr · Member ·

    You’re welcome! :)

  • Unknown's avatar
    mjellefson · Member ·

    Ok, I have one more follow up question. Now that I’m able to make the changes to the CSS, I’ve added this:

    .feature-img.page {
    display: none;
    }

    But it removes all headers and the spacing get’s screwed up (the page title becomes hidden under the menu bar). How do I remove the feature images from only the “Matt’s Story” page, the “Contribute” page and the “SUVIVEiT” page? And how do I fix the spacing issue?

    Thanks again!
    Lauren

  • Unknown's avatar
    rachelmcr · Member ·

    Hi Lauren,

    To target your CSS to specific pages, you’ll want to check the page ID. For example, when I look at your theme’s HTML and CSS using the approach mentioned on this page, I see that the “Matt’s Story” page has this page ID class (defined in the page’s body element in the HTML): page-id-2

    Here’s where I found that in my browser: https://cloudup.com/cBPh7zhJ_1O

    You can use that to narrow down your CSS for just that page:

    .page-id-2 .feature-img.page {
display: none;
}

    If you want to hide the featured image but not remove the space it’s using, you can change the visibility property instead of the display property like this:

    .page-id-2 .feature-img.page {
visibility: hidden;
}

    I hope that helps! If that seems confusing or you’d like more help sorting out how that works for each page, I’d recommend posting for additional help in the CSS Customization forum:

    https://en.forums.wordpress.com/forum/css-customization

  • Unknown's avatar
    mjellefson · Member ·

    Yay! Your advice was perfect! :) Thanks!

    I just have one last follow up question (thanks for helping with everything!).

    Now that I was able to hide the featured image, there’s a weird amount of white space above the content and below the menu bar.

    Is there anything I can change in the CSS to make that space smaller?

    Thanks again!!
    Lauren

  • Unknown's avatar
    rachelmcr · Member ·

    Hi Lauren,

    It sounds like you’ll need to adjust the height of the featured image section that you hid on that page. (Hiding it basically just makes that image invisible, so the area it would appear in is still there on the page.) If you’re not sure how to do that, the expert staff and volunteers in our CSS Customization forum should be able to help:

    https://en.forums.wordpress.com/forum/css-customization

    There are also some great tips for learning more about CSS and how it works here:

    http://en.support.wordpress.com/custom-design/css-basics/#get-going

    I hope this helps! :)

  • The topic ‘Hiding featured image and blog post summaries’ is closed to new replies.