Archived topic

Search results Background-Colour

5 replies · Started by Paul on January 17, 2023

Viewing posts 1–6 of 6

January 17, 2023 at 10:14 am #2499216

Hi There,

I'd like to change the search results inner container background colour without effecting the background colour of other pages (I already have the following styles in place). Do you know which selector I could use to target the inner container (link in private info)

/* Background colour on archives */
body.archive {
    background-color: var(--grey-100);
}

/* Background content colour on archives */
body.archive, body.archive #page {
    background-color: var(--grey-100)
}

/* Background colour on single posts */
body.single-post {
    background-color: var(--white);
}

January 17, 2023 at 10:58 am #2499257

Hi Paul,

When you say inner container, do you mean the body background color (based on your CSS)?

If so, you can use body.search-results

January 17, 2023 at 12:37 pm #2499351

Hi Ying,

Thanks for helping.

No I meant the background colour behind the cards:

The CSS below does what I want but it also effects the bg color on the single-posts page which I don't want :)

.one-container .site-content {
	background-color: var(--grey-100);
}

Thanks

January 17, 2023 at 12:59 pm #2499368

I see, you can use the class I mentioned to target the search results page:

body.search-results .site-content {
    background-color: var(--grey-100);
}

January 17, 2023 at 1:34 pm #2499401

Perfect thank you Ying :)

January 17, 2023 at 9:51 pm #2499645

You are welcome :)

This archived topic is closed to new replies.

Start building better websites today.