• Resolved lovestobegreen

    (@lovestobegreen)


    Hello,

    On my homepage I would like the blog feed to show just the image and the title without the excerpt. Is there a way to completely remove the excerpts from all posts?

    Thanks,

    Michelle

    The page I need help with: [log in to see the link]

Viewing 7 replies - 1 through 7 (of 7 total)
  • Hi Michelle,

    This is a great question, and I believe it’s been asked a few times before, so we should be able to add an option for this in the next update.

    In the meantime, you can add this CSS in Appearance > Customize > Additional CSS, and it should do the trick:

    .blog-feed .entry-summary { display: none; }
    Thread Starter lovestobegreen

    (@lovestobegreen)

    Hi Steven,

    That’s perfect. Thank you very much for the CSS.

    Is there a way to place a thin box around the featured image and title similar to how they’ve done here: https://www.instyle.com/fashion?

    Best,

    Michelle

    Sure thing! This CSS should add the border:

    .blog-feed .entry-content {
        border: 1px solid rgba(0,0,0,.15);
    }

    You may also need a bit of padding added to the individual elements inside the box (let me know if so and I can write it up for you if you’d like).

    Thread Starter lovestobegreen

    (@lovestobegreen)

    That’s super thank you!

    I was able to add padding but I’m not sure how to add it for just the date and title (so the image still fills out the whole box).

    Also, is there a way to make the height of the box uniform regardless of how many lines my title takes up?

    Thanks as always for all your help!

    Good thought- something like this should take care of the padding:

    .blog-feed .entry-content > *:not(.entry-thumb) {
        padding: 0 15px;
    }

    The uniform height is a little trickier…it would require changing the layout from floating divs to a grid (there are other methods that would work too). You can give this a shot, it may require some tweaking to get it just right:

    @media screen and (min-width: 768px) {
    	.blog-feed .entry-title {
    		margin-bottom: 0;
    	}
    	.blog-feed .entry-meta {
    		display: none;
    	}
    	.blog-feed-posts .row {
    		display: grid;
    		grid-template-columns: 0 50% 50%;
    		padding-bottom: 35px;
    	}
    	.blog-feed-posts .row > div {
    		width: 100%;
    	}
    	.blog-feed-posts .row .entry {
    		display: grid;
    		height: 100%;
    	}
    }
    Thread Starter lovestobegreen

    (@lovestobegreen)

    These worked perfectly and were exactly what I was hoping for! Thank you so much Steven for always being so willing to help.

    That’s great to hear, thanks so much for the kind words! ??

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Remove excerpts’ is closed to new replies.