Change Content Displays on Home Page, Sub-Category Pages

  • Unknown's avatar
    stocksandbonbons · Member ·

    Hello, hoping for some help with CSS to change the way content displays on my home page and the categories pages under “Browse Recipes.” The home page currently displays in a grid-format. This is the format I’d like to have the pages under “Browse Recipes” display, except with the text centered under the pictures, rather than left-justified. The content on these pages will display only a certain category of post on each page- I think I have that part worked out, but need help with achieving the grid-format.

    In contrast, I’d like to have the home page display posts that take up the whole width of the page (excluding the sidebar widget- I’d like that to still be included). For each new post, I’d like the title, categories, date, and featured image to display, along with the text from the beginning of the post. Any help with this would be much appreciated!

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

  • Unknown's avatar
    thesacredpath · Member ·

    Hi there, Apostrophe’s standard category pages built into the theme show the posts in a grid. You can see an example of that for your desserts category by clicking here: https://stocksandbonbons.com/category/desserts/ and will look substantially like your main page. I would suggest using the standard categories pages as creating a grid with the display posts shortcode would be very difficult.

    The following custom CSS will center the titles below the featured images in the main and archive/tag/category pages. 

    .archive .entry-title, .blog .entry-title {
    text-align: center;
}
  • Unknown's avatar
    stocksandbonbons · Member ·

    Thanks very much- I’ve switched the menu links to direct to the categories themselves rather than the pages I had created. The CSS you provided worked perfectly, thanks for that too!

    With respect to my question about the home page, is there a way to display this portion of the site in non-grid format that still displays the sidebar?

    Thanks again!

  • Unknown's avatar
    siobhyb · Member ·

    Hi @stocksandbonbons,

    You could use the following in order to get posts to take up 100% of the available width on the home page:

    .blog article {
    width: 100%;
}

    Apostrophe doesn’t support a way for you to display a post’s excerpt as part of its default design. However, as an alternative to the above CSS, you could add the Display Posts shortcode to a static page in order to pull in your site’s posts with a title, categories, date, featured image, and an excerpt.

    You can find more information about the shortcode here:

    Display Posts Shortcode

    You could then set the page the shortcode appears on as your site’s static front page.

    Take a look through the above and let me know if any other questions come up.

  • The topic ‘Change Content Displays on Home Page, Sub-Category Pages’ is closed to new replies.