- This topic has 1 reply, 2 voices, and was last updated 5 years, 5 months ago by
David.
-
AuthorPosts
-
November 3, 2020 at 4:21 am #1515853
Ben
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.
November 3, 2020 at 6:09 am #1515974David
StaffCustomer SupportHi 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; } -
AuthorPosts
- You must be logged in to reply to this topic.