Archived topic
Global styles not applying to GeneratePress buttons
35 replies · Started by Francesca on February 13, 2022
I have GP Premium with the health site starter content. I have configured the global CSS for gb-button colors via the theme customizer however these colors are not consistently applying to buttons in all cases in the pages on the front end.
For example, see the home page here with correct button colors showing:
https://www.mindfreetherapy.com.au/
For comparison, see the buttons on this page under the "What we can help with" section:
https://www.mindfreetherapy.com.au/services/
Please note that the first button under "Anxiety" has had the in-line color settings cleared but it is still not reflecting the colors set in the global customizer.
Appreciate any help with this!
Hi there,
which CSS Selector did you use in the Customizer > Colors ?
Thanks for the reply. There is no option to enter a CSS selector via Appearance > Customizer > Colors > Buttons however the class that GP sets for the buttons on the live site is gb-button
Hi Francesca,
Can you share how you've set the colors of the button within the content of the /services/ page?
It seems to have a block-specific setting that overrides the color styling coming from the theme.
A GB button will NOT inherit customizer styles if it has a specific style applied to it.
Please note that the first button under “Anxiety” has had the in-line color settings cleared but it is still not reflecting the colors set in the global customizer.
Can you try going to Dashboard > GenerateBlocks > Settings and try clicking the "Regenerate CSS files" button as shown here? https://share.getcloudapp.com/DOumYK1O
Hi Elvin,
Thank you for your reply.
Originally tried clearing all pre-existing theme colours (for the settings of the buttons on the Services page) one by one, then updating and clearing cache. This worked to bring across the customer colours on the other pages, but not this one.
I have now "regenerated CSS files" per your suggestion and cleared cache. There has been some change, but still not resolved.
The button under "Anxiety" is the same - the button text is visible (non-custom colour) and no custom colours or border for the button itself. The buttons under all the other headings "low-self esteem" through to "Phobias" are all invisible until you hover over them, then the custom colour and border appear.
I then tried regenerating CSS files again after removing the pre-set theme colours for all remaining buttons (and clearing cache). No change unfortunately. Thanks for your help! Hopefully we can work it out
The two pages again for your reference:
See the home page here with correct button colours showing:
https://www.mindfreetherapy.com.au/
For comparison, see the buttons on the Services page under the “What we can help with” section:
https://www.mindfreetherapy.com.au/services/
Hi Francesca,
As mentioned by Elvin and to confirm, have you tried checking the colors set in the Block settings of the Button Block? (Not sure if this is what you mean with “clearing pre-existing theme colors one by one”).
See this for reference: https://share.getcloudapp.com/04uLwLpJ
Also see: https://share.getcloudapp.com/yAukmkwm
Setting colors here overrides the Colors set in the Customizer.
Hope to hear from you soon! Hope we can get to the bottom of this as soon as possible. :)
Hi Fernando,
Yes I can confirm that is what we tried, clearning the templated colours within the blcok settings of the button block. Unfortuantley this made no change.
On other pages when we did this, the buttons would then pick up the custom/global colours but not on the services page for some reason.
Can you please advise if there is anything else we can try? Thank you
Hi Francesca,
Are you using Global styles or Global colors? Using Global styles should add an extra class to the Block which I’m not noticing in yours.
See: https://share.getcloudapp.com/12u0Wp7X
For reference, here is a sample Block using a Global style on my test website: https://share.getcloudapp.com/z8ukzDGO
Here is how I set it up: https://share.getcloudapp.com/p9uX1Re2
Also see: https://share.getcloudapp.com/mXuJe9Db
With this said, can you confirm if you’ve set up your Button Block and you Global Style correctly?
Here is a helpful video by Leo with regards to Global Styles: https://www.youtube.com/watch?v=GjyYcr8ldHQ
Hope to hear from you soon! :)
Im having similar problems with my buttons. Save them one style but on page different colour. It's probably the global style as you suggest. But when I look at my generatorblock side menu all I see is dashboard and settings. No global styles option
Hi there,
Global Styles are only available in GenerateBlocks Pro.
If you want to start a new topic, and share a link to a page where we can see the problem then we can have a look.
Thanks David
You're welcome
Hi team, thank you for your help so far.
I think this additional step is what we're missing - setting global styles for buttons specifically. We weren't aware of this, will check it out and confirm if we still need further help. Thank you
You're welcome Francesca! If further help would be needed, we might need temporary backend access to your website to investigate further.
You may use the private information field for this: https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information
Kindly let us know how it goes! :)