Blocks Ignore Theme Styles

Hi @deborah86,
Sorry to hear this! Can you specify which blocks you’re experiencing these issues with?
Thank you!

Hannah

I am using the form block and the icon list blocks. I still have the form block on the Contact Page and the Authors page. I removed the icon list block because it was causing issues with the Official AMP Plugin.

Hey,
Are you just referencing the form button? You can set a background color and a background hover color from the block settings. Just open the hover toggle as seen in this screenshot: https://ibb.co/QnFXWxz
Does this work for you? Or are you referencing something different?

Kindly,
Hannah

Form blocks – it is the form label text and the button.
Icon List blocks – it is the text styles.

No, that doesn’t solve me issue. My original concern is the accent colors are not taken from my theme. I have to set them manually on each form button. There is no way to globally set these colors. I have to set them for each individual form.

It also doesn’t address the issue I am having with my theme’s styles not be recognized. I am not seeing my theme fonts in the selection box. I am seeing a bunch of fonts aren’t installed in my theme.

Are the blocks compatible with all themes or only the Kadence theme?

Hey,
If you want some help writing css to force your colors onto the Kadence Blocks we can help with that. However, there isn’t a way for the block to parse your themes css and understand it in such a way as to assign a color. Usually, themes register colors into Gutenberg and you would be able to select that color from your color palette. Otherwise, you can ask the theme authors to add support for Kadence Blocks.

In terms of which font options are available those are a list of 800+ available google fonts and are not based on any theme. If your theme font is not defined in that list you can request that your theme add support for Kadence Blocks. However most of the time by not assuming a font your theme’s selected font would be inherited based on the HTML tag and so that wouldn’t be needed.

I hope that helps,

Ben

Other blocks I use inherit the styles from the theme.

I also don’t understand why I need 800+ additional fonts when I just will add fonts I want to the theme. I guess some people will need a font to style a single element differently but I don’t see that as a common use case for fonts.

What are the CSS selectors for the blocks?

Hey,
Some styles would be inherited from your theme, for example, the font family if you don’t select one. Leave the selection off and it will use the theme font. The settings are options and options that you can choose to use or not choose to use.

If you are annoyed with the number of fonts that you can choose from there is a way you can select to only show specific fonts in the dropdown. If you go to the top right corner and click on the Kadence icon you can get into the block defaults, there you can edit the typography and you will be able to select which fonts you want to show as options in the blocks font selections.

Blocks like the advanced header will by default use the themes styles, color spacing font size, font family etc unless you override in the settings.

In terms of the form block some basic styling is defined for the forms. You can change this in the form block settings to match any setup you want.

Or if you want to use css you can use css like this:

body .kb-form .kadence-blocks-form-field .kb-text-style-field {
border-color: blue;
border-width:2px;
background:#f2f2f2;
}

I’m not sure how you want it styled so this css is just as an example.

If you can give me specifics I can help with specific css.

Ben

For some reason, it is not picking the fonts from the theme. I also can’t select them from the list.

@britner My issue was not resolved. Since I have not received an update, I am uninstalling the plugin. The thread is marked resolved because I have uninstalled the plguin.

Hey,
Sorry about the delay, I missed your post from the weekend,

I want to be clear that the list of fonts is not about pulling in the font choice from your theme. They are options and if you leave the options blank (don’t select anything) then the font family from your theme will be inherited. If you are not seeing the font family that is ok, you don’t have to select anything because it’s only when you select something that you override and define a font family different from what your theme is defining.

Based on your link above the font you are using is Inter which is an option in the latest version of Kadence Blocks so I’m not sure if there is another font you are looking for.

Ben