Text Block Formats

[abovecreative]

Hi

Is there a way to add more styles to the Formats drop down in the Text Block element, currently there are two Impact Text & Impact Text Large. Would like to add some others, would like to add it to the child themes functions but not sure what I would need to add as I guess it already exists in the main themes function file.

[Melanie – SUPPORT]

Hi,

hm well yeah in sf-shortcodes.php you can find the array where it says

	function sf_custom_mce_styles( $args ) {

so you could enhance

		$style_formats = array (
		    array( 'title' => 'Impact Text', 'selector' => 'p', 'classes' => 'impact-text' ),
		    array( 'title' => 'Impact Text Large', 'selector' => 'p', 'classes' => 'impact-text-large' )
		);

by your styling.

Then you would probably need to also enhance

						'output' => array('h1,.impact-text,.impact-text-large'), // An array of CSS selectors to apply this font style to dynamically
						'compiler' => array('h1,.impact-text,.impact-text-large'), // An array of CSS selectors to apply this font style to dynamically

in sf-options.php

and add the css to editor-style.css

I did not test that however but you can try it! 🙂

[Swift Ideas – Ed]

Hi there,

Just had a quick google and found this: https://gist.github.com/mrwweb/9937127

May be easier for you to use something like that?

– Ed

[abovecreative]

This is what i’ve done which works fine but I have to remove the code from sf-shortcodes.php, not a problem as it only takes a minute but wonder if there is a way of removing/overriding the parent function in the child for future updated, i’ve tried using various remove/add filters but not succeeded!!

This is the code I have in my child functions…

function themeit_mce_buttons_2( $buttons ) {
	array_unshift( $buttons, 'styleselect' );
	return $buttons;
}
add_filter( 'mce_buttons_2', 'themeit_mce_buttons_2' );
function themeit_tiny_mce_before_init( $settings ) {
	$style_formats = array(
		array( 'title' => 'Intro Text', 'inline' => 'span', 'classes' => 'introtext' ),
		array( 'title' => 'Title', 'inline' => 'span', 'classes' => 'title' ),
		array( 'title' => 'Impact Text', 'selector' => 'p', 'classes' => 'impact-text' ),
		array( 'title' => 'Impact Text Large', 'selector' => 'p', 'classes' => 'impact-text-large' )
	);
	$settings['style_formats'] = json_encode( $style_formats );
	return $settings;
}
add_filter( 'tiny_mce_before_init', 'themeit_tiny_mce_before_init' );

function custom_excerpt_length( $length ) {
	return 16;
}
add_filter( 'excerpt_length', 'custom_excerpt_length', 999 );

[Kyle – SUPPORT]

Hi

Did you try the suggestion from Ed?

– Kyle

[Swift Ideas – Ed]

Hi @abovecreative,

I’ll add function_exists wrappers around the default theme functions, that way you can override them in the child theme without having to remove them. This will be in the next update, but happy to send it to you sooner if needed!

– Ed

[abovecreative]

Cheers, no rush so next update will be great. Thanks.

[Swift Ideas – Ed]

Just change the function names to match the theme’s function names, that way they will override correctly.

Happy to help!

– Ed