[Resolved] Adding Custom CSS

Home Forums Support Adding Custom CSS

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #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!
    Hendra

    #1166980
    David
    Staff
    Customer Support

    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.

    #1167238
    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

    #1167332
    David
    Staff
    Customer Support
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.