Archived topic
Archiv Page Background / HR Line
10 replies · Started by Tobias on March 19, 2022
Is it possible to adjust the background color of the archive page so that the articles displayed alternate with different background colors? Article 1 black, article 2 grey, article 3 black ... ?
Alternatively, I would also like to know if you can separate individual articles on the archive page with <hr> so that there is no hr above the first and below the last article. but only between the articles.
Thanks.
Hi there,
can you share a link to your sites archive page so I can see the layout?
In the private area.
Alternating colors you could do something like this:
/* Even posts */
body:not(.single) article:nth-of-type(even) .inside-article {
background-color: #f00;
}
/* Odd posts */
body:not(.single) article:nth-of-type(odd) .inside-article {
background-color: #00f;
}
/* Add some padding */
body:not(.single) .inside-article {
padding: 10px
}And if you want to add a border between articles then add this CSS:
body:not(.single) article:not(:last-child) {
border-bottom: 2px solid #000;
}It's amazing how quickly they respond here. Both solutions work exactly as I imagined. Thank you and nice weekend ;)
Solved
Glad to be of help!
Hello again. I've tested the colors now. It also works as desired. However, the background color of the normal pages will change like the odd posts. Is this a mistake?
Hi Tobias,
Try change this CSS:
body:not(.single) article:nth-of-type(odd) .inside-article {
background-color: #00f;
}to:
body:not(.single):not(.page) article:nth-of-type(odd) .inside-article {
background-color: #00f;
} Ok, thats it. Thanks ;)
You are welcome :)
