[Resolved] How to select elements in GP with css

[Benjamin]

Hi Team,

I want to change the background color of my front page.

So I went to inspect in my browser and found the class “entry-content” which seems to cover my whole front page.

I installed simple CSS plugin and place in there

.entry-content {
    background-color: #79b2ec;
}

But nothing happen. Please help.

[Benjamin]

Ok I realize after inserting CSS I need to update the page.

Now my problem is what css class shall I use to change the background color of the whole page? When I go to inspect the class is very long…

[Benjamin]

Ok i think I found the solution I did this to change the color of the whole page.

body #page {
    background-color: #dceaf2;
}

body #masthead {
    background-color: #dceaf2;
}

I am new to css and html but willing to learn. Specifically for GP is there any resource I can be pointed to so that I can learn to configure GP via css, html and js?

[Elvin]

Hi Benjamin,

You can check the selectors used through your browser’s Inspect tool.

For Chrome, the shortcut is CTRL + SHIFT + I.

From here, you should see the HTML tags and the classes or ids added on them. You can use those as a selector.

The UI highlights the element on the page when you hover on the HTML tag, it serves as indication of what html tag is responsible for what you see on the page. 😀

[Author]

Posts