Elementor Question posted in
A comprehensive tutorial library can be found here.

Elementor – How to include global styles to elementor?

I want to learn more about elementor theme development. I have set up header.php, footer.php and index.php and created a new page via wordpress admin. I added a new widget, which show correctly in my editor, but when i publish the page, my global elementor styles are not applied. I tried searching the documentation and googling, but found nothing. I assume i need to call some elementor function to make this work. What am i missing?

For example: –e-global-color-primary is undefined

Here are my files:

header.php

<!DOCTYPE HTML>
<html>
    <head>
    </head>
    <body <?php body_class(); ?>>
    <?php wp_head(); ?>

footer.php

        <?php wp_footer(); ?>
    </body>
</html>

index.php

<?php get_header(); ?>

<?php the_content(); ?>

<?php get_footer(); ?>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I have done some extra research on this. It is a bug in elementor and is not fixed yet. I ended up doing a workaround. It is provided below if anyone needs it.

    add_action('the_content', 'load_elementor_style');

function load_elementor_style($content) {
    [
        $primary_color,
        $secondary_color,
        $text_color,
        $accent_color
    ] = get_elementor_colors();
    
    [
        $primary_font,
        $primary_font_weight,
        $secondary_font,
        $secondary_font_weight,
        $text_font,
        $text_font_weight,
        $accent_font,
        $accent_font_weight
    ] = get_elementor_fonts();
    
    $content .= sprintf(
        '
        <style>
            :root {
                --e-global-color-primary: %s !important;
                --e-global-color-secondary: %s;
                --e-global-color-text: %s;
                --e-global-color-accent: %s;
                --e-global-typography-primary-font-family: %s;
                --e-global-typography-primary-font-weight: %s;
                --e-global-typography-secondary-font-family: %s;
                --e-global-typography-secondary-font-weight: %s;
                --e-global-typography-text-font-family: %s;
                --e-global-typography-text-font-weight: %s;
                --e-global-typography-accent-font-family: %s;
                --e-global-typography-accent-font-weight: %s;
            }
        </style>
        ',
        $primary_color,
        $secondary_color,
        $text_color,
        $accent_color,
        $primary_font,
        $primary_font_weight,
        $secondary_font,
        $secondary_font_weight,
        $text_font,
        $text_font_weight,
        $accent_font,
        $accent_font_weight
    );

    return $content;
}

  2. 0

    If you look at your browser developer tools inspector and take a look at .elementor-kit-X {...} (where X is a number set by elementor) at the bottom of your CSS declarations, you’ll see all of the specified __globals__, which includes your font families as well.

    Take this control as an example:

        // Circle Color
    $this->add_control(
        'list_circle_color', [
            'label' => __('Circle Color', 'vs-elementor-elements'),
            'type' => ElementorControls_Manager::COLOR,
            'default' => __('', 'vs-elementor-elements'),
            'frontend_available' => true,
            'label_block' => true,
            'placeholder' => __('E.g. #11a0c0', 'vs-elementor-elements'),
        ]
    );

    Next, add this near the top of your protected function render(){...}: echo'<pre>';print_r($settings);echo'</pre>';

    Go into edit mode, and specify a non-global color for your list_circle_color control. Then save. Now refresh your page.

    You will see your data printed on the page resembling the following:

        (
        [control_item1] => 6000
        [control_item2] => Lorem ipsum
        [list_circle_color] => #AFE039
        [control_itemETC] => Dolor Sit Amet
    )

    You see list_circle_color set to #AFE039.

    Now go back and edit your color again, but this time select an Elementor global color. Then save. New refresh your page.

    You will see your data printed on the page resembling the following:

        (
        [control_item1] => 6000
        [control_item2] => Lorem ipsum
        [__globals__] => Array
            (
                [list_circle_color] => globals/colors?id=13c6ce9
            )
        [list_circle_color] => 
        [control_itemETC] => Dolor Sit Amet
    )

    Now how to work with this? Recall from above I mentioned that Elementor stores your globals inside .elementor-kit-N {...}? Here is a reference at w3schools.

    But how do you get the value set by globals/colors?id=13c6ce9? You can do this using PHP’s str_replace, as in the following:

    $list_circle_color_global = $setting['__globals__']['list_circle_color'];
$list_circle_color_global = str_replace('globals/colors?id=','--e-global-color-',$list_circle_color_global);

    This will give you the var with the full property ending that you need, as in:

    --e-global-color-13c6ce9

    Now assign either via an internal spreadsheet in your widget, or as an inline style:

    .mycircle{ background-color: <?php echo 'var(' . $list_circle_color_global . ')'; ?>; }

    Lastly, how do you check to see if you are using a global or a non-globally set color value? Check __globals__ and list_circle_color using a simple if condition:

    $circlecolor = $list_circle_color_global ? 'var(' . $list_circle_color_global . ')' : $list_circle_color;

    ** $list_circle_color should be set when you’re specifying your variables. I excluded that before. When you specified $list_circle_color_global initially above, you would also create $list_circle_color = $settings['list_circle_color'];

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search