Latest blog posts on homepage

  • Unknown's avatar
    oaklands2017 · Member ·

    Hello, I am using the “Twenty Fourteen” theme and I would like to add the latest 4 or 5 posts from the Blog (NEWS AND EVENTS) to the homepage.

    I would like to leave the same homepage looking the same way with the same info. But underneath the latest posts. Could you please help me with the CSS code for that?

    Thanks

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

  • Unknown's avatar
    thesacredpath · Member ·

    Hi there, see our Theme Showcase page for Twenty Fourteen for more information on setting up your home page. In particular, see the section on Featured Content and Featured images.

  • Unknown's avatar
    oaklands2017 · Member ·

    Thanks.
    I have been able to do it but it looks weird because there is too much space in between the featured content and the title of the home page.

    Is there any way of reducing that gap? Maybe with CSS code? Thanks

  • senff · Staff ·

    To reduce the spacing, you could add some CSS like this:

    @media screen and (min-width: 1008px) {
   .home .grid .featured-content .entry-header {
       height: auto;
       min-height:1px;
   }
}

@media screen and (min-width: 846px) {
   .home .content-area {
      padding-top: 10px;
   }
}
  • Unknown's avatar
    oaklands2017 · Member ·

    Thanks,

    that worked. It reduces the space from the top of the header image. Could we do the same with the bottom of the featured content.

    Would it be another CSS code? Thanks

  • Unknown's avatar
    oaklands2017 · Member ·

  • senff · Staff ·

    My apologies, I made a typo in the first part of the code. The correct code is this:

    @media screen and (min-width: 1008px) {
   .grid .featured-content .entry-header {
       height: auto;
       min-height:1px;
   }
}

@media screen and (min-width: 846px) {
   .home .content-area {
      padding-top: 10px;
   }
}

    (compared to the original code, remove “.home” from the second line)

  • Unknown's avatar
    oaklands2017 · Member ·

    That’s great. It looks a lot better.

    One more thing…

    Can I reduce the height of the featured content picture and delete the categories from the home page? That would make that section look smaller and it would look better

    Thanks in advance

  • Unknown's avatar
    thesacredpath · Member ·

    This will hide the categories on the featured posts on the home page. 

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

    On the featured image, are you talking about on those three featured posts, or the one below that above Welcome?

  • Unknown's avatar
    oaklands2017 · Member ·

    Thanks.

    Yes, I’m talking about the three featured posts. I would like them to use less space in the screen. Is there any way to reduce that images height to 50%?

    Thanks again!

  • Unknown's avatar
    thesacredpath · Member ·

    Thanks for the clarification. I’ve changed the size of these 33% width to 25% and then distributed them evenly horizontally. I also adjusted the title sizes and centered them since when we go to 25% width, the titles become two lines and effectively negate the downsizing. See what you think. 

    .grid .featured-content .hentry {
	width: 25%;
	text-align: center;
}
.featured-content-inner {
	display: flex;
	justify-content: space-around;
}
.grid .featured-content .hentry .entry-title {
	font-size: 85%
}
  • Unknown's avatar
    oaklands2017 · Member ·

    Thanks.

    Is it possible to make the featured content section smaller (in horizontal) so that the widget logos on the right hand side can go up? see photo…

    thanks again

  • Unknown's avatar
    thesacredpath · Member ·

    With the way the HTML is structured, this would require a bunch of CSS and even then would not work cleanly.

  • The topic ‘Latest blog posts on homepage’ is closed to new replies.