In the toolbar, how to add custom css styles?

[blaouchez]

Hello,

Very very important question for me:

In the toolbar, how to add custom css styles?

I tested Tynie MCE but it does not work.

Is there an alternative ???

Best regards

[Kyle – SUPPORT]

Hi

You would have to edit functions.php for that, and you would need knowledge of php. The lines are

function custom_mce_styles( $init ) {
	    $init['theme_advanced_buttons2_add_before'] = 'styleselect';
	    $init['theme_advanced_styles'] = 'Impact Text=impact-text';
	    return $init;
	}

on 584

– Kyle

[blaouchez]

This code does not work because we can not have access to the admin.

I found another code on : http://www.wpexplorer.com/wordpress-tinymce-tweaks/

// Add new styles to the TinyMCE "formats" menu dropdown
if ( ! function_exists( 'wpex_styles_dropdown' ) ) {
	function wpex_styles_dropdown( $settings ) {

		// Create array of new styles
		$new_styles = array(
			array(
				'title'	=> __( 'Custom Styles', 'wpex' ),
				'items'	=> array(
					array(
						'title'		=> __('Theme Button','wpex'),
						'selector'	=> 'a',
						'classes'	=> 'theme-button'
					),
					array(
						'title'		=> __('Highlight','wpex'),
						'inline'	=> 'span',
						'classes'	=> 'text-highlight',
					),
				),
			),
		);

		// Merge old & new styles
		$settings['style_formats_merge'] = true;

		// Add new styles
		$settings['style_formats'] = json_encode( $new_styles );

		// Return New Settings
		return $settings;

	}
}
add_filter( 'tiny_mce_before_init', 'wpex_styles_dropdown' );

The custom style menu appears fine but I do not know where it should define css style so that they appear in the style submenu.

Attachments:

You must be logged in to view attached files.

[Mohammad – SUPPORT]

Hi,
I am glad that you managed to resolve the issue. Thanks for sharing the solution.
With Best Regards
Mohammad

[blaouchez]

Sorry but it does not work properly 🙁

[Kyle – SUPPORT]

Go to flexform/css/editor-style.css

– Kyle

[blaouchez]

It does not work. Along all parameters (screenshot)
Thank you very much for your patience !!

Attachments:

You must be logged in to view attached files.

[Kyle – SUPPORT]

If you’re using a 3rd party plugin for the custom styles then I’m afraid we can’t support for it. We can only support you if you are using our theme’s method which I mentioned above

– Kyle

[blaouchez]

OK to use your solution.

I deleted everything (plugin, code in function.php) and the edito-style.css file is in the “css” folder

I do not see new styles in the toolbar

[Kyle – SUPPORT]

You deleted the editor-style.css file? Why? This is a theme file.

From the beginning, all you need to do is add more custom styles in functions.php, then for the css of those styles go to editor-style.css and add the css

– Kyle

[blaouchez]

No, no, I did not delete any files in the theme. editor-style.css is ok

What is the code to add styles in function.php?

[Rui Guerreiro – SUPPORT]

Add this to the functions.php

function custom_mce_styles( $init ) {
        $init['theme_advanced_buttons2_add_before'] = 'styleselect';
        $init['theme_advanced_styles'] = 'Impact Text=impact-text';
        return $init;
    }

add_filter( 'tiny_mce_before_init', 'custom_mce_styles'  );

-Rui

[blaouchez]

Thank you but if I paste this code in function.php, WordPress admin no longer displayed (white screen)

[blaouchez]

can you still help me on this very important issue?

That’s what I miss for my successful site;)

[Rui Guerreiro – SUPPORT]

This reply has been marked as private.