[Support request] How to avoid duplication of styles and control them centrally

Home Forums Support How to avoid duplication of styles and control them centrally

  • This topic has 1 reply, 2 voices, and was last updated 4 months ago by David.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • #1515853

    Hi, I am new to GP Pro and GB and have a styling question around what is considered best practice.

    I’m coming at this from a perspective of custom theme development where I’d make a stylesheet that handles everything, so that styles are just set once for each element and updated centrally. While I could do that here, my styles are then competing with or overriding GP/GB styles and I’d like to avoid that where possible.

    If I add GB buttons to many pages on the site, is there a way for me to update the styling of these in one place? It seems that if I change the default padding of buttons via a filter, it only applies to new buttons after the default was updated. I.e. padding values are duplicated many times across the site, making a site-wide styling change a nightmare, particularly when dealing with things like changing container padding across different breakpoints. I can’t see an option for GB buttons to sync with a default padding, it forces me to enter padding values and if I delete them it goes to 0. This will lead to different buttons potentially having different padding unless I update each instance manually.

    This is the kind of pain-point I have long had with other builders like Elementor where styles are saved against individual blocks/elements and not using a central stylesheet unless the element is global and uneditable (but in most cases, elements like buttons need to be editable).

    Are global/class-based styles on the roadmap for GB? I’m really keen to avoid having styles manally set against each block instance, unless it is some special case where overriding default styles makes sense.

    Customer Support

    Hi there,

    yes, this is a pain point and something we will be addressing in future updates. The Button is the top of our list for ‘global styling’.

    The workaround today is to use CSS to override the Button styles. For example we can apply this more specific CSS to the front end:

    .entry-content .gb-button-wrapper .gb-button {
        padding: 10px 12px;
        background-color: #f00;
        color: #fff;
        text-transform: uppercase;
Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.