Button settings without effect

Hello,

first in Elementor, now with WPBakery, i can’t see any effect, configurating the settings under “Styles and Colors -> Buttons”

I set clear Defaults and Alternatives, which do result in no result at all on my site.

Maybe, i got something wrong (well… eht documentation is a bit useless in this point 😉 ) but i expect these settings to be available in the button setttings in the page builder, or at lease to be active as default. Both is not the case, as far as i can see.

So please tell me, where i am wrong… or what i can do to get my settings to work 🙂

2nd:
I’d like an overlay or filter for the background images in the title section (esp. in the shop, the categories are sometimes hard to read.) I expected it to be found in the settings, but i did not find it anywhere.

cheers – Holger.

Hello,

Please elaborate with the help of some relevant screenshots of the specific area which you want to change the colors and add effects to check it myself and help you out accordingly.

Because your current explanation is not clear enough to understand what you require.

Best Regards.

I hope, the screenshots make it more clear to you.

The according page i took the Screenshot_42.png is the frontpage of the website.

Attachments:

You must be logged in to view attached files.

Hello,

I saw the screenshot you attached.

The default color in the button settings is not inherited from the Styles and Colors default color.

It is inherited with the primary and alternative color. Please try changing the color to primary then check back.

Screenshot for Clarification: https://gyazo.com/b993bdd88cee1d6d8ff9e094370248fb

Regards.
Xtemos Studios

That helps a bit.

Problem: If i set the color to primary, the default color fits, but the hover color is not blue like configured.

How about that: you log in, and have a look for yourself. That might be faster that writing many more messages 😉

Holger.

By the way: it sounds a bit strange:

I do configure the button’s behavior, and look (like 3D or flat), but only the default color is taken from that configuration?

The more i work with the theme, the more it seems to loose… But as the Documentation does not explain anything, how it realy works, i have to guess…

So please explain, how it works and how i can get my configuration in your theme styling to take effect on the website!

Hello,

The “Default” button color in the button options is not actually the one from Theme Settings.

It is just like “Grey” color.

The button element has its own options to change the color as well as the hover color. It doesn’t inherit it from Theme Settings.

Screenshot for Clarification: https://gyazo.com/a61b1a5ef664d6251181cd9ce06bec6a

Regards.
Xtemos Studios

Well… You have Button settings in your styles section.

How do i get these settings to take effect on the website??? What do they do at all?

Probably, that section was not only created, because it looks so nicely…. was it?

Do i have to take other button elements or what?

regarding your video:
yes, i know, that i can make custom settings on each button.
What i wanted to do, is to set a default button behavior, as i assumed the button section ind your styles menu would do… so what’s it for?

By default, WordPress theme and WooCommerce didn’t have settings for button colors. In our theme, we implement these settings and split all array of WooCommerce, supported plugins and theme options buttons in three categories to be able to customize them separately:

SHOP BUTTONS. Buttons that directly related to the WooCommerce purchase functionality. For example:
Add to cart (https://prnt.sc/1mstug0)
Proceed to checkout (https://prnt.sc/1msv4gk)
Return to shop (https://prnt.sc/1mswl7f)

ACCENT BUTTONS. Other “Call to action” buttons that not related to WooCommerce shop functionality. For example:
Sign up (https://prnt.sc/1msxyp0)
Post comment (https://prnt.sc/1mszh16)
Accept (Cookies) (https://prnt.sc/1mt08xk)

DEFAULT BUTTONS. All others WooCommerce, supported plugins and theme options buttons that not included in the two upper categories, and those buttons that do not have own button settings. For example:
Filter (https://prnt.sc/1mt34qf)
View cart (https://prnt.sc/1mt3r1j)
Login (https://prnt.sc/1mt418f)
Update (https://prnt.sc/1mt4lsk)

All theme settings button options are related to the buttons that didn’t have own style and color settings and not related to the page builder “Button” element that have own style, color, size, shape, icon and hover options (Button element demo page https://woodmart.xtemos.com/buttons/). Element button color “Default” option, which mean Light Gray, is only one of the five predefined colors alongside with Black, Primary, Alternative and White (https://prnt.sc/1mtbgsu).

Button element color option is not related to the theme settings buttons styles options and need to be changed separately. If you want to change button element styles like you set in theme settings, you need to use custom color option. If you want to change all “Default” color button elements to the values specified in theme settings, try to add the following code snippet to the Custom CSS area in Theme Settings:

.website-wrapper .btn.btn-style-default.btn-color-default {
    color: var(--btn-default-color);
    box-shadow: var(--btn-default-box-shadow);
    background-color: var(--btn-default-bgcolor);
}

.website-wrapper .btn.btn-style-default.btn-color-default:hover {
		color: var(--btn-default-color-hover);
    box-shadow: var(--btn-default-box-shadow-hover);
    background-color: var(--btn-default-bgcolor-hover);
}

Kind Regards

You should post this in the documentation. THIS i really helpful and makes clear what this section is for.

Thank you!

Is there a place, where i can configure the box shadow? (–btn-default-box-shadow)

There is no option to add shadow to the buttons in our theme. Box-shadow property in our buttons used for making 3D button effect in the corresponding button design “3D Button” (https://gyazo.com/559c739b94f57f5483bc5461d9b70e28). In case if you use Default (Flat) button design, box-shadow property by default is disabled (box-shadow: none).

If you want to add box shadow to all “Default” buttons from theme settings, you can overwrite the variable value in the styles root by using the following code:

:root {
  --btn-default-box-shadow: 5px 5px 15px 5px rgba(0,0,0,0.3);
  --btn-default-box-shadow-hover: 5px 5px 15px 5px rgba(0,0,0,0.5);
}

If you want to add shadow only to the element “Default” (light gray) buttons, try to modify previous custom code by replacing var(--btn-default-box-shadow) var(--btn-default-box-shadow-hover) variable to the desired values. For example, like this:

.website-wrapper .btn.btn-style-default.btn-color-default {
    color: var(--btn-default-color);
    box-shadow: 5px 5px 15px 5px rgba(0,0,0,0.3);
    background-color: var(--btn-default-bgcolor);
}

.website-wrapper .btn.btn-style-default.btn-color-default:hover {
    color: var(--btn-default-color-hover);
    box-shadow: 5px 5px 15px 5px rgba(0,0,0,0.5);
    background-color: var(--btn-default-bgcolor-hover);
}

It would be very kind of you if you could change your rating on ThemeForest while your issues are sorted out. Thank you in advance.

Kind Regards

[Author]

Posts