Global Colors and Fonts class not being picked up on frontend, unexpectedly drops in editor.

[itslkc]

Prerequisites

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

Description

All changes to the Global Fonts and Colors.elementor-kit-162 are updated in the style sheet, but the elements that are supposed to inherit those declarations are not receiving them. Tried to regenerate CSS, tried checking and unchecking Disable Default Colors/Fonts, tried themes: Hello, Astra, TwentyTwenty. No improvements with results.

The class that is used to pick up the declarations from Global Colors and Fonts is not being applied on the front end. When an element such as H1 has Global Colors and Fonts the class .elementor-kit-162 h1 is supposed to define the way it renders, but that class is not found. (See screen recording https://youtu.be/bQFDxer0Ih4?t=102)

In the Elementor editor the class that associates the Global Colors and Fonts to the applied element .elementor-kit-162 h1 is dropped by simply navigating to Site Settings > Global Colors. (See screen recording https://youtu.be/bQFDxer0Ih4?t=127)

Steps to reproduce

After Global Colors and Fonts have been applied to body, H1, H2,...Update. Navigate to Site Settings > Global Colors. (See screen recording https://youtu.be/bQFDxer0Ih4?t=127)

Isolating the problem

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

Environment

System Info

== Server Environment == Operating System: Linux Software: LiteSpeed MySQL version: MariaDB Server v10.3.23 PHP Version: 7.4.9 PHP Max Input Vars: 10000 PHP Max Post Size: 512M GD Installed: Yes ZIP Installed: Yes Write Permissions: All right Elementor Library: Connected == WordPress Environment == Version: 5.5 Site URL: https://stage.leonelcalara.com Home URL: https://stage.leonelcalara.com WP Multisite: No Max Upload Size: 512 MB Memory limit: 1G Permalink Structure: /%postname%/ Language: en-US Timezone: America/Los_Angeles Debug Mode: Inactive == Theme == Name: Hello Elementor Version: 2.3.0 Author: Elementor Team Child Theme: No == User == Role: administrator WP Profile lang: en_US User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/85.0.4183.83 Safari/537.36 == Active Plugins == Elementor Version: 3.0.5 Author: Elementor.com Elementor Pro Version: 3.0.2 Author: Elementor.com == Elements Usage == header : 2 heading : 3 nav-menu : 1 theme-site-logo : 1 wp-page : 2 button : 1 heading : 6 text-editor : 1 == Log == Log: showing 7 of 72020-08-31 10:05:02 [notice] Re-migrate 3.0.0 globals: Start 2020-08-31 10:05:02 [notice] Re-migrate 3.0.0 globals: _v_3_0_0_move_default_typography_to_kit 2020-08-31 10:05:02 [notice] System typography is disabled. nothing to do. 2020-08-31 10:05:02 [notice] Re-migrate 3.0.0 globals: _v_3_0_0_move_default_colors_to_kit 2020-08-31 10:05:02 [notice] System colors are disabled. nothing to do. 2020-08-31 10:05:02 [notice] Re-migrate 3.0.0 globals: _v_3_0_0_move_saved_colors_to_kit 2020-08-31 10:05:02 [notice] Re-migrate 3.0.0 globals: End PHP: showing 1 of 1PHP: 2020-08-31 10:05:02 [notice X 1][/home/nelcalara/stage.leonelcalara.com/wp-content/plugins/elementor/core/common/modules/ajax/module.php::171] Undefined index: data [array ( 'trace' => ' #0: Elementor\Core\Logger\Manager -> shutdown() ', )] ``` ```

[mcrowell]

+1

[benjimckinney]

Also experiencing this issue. CSS is effectively broken across several WP/Elementor project websites.

[oliveandlake]

Same here

[Neptuneking]

Same here, super problematic

[MichaelDarko]

+1

[joeFordTheNerd]

+1 It is utterly devastating if you update the page once it's started doing this. I've now lost all my column background colours and all styling down the page to this.

It's fine in the backend editor but the frontend almost seems like it's ignoring the editors styles and resorting to defaults.

Will a rollback work from v3?

[thehervy]

+1

[fabigrafo]

+1

[Merlin1987]

+1

[kokolita]

+1 Experiencing this on several sites with the Hello Elementor theme.

[rodolphebertozzo]

+1

[benjimckinney]

Things I have tried to fix the issue:

1. Toggled the "Disable Default Colors" and "Disable Default Fonts" from the Elementor Settings in dashboard.
2. Tried to reset all the Global colors and fonts in Elementor.
3. Tried to rollback to earlier version of Elementor.
4. Submitted Pro Subscriber help tickets
5. Reported the issue on YouTube & Facebook Elementor channels.

None of the above resolved any of my CSS issues. However, I have been able to successfully work around the issue by manually changing the style color, and font of every text item on the page. Of course, this is very inefficient and defeats the purpose of "global" styling. I manage over 30 WP sites. Most of these have been affected by this issue. I am an Elementor Pro Subscriber and my websites are primarily built on the Twenty Twenty WP theme.

[benjimckinney]

I can also confirm that following the suggested "fix" by migrating the styles from older version does NOT work. On Elementor's Twitter and changelog they are suggesting to do the following:

"We added an option to re-migrate Global Colors and Fonts from earlier Elementor versions. To see it go to Elementor > Tools > Version Control > Rerun Update Script, and click Migrate to V3. This button re-migrates the data from the old site - and deletes the new stored values. Please note that this process will revert all changes made to Global Colors and Fonts since upgrading to v3.x."

I did not find this helpful but maybe someone else has tried it and had better outcome?

[jonathansoltero]

I changed the defaults and the defaults are still being used, it looks like in general the colors chosen in Elementor are being shown in front end as defaults, if it wasn't for my theme having its own color picker my site would be a rainbow.

[melvin-lim]

+1

[HEFEROCE]

+1 (with astra theme)

[itslkc]

With WordPress core 5.5.1, problem still persists.

[tobias-sparks]

+1 Hello Elementor theme

[GiuMagnani]

+1

[markc]

+1 Nothing new to add, similar problems as previously outlined. I have many broken sites and much anger from clients. My only option is to quickly redo some smaller sites with Brizy while we wait for a fix.

[Simpa77]

+1 Hello Elementor theme

[heyfletch]

Same problem. Further: colors all work in the Elementor interface. On the frontend, sometimes they work and sometimes they don't. It seems to work immediately after making a color change and saving, and possibly regenerating CSS. However, after some time, seemingly randomly, the colors stop showing on the frontend.

In Issue https://github.com/elementor/elementor/issues/12357, they mention:

When you don't have a caching plugin enabled the frontend of the website doesn't match the backend editor when using the new Design System global styles. When you enable a caching plugin and clear the cache the frontend renders correctly.

Anyone else with experience using a caching plugin to help this?

[benjimckinney]

I have tried several cache plugins and they do not seem to affect the problem at all. There seems to be a disconnect with the Elementor Stylesheet. The references to "global" style fields are completely stripped out on the frontend for the majority of text elements on my websites. This does not seem to be a caching issue. I've cleared the WP cache (with plugins), cleared browser cache, and regenerated CSS with the Elementor tools...but still the problem persists.

I think the latest version of Elementor changed the way core global stylings are called to. Which literally broke much of the styling on the website. If you style the elements manually (meaning that you manually select a font, color, etc), you can repair each element individually. You can likely revert to ancient methods and add a new CSS class then create your own stylesheet to control them globally.

[mcrowell]

I used the caching plugin Cache Enabler (https://wordpress.org/plugins/cache-enabler/) and can get these global styles to "stick" on the frontend. I haven't tried any other caching plugins.

[fghg]

+1 using Hello Child theme - SiteGround hosting.

I managed to get some part working properly (the Colors and Typography set in the backend showing correctly in the front-end) by deactivating the theme colors & fonts in the Elementor setting menu (which is not what I want). Then I removed all global used colors by pressing the Delete button in the color picker object of each item and pasted the color code of the former set global color. Then it worked for me. (Note: I also deactivated SiteGround plugin, deactivated caching, rebuild CSS).

I am also encountering issues with missing styles using Ultimated Addons for Elementor, the Gravity form styler. Some elements do not get any styling (like the List element) resulting in huge + and - icons. Some styles seems to be fed by the Form styler of Elementor, even if that should be inactive due to the Theme style setting.

I am not working on a client site, just a new site I am launching for ourselves. I can imagine if you have many client sites having these issues it could be devastating.

[skompini]

This IS devastating. I'm literally on the cusp of launching a website building/branding training business that is built entirely around Elementor. Now all my template and demo sites are in jeopardy and I'm having to warn everyone NOT to upgrade. My clients are non-techie, non-coders so they would naturally question my credibility when recommending Elementor as their answer to their website building dreams. All I teach them is how to brand their template using global colors and fonts, etc. and this is completely negating the experience. I basically have to put my business on hold until this is rectified. Why fix something that wasn't broken?? This problem has NOT been fixed in 3.0.4 or 3.0.5 as claimed. Everything related to branding a site is falling to system/browser defaults unless you brand every single element in every single page or post. It's ridiculous.

[heyfletch]

Good news they appear to be aware and working on this. They added the bug label a few hours ago, and one of their senior developers introduced a commit that hopefully solves it. That would be great.

[benjimckinney]

I have tested this on one of my websites and it SOLVES the issue. Going to test on more of my sites : FINGERS-CROSSED:

[https://github.com/matipojo/elementor/commit/fc66e384473809d1f01de0271b823fdf7478574e]

[itslkc]

With the change to line 113 in css-manager.php, things are a little more predictable in the Elementor editor. But frontend problems still persist.

[benjimckinney]

@whokneadsdough Yes. Unfortunately, it has not worked on some of my other websites. Not sure if it is getting cached somewhere else or if there are other plugins that may be conflicting. It does seem to work with a new development using Twenty Twenty theme and no other plugins. 🤷🏻‍♂️

[ridinghoodmedia]

+1, but this strange caching issue has been happening for about 2 months in different forms. Currently, I'm loading an elementor template on blog posts using the elementor shortcode. In the editor, the template looks fine. But on the frontend, you can see in the html the