• Resolved silvestroilgatto

    (@silvestroilgatto)


    Hi there,
    Still experimenting with the latest development version of Kirki, I’ve noticed that when using the slider to adjust the font size in the Customizer, as Aristeides did in his post

    http://aristeides.com/blog/build-wordpress-theme-using-kirki/

    I’don’t get the preview of the changes. I looked into the source code in the Customizer preview page, and saw an empty inline style="" being applied to the HTML element, but no style value was injected. I made sure that the 'property' => 'font-size', was specified correctly.

    However, once I leave the Customizer, I can see the change taking place.

    Any help for this is greatly appreciated, thank you so much!

    https://ww.wp.xz.cn/plugins/kirki/

Viewing 8 replies - 1 through 8 (of 8 total)
  • Hey there,

    you can see an example for font-size at the very bottom of the Google Fonts Integration wiki page. 😉

    Please ping me of more help is required,
    Dimitris

    Thread Starter silvestroilgatto

    (@silvestroilgatto)

    Hey Fovoc,
    Thanks for your reply. In the development version, the font-size takes effect: the modification is saved and displayed. However, the preview is not working.

    In the stable version here on the repo, the slider doesn’t display any modifications both on the preview page and out of the Customizer panel.

    Thanks!

    I just updated the wiki page in github. Can you re-try now?
    I appended the transport and js_vars arguments for live previewing. 🙂

    FYI: transport & js_vars

    Thread Starter silvestroilgatto

    (@silvestroilgatto)

    Hey Dimitris,

    Got the latest development version from the GitHub repo and still get the same result: no preview but new font size value is saved and displayed outside of the Customizer preview. Here’s the code I used:

    $fields[] = array(
            'type'        => 'slider',
            'setting'     => 'prefix_font_size',
            'label'       => __( 'Font-Size', 'textdomain' ),
            'description' => __( 'Please choose a font-size.', 'textdomain' ),
            'section'     => 'prefix_typography',
            'default'     => 1,
            'priority'    => 20,
            'choices'     => array(
                'min'  => .7,
                'max'  => 2,
                'step' => .01
            ),
            'output'        => array(
                array(
                    'element'  => 'body',
                    'property' => 'font-size',
                    'units'    => 'em',
                ),
            ),
            'transport'   => 'postMessage',
            'js_vars'     => array(
                array(
                    'element'  => 'body',
                    'function' => 'css',
                    'property' => 'font-size',
                ),
            ),
        );

    Cheers!

    Hey there,

    you should use the units argument in js_vars too. Can you try and let me know how that goes?

    Cheers,
    Dimitris

    Thread Starter silvestroilgatto

    (@silvestroilgatto)

    Yes, Dimitris, that was it! It works perfectly, thank you 🙂

    Glad to hear about it!
    Keep in mind the units attribute in CSS declarations that actually need one and you should be fine.

    Thanks as always,
    Dimitris

    Thread Starter silvestroilgatto

    (@silvestroilgatto)

    I go ahead and close this. Thank you, fantastic support!

Viewing 8 replies - 1 through 8 (of 8 total)

The topic ‘Font Size’ is closed to new replies.