Archived topic

archive, blog, author page background color

5 replies · Started by Nikos on February 24, 2021

Viewing posts 1–6 of 6

February 24, 2021 at 10:48 am #1671047

hi!!
on 18 february you taught me how to change the colors of a page or post.
https://generatepress.com/forums/topic/pages-and-posts-background-color/
but what if i want to change the background color of an archive page?
i am not sure if it is the right term, but for example, i mean when we choose to see all the posts of a category, they open in a new page and we see them all together. or when we click the name of an author, there is a new page with all the author's post. or when we make a search again a new page is coming up with all the results there.
i am not sure if it is the same page id as the block. or it is call archive page etc.
so i would like to ask how i can find the id of that kind of pages so i would use it in the method that you taught me.
thank you very much

February 24, 2021 at 11:34 am #1671090

Hi Nikos,

You are right they are called archive pages.

If you are using chrome, open the archive page in chrome > right click > inspect, that's how you open chrome developer tool, or press F12.

Then you can find the author ID of this page, in this case it's author-31
https://www.screencast.com/t/PnNTsa1nHvQ

So your CSS would be this, test to see the difference between these 2 selectors.

.author-31 #page {
    background-color: #9823;
}
.author-31 {
    background-color: #6666;
}

And the same for the tag archive page, in this case it's tag-5.
https://www.screencast.com/t/6fWMN2svCYE

Hope my explanation helps :)

February 24, 2021 at 11:35 pm #1671627

hi ying
oh i understand and for the categories it is category-no23 for example etc etc :)
but is it a way to color everything at once? for example .author-"all" (all author archives will have the same background) or .tags-"all" (all tag archives will have the same background) or category."all" etc?
thank you very much !!!!

February 25, 2021 at 1:46 am #1671749

Hi there,

WordPress adds various classes to the <body> if your site. Known as body classes.

So:

.archive {
    /* All Archive pages */
}

.archive.author {
    /* only and all of the author archive pages */
}

.archive.category {
    /* only and all of the category archive pages */
}

.archive.tag {
    /* only and all of the tag archive pages */
}

February 25, 2021 at 1:52 am #1671757

thank you thank you thank you !!! (both of you) :) :) :)

February 25, 2021 at 2:30 am #1671797

Glad we could be of help

This archived topic is closed to new replies.

Start building better websites today.