[Resolved] Change look of category pages

Home Forums Support Change look of category pages

Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
    Posts
  • #1172938
    William

    Hi there,

    I would like my category pages to follow a format, similar to what you can see here: https://www.litcharts.com/lit/1984

    I am able to add content from editing the category in WordPress. However, with GP Premium, I am unsure how to gain the same look, both mobile/desktop version.

    Kind regards,

    Will

    #1173141
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    Which part do you need help with? Displaying your posts as a title and excerpt only?

    Let me know πŸ™‚

    #1173317
    William

    Having some customizable content above and below the post titles and excerpts too, but having them look similar to how they look on the above litcharts link.

    #1173790
    Tom
    Lead Developer
    Lead Developer

    I’m still not completely clear which aspects you’re wanting to copy. Screenshots would definitely help.

    On that site, I see:

    1. Category title and description, which you can currently do in GP.

    2. A list of posts, which display the post title and a short excerpt. You can do this quite easily in GP, as well.

    3. Some text below the posts. For this, you’d need to create a Hook Element: https://docs.generatepress.com/article/hooks-element-overview/

    #1174211
    William

    Hi there,
    Thank you for this. 1) has worked. 2) has worked as well, but is there a way to change the colour scheme of the posts to something similar to this? https://www.litcharts.com/lit/1984

    As for 3) I think this would work. But, to my understanding, I would have to make a new hook for each category. Is there a way to have all of the content added in the Category description, then use shortcode to split it (so the articles appear similar to https://www.litcharts.com/lit/1984, inbetween content)?

    Many thanks,
    Will

    #1174760
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    2. Have you checked out the color settings in “Customize > Colors > Content”? Specifically, the “Archive Content Title” option. You can find the Typography settings in “Customize > Typography > Headings”.

    3. The category description is shown at the top, so it’s not possible to split between on top and bottom. I think adding them as separate hooks is your best bet.

    #1174948
    William

    Hi there,
    Thank you for this – this customization only changes the title, not the whole area hover colour, or description hover colour – is this possible?
    As for the hookers, I understand, but would that require having a new hook for each and every category added?

    #1175483
    Tom
    Lead Developer
    Lead Developer

    Ah yes, that would require CSS. Can you link me to one of the pages we’re targeting?

    That’s correct, each category would need a new hook if each category has different content to display. If a category is sharing content with another category, you can apply that hook to multiple categories.

    #1175755
    William

    Hi there,
    Okay, I’ll look into the hooks separately.

    As for the CSS, page on my website is http://bookanalysis.com/1984/ and I want it to look similar to https://www.litcharts.com/lit/1984 in terms of the look.

    Kind regards,

    Will

    #1176484
    Tom
    Lead Developer
    Lead Developer

    Give this a shot:

    .archive article:hover .inside-article {
        background: #ddecf7;
    }
    #1176502
    William

    That’ brilliant, thank you very much. The last things I hope are possible is:

    – to make the whole inside.article a clickable link, instead of just the title
    – have animation similar to https://www.litcharts.com/lit/1984, or a delay to the hover effects

    #1176773
    Tom
    Lead Developer
    Lead Developer

    Try this:

    .archive article a:before {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
    }
    
    .archive article {
        position: relative;
    }
    
    .archive article a {
        transition: color 500ms ease-in-out;
    }
    #1177161
    William

    Hi there,

    Nearly perfect, thank you for this. The only things left is that:

    – The side of the area and top are still not clickable – I would like the whole area that changes colour when hovering to be clickable.

    – The ease in and out does not work for the background colour – is it possible to do it for this too?

    Many thanks,

    #1177630
    David
    Staff
    Customer Support

    Hi there,

    1. Change this to include the extra two properties i have commented:

    .archive article a:before {
        content: "";
        position: absolute;
        left: 0; /* Add this */
        top: 0; /* And this */
        width: 100%;
        height: 100%;
    }

    2. Use this instead of the background hover CSS provided here:

    .archive article .inside-article {
        background-color: #fff;
        transition: background-color 500ms ease-in-out;
    }
    
    .archive article:hover .inside-article {
        background-color: #ddecf7;
    }
    #1177646
    William

    Absolutely amazing, you’re brilliant πŸ™‚

    Thank you very much!

Viewing 15 posts - 1 through 15 (of 16 total)
  • You must be logged in to reply to this topic.