Home screen blog posts

Home Forums Automattic Pinboard Home screen blog posts

Viewing 19 posts - 1 through 19 (of 19 total)
  • Author
    Posts
  • #163669 Resolve

    James Syner

    I would really like the home screen to only display the featured image of the blog post and the title. Then when you click on the image you open up the content of the post. At the moment, the only reason to click on an idividual post is to see it bigger. Therefore, I don’t get a true account of what people are viewing on the blog.

    Is this possible?

    The blog I need help with is magpiethat.com
    #163670

    Kathryn P.
    Happiness Engineer

    Hi James – you could try hiding the post content itself on the homepage with some custom CSS:

    .home .entry-content {
      display: none;
    }

    Let me know if this works for you.

    #163671

    James Syner

    AMAZING! Thank you. One last thing, how do I hide my name and the tags from each post on the home screan?

    #163672

    James Syner

    and how do I get rid of my avatar from each blog post?

    #163673

    Kathryn P.
    Happiness Engineer

    Sure! Just remove the CSS I provided above and replace it with this, which also hides the author name and tags:

    .home .entry-content, .home .entry-meta {
         display: none;
    }

    You may now also to add a bit of space below the date so it isn’t butted right up against the bottom of the post:

    .home .entry-date {
       margin-bottom: 10px; 
    }
    #163674

    Kathryn P.
    Happiness Engineer

    and how do I get rid of my avatar from each blog post?

    .single .entry-meta .author-img {
         display: none;
    }
    #163675

    James Syner

    That one doesn’t seem to work?

    #163676

    Kathryn P.
    Happiness Engineer

    Ah, I thought you were asking how to remove your avatar from the single blog post pages. :) If you want to hide them on the homepage, then change this:

    .home .entry-content, .home .entry-meta {
         display: none;
    }

    to this:

    .home .entry-content, .home .entry-meta, .home .author-img {
         display: none;
    }

    It would be great if you could ideally group your tweaks for the homepage into one question, it’ll be a bit less confusing and more efficient. :) Was there anything else you wanted to tweak?

    #163677

    James Syner

    Sorry, as I was adding your code I was thinking of more things. So, on reflection, all I want on the home screen is the featured image and the title of the post. No date, avatar, tags or my name.

    Thank you very much for all your help.

    #163678

    Kathryn P.
    Happiness Engineer

    To also hide the dates on the homepage, change this:

    .home .entry-content, .home .entry-meta, .home .author-img {
         display: none;
    }

    to this:

    .home .entry-content, .home .entry-meta, .home .author-img, .home .entry-date {
         display: none;
    }

    You’ll also now want to remove the bottom-margin on the date:

    
    .home .entry-date {
       margin-bottom: 10px; 
    }
    

    And instead add it to the title:

    .home .entry-title {
         margin-bottom: 10px;
    }

    Let me know if this does the trick!

    #163679

    James Syner

    Amazing, that looks so much neater. Thank you for your patience.

    Is there a way to now reduce the size of the font of the blog titles on the home page?

    #163680

    James Syner

    Also, unrelated.

    The header will only be a block colour when made black, otherwise it has vertical lines along it.

    Is there a way to delete them?

    #163681

    Kathryn P.
    Happiness Engineer

    Sure, no problem! Are there other tweaks you’d like to make in addition? Please feel free to list all the tweaks you want to make to your site and I’ll give you all the CSS code at once. :)

    #163682

    James Syner

    Thats everything.

    I promise.

    #163683

    Kathryn P.
    Happiness Engineer

    This should do it. You can adjust the percentage value as you like:

    Is there a way to now reduce the size of the font of the blog titles on the home page?

    .wf-active .three-column .entry-title {
        font-size: 130%;
    }

    The header will only be a block colour when made black, otherwise it has vertical lines along it.

    Is there a way to delete them?

    I’m not sure where to see the vertical lines in the header that you’re referring to. I see one horizontal line here – is that what you want to remove?

    Magpie That illustrated books picture books graphic novels

    If that’s not it, would you be able to point me more precisely to where I should be looking? Thanks!

    #163684

    James Syner

    Appologies, I mean the strip of colour where the menu sits. I’ve change the colour from black to green so you can see the lines I am refering to.

    #163685

    Kathryn P.
    Happiness Engineer

    Ah, thanks. To remove the vertical stripes from the menu bar, this should do the trick:

    #masthead {
      background-image: none;
    }

    Let me know!

    #163686

    James Syner

    Perfect! You’ve been brilliant, thank you so much for your help.

    #163687

    Kathryn P.
    Happiness Engineer

    You’re very welcome! I really like what you’ve done with Pinboard, by the way – looks great.

    I’ll mark this thread as resolved but feel free to start a new one if you need help with anything else.

Viewing 19 posts - 1 through 19 (of 19 total)

You must be logged in to reply to this topic.