Global styles not applying to GeneratePress buttons

Hi all,

I have looked into this further and established that I can only get the correct button style applying to the buttons when I take the following steps:

1. Insert Generate Press button on page (defaults to "gb-button" CSS class)
2. Clear default colours for normal and hover states
3. Add the additional CSS class "button" via the block settings on the right under "Advanced / Additional CSS class(es)".

I am just confused as to why I need to manually specify the "button" class to each button. How do I set global CSS styles that applies to all buttons with the "gb-button" class that have no inline (block level) styles applied?

I have included login details with this message.

Thanks for all your help so far.

(By the way, the suggestion given by Fernando a few posts above is not applicable as the "global styles" feature is apparently not included in Generate Blocks Personal despite the fact that the pricing info lists it as an included feature in all versions:
https://generateblocks.com/pro/#pricing )

If find this issue strange as applying the global color palette should be straight-forward w/o extra steps.

Here's a demo video -
https://share.getcloudapp.com/12ugprK6

On the video, you can see that I didn't have to apply any CSS class to the buttons. I just applied them and it worked as intended.

You can check it out on this page - http://elvin.wppluginsupport.net/global-color-demo-for-francesca/

The issue is likely isolated to your site specifically as I've tested this same process on different sandbox sites.

I've tried logging into the site w/ the credentials provided but it doesn't seem to work. (invalid username)

Can you confirm if the details provided are still valid?

As for the GB Personal: All the subscriptions should have this feature. The main difference between the 3 is the number of sites that can use the same license. I'll do some tests on sandbox sites to confirm this but it would help if I can see what happens on your site as this issue seems isolated. :)

You can try reinstalling GB and GB Pro to its latest version and see if it works.

Hi Elvin,

Thank you for the video and suggestions. Sorry about the user name mistake - it should be my email. I have put in the login details again below.

With regard to the suggestion you've mentioned and shown in the video, it appears that you are setting the global colour variables at the block settings level per each button. What I am trying to do is set up global style rules for GB Buttons (i.e. the "gb-button" class) which set a variety of things including border and font etc, not only colours.

(I should only need to use the block level settings to clear the default colours from GB Buttons so they don't override the global styles.)

My understanding was that the WP theme customizer was the recommended tool for setting all the main global styles for basic elements such as buttons etc?

I have GB Personal version 1.4.2 installed.

Thanks again for your further help. :)

My understanding was that the WP theme customizer was the recommended tool for setting all the main global styles for basic elements such as buttons etc?

Ah this was the misunderstanding.

The customizer is the recommended tool for setting things for theme's default elements like buttons.

But what you're trying to style is NOT a theme default element. GenerateBlocks elements, aren't default theme element/s. It's technically, an addon. (Note: GB works with any theme, not just GP)

Since it's technically an addon, the theme's default colors do not apply to it as it doesn't exactly share the attributes used by GP+GPP to style its default buttons.

The act of adding the class button is basically like telling WordPress "hey, please add this class to this GB block so it uses the theme styling".

Now for the easy solution:

The quick and easy solution would be a custom CSS like this -

a.gb-button {
    color: #ffffff;
    background-color: #FF5C3F;
}

a.gb-button:hover {
    color: #ffffff;
    background-color: #ff9582;
}

but this means you'll have to maintain this CSS. This is what you'll have to change if you decide to change the global color in the future.

Alternatively, you can assign global variable from the customizer global palette.

Example:

a.gb-button {
    background-color: var(--global-color-8);
    color: var(--global-color-9);
}

a.gb-button:hover {
    background-color: var(--global-color-8);
    color: var(--global-color-10);
}

This assumes you have added global palette colors with variable name --global-color-8, --global-color-9 and then --global-color-10 like this - https://share.getcloudapp.com/lluEx2GK

Having this set up means changing the global palette value changes the color of a.gb-button as well.

OK got it, thanks very much Elvin. I will give that custom CSS a try with the global color variables. Will I need to do anything to make sure theme updates don't override the custom CSS?

Were you able to figure out why I don't have the "Global Styles" feature with my GB Personal?

OK got it, thanks very much Elvin. I will give that custom CSS a try with the global color variables. Will I need to do anything to make sure theme updates don’t override the custom CSS?

It can't override custom CSS if the CSS applied has precedence. The selector I've provided generally is enough.

Were you able to figure out why I don’t have the “Global Styles” feature with my GB Personal?

Ah yes, about this:

I've checked your site and I didn't see GenerateBlocks Pro installed. GB Pro is a separate installation to GenerateBlocks.

You'll have to get a copy of GB Pro from your accounts page here - https://generateblocks.com/account/ - and install it on your site like installing any other plugins manually.

Here's a brief guide to installing it - https://docs.generateblocks.com/article/installing-generateblocks-pro/

Thanks for that Elvin, the custom CSS seems to have done the trick on the front end.

BTW in the WP editor the buttons do not have the correct styles showing (cache has been cleared using the Clear Cache chrome extension).

Where are you adding Elvins CSS? As this will need to be loaded in the editor too

Hi David, actually I am now looking at it on a different computer and in fact the custom CSS has not done the trick at all. I put the CSS in the Customizer / Additional CSS field. If you have a look at the /services page (front and back end) you will see the css color styles are not showing. Thank you.

Hi Francesca,

Upon investigation, it seems that the code provided still hasn’t been added to your website even though you've already added them through Additional CSS. The reason for this might be a caching mechanism in effect in your website.

Kindly see: https://share.getcloudapp.com/p9u6gxnY

With that said, can you check if there are caching mechanisms running in your website? Kindly reach out to your hosting provider as well and see if they are implementing a caching mechanism on your website. If so, clear them.

With the code added, it looks like this: https://share.getcloudapp.com/wbuzoyJ7

Kindly let us know how it goes. Hope to hear from you soon! :)

