Adding Custom CSS

[Hendra]

Hi Tom and the team,

Quick question, how do I know if I add a custom CSS to the right target on GP theme?

Let me try to explain what I have done:
– I installed a plugin called SiteOrigin CSS. This plugin has a visual screen where I can click on an area and it will tell me the target name / ID of that particular area.
– Example: I wanted to add a bottom border in the header container. Using SiteOrigin CSS I click on header container and then added a bottom border property. The CSS code it gave me was this:

.inside-header.grid-container.grid-parent {
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #f7d7d7;
}

I then copy the above CSS and paste it into your Simple CSS plugin. Because I try NOT to use any other plugin not created by you.

So, my question is how do I know based on GP design that .inside-header.grid-container.grid-parent is the right target for me to use?

Before I go too far and add too many custom CSS using this method above, I thought of asking here first. 🙂

Thank you so much!
Hendra

[David]

Hi there,

your example – this selector:
.inside-header.grid-container.grid-parent

because there is no space between CSS class selectors means all of those classes exist on that element. So it is perfectly valid but unnecessary when you could use just the first one ie.

.inside-header

The way GP generally applies CSS classes to an element is a unique class first eg. inside-header which would be followed by a supplementary classes such as grid-container grid-parent. Those supplementary classes will generally be used on a wider scope and will affect multiple elements

So you can normally tell which class is the correct one by the relevance of the class name.

HOWEVER …. this does not mean your CSS will necessary work. As the GP CSS may be more specific. In this instance i would advise using the browser developer tools to inspect an element to see which CSS class selectors are being used.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Hendra]

Hi David,

Thank you so much for your reply.
Noted on using the browser’s developer tools instead. I will try that.

Kind regards.
Hendra

[David]

You’re welcome

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts