Styles for Swift Page Builder Text Block

[smotive]

If i edit a text-block using Swift Page Builder, i see the combo-box “Styles” which has one element “Impact Text”.

How can i add additional text style definitions to this combo-box to be used as predefined text styles?

Thank you

[Ben – SUPPORT]

What would you like changed? I’m not sure what you mean exactly

Sorry.

Thanks
Ben

[smotive]

See the screenshot. How can I add more styles to the text-editor?

Thank You

[pdupree]

I have the same question, using Dante.

[Kyle – SUPPORT]

Hi

Open up shortcodes.php and go to line 40 and find this:

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',
        );

Just add another line in for e.g:

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',
            __('My Custom Text', 'swift-framework-admin')     => 'my-custom-text',
        );

Then you can add the css for .my-custom-text in your custom css.

– Kyle

[blaouchez]

This would be perfect but includes> shotcode.php, I do not see this code (see screenshot)
Thanks
Pierre

[Kyle – SUPPORT]

Ahh sorry, it’s different for flexform. We do this by adding some simple code to the functions.php file, or even better if you are using a child theme add it to your child theme’s function.php file:

 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' );

– Kyle

[blaouchez]

Perfect, thank you Kyle!

But it would be great to use in the theme function.php child page but I have an error message It would be great to use in the theme a function.php child page but I have an error message
“Fatal error: Cannot redeclare sf_enqueue_styles() (previously declared in /homez.764/storrera/www/site/wp-content/themes/flexform-child/functions.php:132) in /homez.764/storrera/www/site/wp-content/themes/flexform/functions.php on line 161”

Pierre

[Kyle – SUPPORT]

Ok I will get the developer to check this for you

– Kyle