- This topic has 3 replies, 2 voices, and was last updated 1 year, 2 months ago by David.
February 16, 2020 at 5:18 am #1166934Hendra
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:
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 #1166980DavidStaffCustomer Support
your example – this selector:
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.
The way GP generally applies CSS classes to an element is a unique class first eg.
inside-headerwhich 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.February 16, 2020 at 8:13 am #1167238Hendra
Thank you so much for your reply.
Noted on using the browser’s developer tools instead. I will try that.
HendraFebruary 16, 2020 at 9:55 am #1167332
- You must be logged in to reply to this topic.