Archived topic
Button css appearing first then Kadence button css showing up
9 replies · Started by Laura on July 9, 2022
I am using Kadence Blocks and have a set of Kadence Advanced Buttons on a particular page.
The styles are different than buttons in other parts of the site.
When the page loads, my generate press button styles show up first then the Kadence buttons styles take over.
But it looks bad for the buttons to first be blue then change to the styles I have them set for in the Kadence button settings.
Is there a way to have GP button styles not load on particular pages?
Thanks in advance.
Hi Laura,
Is there a way to have GP button styles not load on particular pages?
Unfortunately that's not possible.
Sounds like you have a flash of unstyled content issue though - it's usually caused by caching plugins if you are using any.
I'm not using any caching plugins.
It must be possible to tell GP button styles not to show up when they conflict with others?
Unfortunately not.
If you are not using a caching plugin then it sounds like Kadence' style sheet is not loading at the correct spot otherwise it would overwrite GP's style in the <head> of the website and you wouldn't see GP's style load at all - similar to when we use Additional CSS.
Their support said it had to do with how GP loads it styles and to ask you.
I don't believe their support team is correct unfortunately.
Ok, I've sent them a message.
This is what they said:
Can you think of anyway to avoid this and only have the Kadence settings load for Kadence buttons? First they fill in with blue when you load the page then it finds the right css and they look right. Could there be a fix for that?
I checked and the button blue colors that load first come from generatepress themes "generate-inline-css" https://share.getcloudapp.com/yAu1QjGk
There is a code to remove this, you can check it here: https://generatepress.com/forums/topic/how-to-disable-generate-style-inline-css/#post-1525834
But caveat, their Lead developer says that this is not a great idea. https://generatepress.com/forums/topic/how-to-disable-generate-style-inline-css/#post-1527479
Hi there,
can i see the page where this is happening ?
Hi David,
Thanks, sure. It's not live yet so it's in the private comments with access. Please don't make it public.
Thanks for taking a look!
Hmmm.... so Kadence is:
a. Adding the button class to its Buttons blocks, which is what GP uses for its buttons.
b. it inlines it CSS styles right before its HTML
c. every button has its own unique id and separate style sheet
Choices:
1. ask Kadence if they use the render_block filter or something of the equivalent so the button class can be removed from their HTML.
2. Use the GenerateBlocks Buttons :)
