Theme styles issues

[brettredvers]

Prerequisites

• I have searched for similar issues in both open and closed tickets and cannot find a duplicate.
• The issue still exists against the latest stable version of Elementor.

Description

Using Astra Pro

Theme Styles have a few issues:

1. Button border radius and padding does not work
2. Headings - line height not working
3. Cannot use theme customizer typography settings - even with Disable Default Colors and Disable Default Fonts options selected.

Steps to reproduce

Try the above options with Astra Pro as the theme.

Isolating the problem

• This bug happens with only Elementor plugin active (and Elementor Pro).
• This bug happens with a default WordPress theme active.
• I can reproduce this bug consistently using the steps above.

Environment

System Info

``` Cloudways, Vultr server ```

[shilo-ey]

Hi @dollhauss

Thanks

1. Can't reproduce with Astra (Pro is their plugin, Theme Style addresses general CSS rules, and Elementor basic elements. if no consideration made from Astra side - it won't work and this is the expected behavior)
2. Thanks.
3. Please elaborate, what is not working with your customizer? why would you like to change there? the Theme Style feature is supposed to override the basic customizer features.

[brettredvers]

Hi @shilo-ey

Thanks for your reply.

1. I will bring this up with Astra support
3. If I don't want Elementor to take control - and to leave all theme styles with my theme in the customizer - this is not possible. The update breaks all interaction with the customizer.
   This is mostly an issue with current sites that use customizer styles. If I update, the site fonts all change to default Roboto (yet Roboto is not set anywhere).

To clarify - if you tick the Disable Default Colors and Disable Default Fonts options - the customizer fonts are not applied - Roboto is added globally instead.

[drawcard]

Point 2) is happening with me as well, I am just using Hello Elementor + Hello Theme Child.

[tomas-eklund]

Came here to report #2 as well. The default line-height style of .elementor-widget-heading .elementor-heading-title overrides that of body.elementor-kit-12 h1.

[KestrelWild]

Same problem here. Theme style is wreaking havoc with my Astra settings. For example, I have different link colors for my primary menu than I do for my regular content. Elementor theme style is overriding that and now I can only have one link color on my site. It gets rid of my primary menu customization on desktop view. It still works on tablet and phone. Send help! :p

[monika-12]

I've come across same issue with Astra and other themes.
Theme Style adds the global CSS to the HTML Elements using the below CSS:
Eg: // Theme Style: Link color

body.elementor-kit-16 a {
    color: #FF0000;
    font-size: 24px;
}

In this case, body.elementor-kit-16 selector overrides the color of theme in the header, footer and sidebar though I have not used Elementor widgets.
Header, Footer & Sidebar are added by theme only.
This happens for all the pages built with Elementor. This breaks the overall look of the website.

In my opinion, Elememtor should not apply its CSS of Theme Style to the Theme's Header, Footer or Sidebar. Since there is no option for Site Title or Menu color in the Theme Style users are not able to change the color at all.

Eg: https://share.getcloudapp.com/JrubkKvA

Solution:

1. Ideally, Theme kit CSS should be specified to elementor widgets only. CSS could be applied by adding ".elementor" class in existing CSS
   Current: "body.elementor-kit-16 a"
   Solution: "body.elementor-kit-16 .elementor a"
2. If there is a problem with the backward compatibility, In this case, Elementor can provide a filter that can be added by the themes.

• Once this filter is added in the theme, the CSS selector for theme style - "body.elementor-kit-16 a" will change to CSS selector - ".elementor a"

[reemadsouza]

Came here to report #2 as well. The default line-height style of .elementor-widget-heading .elementor-heading-title overrides that of body.elementor-kit-12 h1.

I just want to add, this is not specific to Astra Theme. This issue occurs with OceanWP, while settings in Theme Style override OceanWP settings, it fails to override .elementor-widget-heading .elementor-heading-title. I did change to Hello Theme and it works fine though 😄

[drawcard]

I don't like using issue threads to complain about things, but in this case I really hope this gets fixed soon. It's such a fundamental feature of Elementor that is broken here, and I'm pretty surprised it's still unresolved.

[shilo-ey]

ref: #11036 fixes this issue

[black-eye]

@shilo-ey I've mentioned the same on the issue #10649 : line-height: 1 is still there, it's only applied to another element:

.elementor-heading-title {
	padding: 0;
	margin: 0;
	line-height: 1;
}

Could you pls reconsider this and remove it completely? Your solution probably fixes the problem with the Theme Styler but not the conflicts with the themes! I want my headers defined in the theme ONCE, without the need to re-defined them again in the Themer.

[shilo-ey]

The Theme Style feature allows you to set the base style rules for your site. If an element overrides this setting - just like in themes/CSS reset - it should override it.

If we will remove this setting completely we can potentially affect existing sites. therefore we replaced the selector to be a more general one.

[black-eye]

@shilo-ey I know eactly what each part of WP allows me to do and what is the cascade flow of each change.

The thing is, that Elementor's rule for line-height is breaking this flow! For no reason it sets the line height to 1em for all the header elements, no matter, what is defined in the theme or Customizer (and what is even worse, no matter what is the type of the element - header, paragraph, span, div, ...).

This is a long time issue, it's been here since early 2018. Pls see the coment from @bainternet here: #3197 (comment)

He said the very same line about the possible affection of the existing sites there. And he added that the solution would come with the Theme styler. Well the Styler is here now, but we still miss the solution.

Please take this opportunity to solve it once for all.

Possible solutions, without affecting the existing sites:

1. Get rid of line-height rule completely and notify the users, that when their headers look different, they can change it via the Themer (now, when they have this possibility). It's not a big change, Elementor has a great history of much more problematic backward compatibility changes.

2. Add an option similar to "Disable Default Fonts" and Disable Default Colors" to the settings. Something like "Disable 1px line-height" would do the trick just fine and nothing gets broken.

The point is, that Elementor shouldn't be so "Elementor-centric". Theme Styler is a nice addition for somebody, who don't want (or can't) use a theme or Customizer for defining the glogal styles. But then there are other people, who like to have their styles defined in the theme in one place and don't want to use your Styler (especially just for this one task only). For them it's a big complication.

Thanks

[drawcard]

@black-eye @shilo-ey Perhaps the second solution could be rephrased, so it becomes a checkbox that has a label like "Enable legacy CSS", and then other old CSS rules can go in there over time. And put it somewhere out of the way like in a Troubleshooting tab since only a handful of users will need to know about it, as older ways are phased out.

I really appreciate that Elementor devs are attempting to look after users whose sites would be affected with the removal of the rule. However it should also be balanced against the impact it has on new users, particularly when great new features are announced, which turn out to be broken by legacy support. So the idea of having a legacy CSS stylesheet that can be toggled on or off is a nice one.

[pegues]

Please provide a hook to allow for disabling this and other features for people that want to remove this completely from the site.

[black-eye]

One more think to consider. There are themes, which try to resolve this 1px line-height issue in their settings. One example is Page Builder Framework. They have an extra rule which overrides Elementor's default setting, so Elementor pages match their theme & customizer settings.

By this new rule you are breaking the backward compatibiliy with these themes (again).

So the best way would be to remove the line-height property, doesn't matter how:

1. Completely
2. By a checkbox in the settings
3. By a hook

Whatever suits you best, but please resolve it.

[shilo-ey]

This issue has been resolved in Elementor v2.9.9

Feel free to update

Thanks!

[black-eye]

@shilo-ey Unfortunately the conflict with the themes persists. :(

I've created a new issue for it: #11453
It's like the 6th attempt to resolve this problem. Hopefully this one will be the last one.