By using Elementorforum.com’s services you agree to our Cookies Use and Data Transfer outside the EU.
We and our partners operate globally and use cookies, including for analytics, personalisation, ads and Newsletters.

  • Join the Best Unofficial Elementor Support forum

    Provide or get advice on everything Elementor and Wordpress, ask questions, gain confirmation or just become apart of a friendly, like minded community who love Wordpress and Elementor


    Join us!
elementor official

validator w3 org error coming from elementor

smolikas

smolikas

New Member
Hi everyone, I am trying to validate my website using validator w3 org and there is an error coming from elementor that I cannot resolve.
The error is

`Error: CSS: Parse Error.
At line 106, column 681
-bottom:20px;}{}h1.entry-title`

The error is coming from these empty brackets {} after the part 20px;}

After inspecting my website from developer tools I found out that this is being generated inside the `.elementor-frontend-inline-css` . I also ran the following query to my database `SELECT * FROM wp_postmeta WHERE meta_value LIKE '%20px;}{}h1%' and it returned 1 row that has a reference by ID to another row in the wp_posts table. So I searched for that ID in the posts table and I got the result of that row which has as post_title "Default kit" and post_type "elementor_library"

I tried modifying the row containing the empty brackets but when I refresh (F5) my website the row in the database is rolling back and generates again the empty brackets. I tried deleting both rows from postmeta and posts table and on page refresh, both rows get generated again with new IDs.

So in order to find the root of this and remove these empty brackets {} where should I look for? Is it something that I should look for and change from WP admin panel? Where is that default kit and how can I modify its inline css to remove these brackets? Any suggestions? Thank you.
 

Attachments

  • Capture.JPG
    Capture.JPG
    82.1 KB · Views: 10
smolikas

smolikas

New Member
In case anyone runs into this same problem, I will just share the solution that I've found to remove the empty brackets from the code.

In the wp-includes/class.wp-styles.php file, in the do_item() method, there is an inner function called print_inline_style(),which generates inline styles according to css classes. These classes are retrieved in the code from a variable called $handle and each handle has its own $output, where the $output contains a string of all inline styling. So by console.log I came to the conclusion that the handle 'elementor-frontend' included a null style which was the {} (empty brackets) in its $output string.

To solve this, what I did was to just filter out empty brackets with a simple str_replace.
Therefore, my solution was transform this
printf(
"<style id='%s-inline-css'%s>\n%s\n</style>\n",
esc_attr( $handle ),
$this->type_attr,
$output)
);

to this

printf(
"<style id='%s-inline-css'%s>\n%s\n</style>\n",
esc_attr( $handle ),
$this->type_attr,
$handle === 'elementor-frontend' ? str_replace("{}","",$output) : $output
);

I know that this isn't the best solution and what should have been done is to prevent the empty brackets from being generated inside the $output variable in the first place but don't have the time to go that way for now.

Cheers!
 

Latest posts

Latest Resources

Other Elementor Resources

elementor official
Top