Hi Fernando, thanks very much for the further suggestions.

I am using SiteGround hosting. I had already disabled their caching plugin before this thread started but I have just now gone into the SiteGround admin and turned off any caching features that were still enabled ("NGINX DIRECT DELIVERY", "DYNAMIC CACHE" and "MEMCACHED") and flushed each cache (where there was a flush option given). Unfortunately when I clear my browser cache and reload the page I am still not seeing the correct colours displayed for the gb-button a elements. :-/

After further troubleshooting with SiteGround I have confirmed that caching is disabled and all caches have been flushed but this issue still persists.

Hi Francesca,

Another reason why CSS code wont appear on a website is syntax error. Do you have any other code in Additional CSS other than the one provided by Elvin?

If there isn’t any other code, can you try removing the current code and pasting the code provided by Elvin again? Make sure you’ve pasted everything. :)

Otherwise, if there are other codes, can you try temporarily removing them and placing only Elvin’s code? Kindly store the other code somewhere locally in your device. Check for any discrepancy in the code provided and the code entered.

Kindly let us know how it goes. If this doesn’t work, may you send an exact copy of the current CSS codes you have? Hope to hear from you soon. :)

Hi Fernando,

I added the following CSS from Elvin at the bottom of the additional CSS field (I have not added anything else):

a.gb-button {
background-color: var(--global-color-8);
color: var(--global-color-9);
}

a.gb-button:hover {
background-color: var(--global-color-8);
color: var(--global-color-10);
}

You can also check this in there to make sure if that helps? (I gave my login info earlier in this thread)

Also - so I can check more easily in future - which CSS file should changes made via "Customizer / Additional CSS" show up in?

I see. Upon investigation, there was indeed a syntax error in another code. A } was accidentally removed.

I’ve corrected it and it seems to be working now.

Kindly check if this code should only work on mobile view as this is where I found the missing }:

figcaption {margin-top:20px; !important}

Please check from your end and see if it’s working as expected now. Hope to hear from you soon! :)