Add a css styles in the "Styles" drop-down menu tools

[blaouchez]

Hi,
In the bar of editing articles / pages, how to add a css styles in the “Styles” drop-down menu tools (like “Impact text”).
Pierre

[Kyle – SUPPORT]

Please see: http://support.swiftideas.net/forums/topic/styles-for-swift-page-builder/#post-63561

🙂

– Kyle

[blaouchez]

In theme> flexform> include, I find good “shortcode.php” but your example code does not appear

[Kyle – SUPPORT]

Sorry, for flexform you need to add this code to the child theme functions.php file, if you are not using a child theme, you can add it to the functions.php file however it will be overwritten when you update.

 function sf_custom_mce_styles( $init ) {
        $init['theme_advanced_buttons2_add_before'] = 'styleselect';
        //First, we define the styles we want to add in format 'Style Name' => 'css classes'
        $classes = array(
            __('Impact Text', 'swift-framework-admin')     => 'impact-text',
            __('Impact Text Large', 'swift-framework-admin')     => 'impact-text-large',
        );
    
        //Delimit styles by semicolon in format 'Title=classes;' so TinyMCE can use it
        if ( ! empty($settings['theme_advanced_styles']) )
        {
            $settings['theme_advanced_styles'] .= ';';
        }
        else
        {
            //If there's nothing defined yet, define it
            $settings['theme_advanced_styles'] = '';
        }
    
        //Loop through our newly defined classes and add them to TinyMCE
        $class_settings = '';
        foreach ( $classes as $name => $value )
        {
            $class_settings .= "{$name}={$value};";
        }
    
        //Add our new class settings to the TinyMCE $settings array
        $settings['theme_advanced_styles'] .= trim($class_settings, '; ');

        return $init;
    }
     
    add_filter('tiny_mce_before_init', 'sf_custom_mce_styles');
     
    function sf_mce_css() {
        return get_template_directory_uri() . '/css/editor-style.css';
    }
     
    add_filter( 'mce_css', 'sf_mce_css' );

Hope this helps

– Kyle