[Resolved] Change look of category pages

[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

[Tom]

Hi there,

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

Let me know 🙂

[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.

[Tom]

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/

[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

[Tom]

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.

[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?

[Tom]

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.

[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

[Tom]

Give this a shot:

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

[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

[Tom]

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;
}

[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,

[David]

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;
}

[William]

Absolutely amazing, you’re brilliant 🙂

Thank you very much!

[Author]

Posts