[Resolved] Home Page with var(–color001) and Contact page with var(–color002)

[Luis Miguel Rosero]

Hello Leo, I hope you are very well.
I wonder how I can have my home page with all its background in one color, for example black and my contact page with a different color, for example white.

I have set in the global colors that the default background is variable 3 in light gray (HEX #EAEDED), so that it applies to all pages, but I would like to paint the home page “black” and the contact color “white”

If I assign a color to each container (I use GP Premium + GB Free), — the space (GAP) between these containers is set to the default background color — var(—grey003) (HEX #EAEDED)

look at the attached example image, the white stripe that is the GAP space generated between two containers

[Fernando]

Hi Luis,

Can you provide the link to the site in question?

You may use the private information field when sharing the site: https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information

[Luis Miguel Rosero]

I work on my local machine.

I ask you, if I don’t have a site mounted on a remote server, then you can’t give me an answer to something as generic and general as this query?

[David]

Hi there,

each page on a WP site is given specific body classes that can be used with some CSS to style specific parts for just those pages.

Your Home page is given this body class: home

So if you want to have a different body background color or your homepage you can use this CSS:

body.home {
    background-color: var(--color001);
}

[Luis Miguel Rosero]

I appreciate your response, it is what one expects from a professional who works in this role (support) and from a competitive company.

Honestly the above answer just made me not want to use GP anymore. You have given me some motivation back.

[David]

I am sorry. But my colleague did not mean to offend.
We generally ask to see the site as it allows us to check the sites source code and assess what is the correct or best answer.
In the instances where we cannot see the site, then we may need to ask more questions or make some assumptions.

Did the method i provided work for you ?

[Luis Miguel Rosero]

TICKET RE OPEN

I have temporarily uploaded an example page: https://pruebagp.server2.trinchera.dev/

I hope you could please guide me to understand the concept of what is happening.

I have a page called home (in Spanish INICIO) https://pruebagp.server2.trinchera.dev/inicio

It shows that the separation between containers (the GAP) has a color variable –base-3 (bank), I have set the color variable –base-2 (black) to each container as the background color.

On this particular page I would like the container spacing to have the color variable –accent (red)

I have other pages, for example contact (CONTACTO in Spanish) (use /contacto in the slug of the url, since the site is in Spanish *https://pruebagp.server2.trinchera.dev/contacto* ) for this and other pages that do not manually modify their background color, I would expect that their background color remain the color variable –base-3 (white)

How can I know, (with the browser element inspector (F12)) for example on the /home page, which is its body class and which is the class in /contact for example

[David]

Ok, so that whit is showing through from the content container ( Set in Colors > Content -> Backgroind ).
And that page is a static page and it has a body class of: page-id-28

NOTE: All Static pages use this body class page-id-xx. Where xx is the ID of the page. You can get the ID of the page by a). editing the page and b). check the URL in the browser it will container id= something.

So for that page and that container you need this CSS:

body.page-id-28 .container {
    background-color: var(--color001);
}

[Luis Miguel Rosero]

I had tried with the id of the page and with the container class, but not combined, thank you very much, excellent work and support that makes you fall in love

[David]

You’re welcome

[Author]

Posts