[Resolved] How to create a BLOG Post Archive Page custom CLASS & HTML…

Home Forums Support How to create a BLOG Post Archive Page custom CLASS & HTML…

  • This topic has 7 replies, 2 voices, and was last updated 2 months ago by David.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1376374
    michael

    Subject: How to create a BLOG Post Archive Page custom CLASS & HTML…

    I already have a BLOG Hero Element that is working fine, & the Blog posts are also working fine.

    But I cant find where/how to modify the BLOG page HTML. I find nowhere in the Customize-Layout-Blog area or elsewhere to enter HTML or a custom CLASS.

    I can use the html section in the GUI for the Element Header Hero area… but that is the Header not the body.

    Is this a Custom Template issue??? Do I need to write a Plugin ???? What is the recommended way to this. I want to add my own Text Labels & Layout for my Blog.

    Thanks.

    #1376703
    David
    Staff
    Customer Support

    Hi there,

    are you trying to change the layout of the Post loop (grid) or add content around the posts? _ Maybe a screenshot or example site you’re trying to match will help us get the idea

    #1378167
    michael

    Thanks for responding on the weekend David,

    Answering your question: I believe it is both Grid & Post Content.

    1) I want a WELCOME sentence under the Element Hero Header.

    2) I want to alternate the layout of each post: Category Icon picture on right, text on left… then swap right & left.
    I have a unique Icon/Image for each Category Tag/Type (6 types in all)

    Thanks

    #1378282
    michael

    Also I would like to use a few fonts… also I would like to add a couple fields to be displayed with each user post, eg their City & Country if available in database.

    #1378320
    michael

    I want to add 3 or 4 optional input fields (name, city, country, date) on the COMMENTS Blog page, these will appear along with each post. These will only be used for that specific blog post… no saving to database.

    #1378465
    David
    Staff
    Customer Support

    Might be possible without creating a new template using GP Hooks. Which is easily accessibly the Hook Element:

    https://docs.generatepress.com/article/hooks-element-overview/

    1. The content below the Header element can be added to the after_header hook with a priority of 25. Set your Display Rules to Category Archive –> Comments Category ( or whatever one ).

    2. To switch the articles position you can use the nth-of-type selector:

    .archive .category-comments:nth-of-type(even) {
        background-position: right;
    }
    .archive .category-comments .inside-article:nth-of-type(even) {
        padding-left: 0;
        padding-right: 70px;
    }

    3. If you can the fields from the database then again the hook element is the way to go.

    Hope this helps

    #1378533
    michael

    Thanks David… I will try your excellent suggestions!!!

    #1378862
    David
    Staff
    Customer Support
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.