Change look of category pages

Hi there,

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

Let me know :)

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.

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/

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

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.

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?

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.

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

Give this a shot:

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

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

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

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,

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

Absolutely amazing, you're brilliant :)

Thank you very much!