- This topic has 3 replies, 2 voices, and was last updated 2 years, 11 months ago by
David.
-
AuthorPosts
-
February 16, 2020 at 5:18 am #1166934
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!
HendraFebruary 16, 2020 at 6:42 am #1166980David
StaffCustomer SupportHi 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 asgrid-container grid-parent
. Those supplementary classes will generally be used on a wider scope and will affect multiple elementsSo 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/February 16, 2020 at 8:13 am #1167238Hendra
Hi David,
Thank you so much for your reply.
Noted on using the browser’s developer tools instead. I will try that.Kind regards.
HendraFebruary 16, 2020 at 9:55 am #1167332David
StaffCustomer SupportYou’re welcome
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/ -
AuthorPosts
- You must be logged in to reply to this topic.