Custom styles in tiny_mce editor

Additional functions in functions.php of the child theme (instead of  a plugin like TinyMCE Custom Styles):

// Prepare tiny_mce for custom styles – Attach callback to ‚tiny_mce_before_init‘
add_filter( ‚tiny_mce_before_init‘, ‚my_custom_styles‘ );

function custom_editor_styles() {
add_editor_style(‚editor-styles.css‘);
}

add_action(‚init‘, ‚custom_editor_styles‘);

//add custom styles menu
function add_style_select_buttons( $buttons ) {
array_unshift( $buttons, ’styleselect‘ );
return $buttons;
}
// Register our callback to the appropriate filter
add_filter( ‚mce_buttons_2‘, ‚add_style_select_buttons‘ );

//add custom styles to the WordPress editor
function my_custom_styles( $init_array ) {

$style_formats = array(
// These are the custom styles
array(
‚title‘ => ‚Inhaltsseiten-Haupttitel‘,
‚block‘ => ‚div‘,
‚classes‘ => ‚inhaltsseiten-haupttitel‘,
‚wrapper‘ => true,
),
array(
‚title‘ => ‚Inhaltsseiten-Zwischentitel‘,
‚block‘ => ‚div‘,
‚classes‘ => ‚inhaltsseiten-zwischentitel‘,
‚wrapper‘ => true,
),
array(
‚title‘ => ‚Inhaltsseiten-Lauftext‘,
‚block‘ => ‚div‘,
‚classes‘ => ‚inhaltsseiten-lauftext‘,
‚wrapper‘ => true,
),
array(
‚title‘ => ‚Inhaltsseiten-Liste‘,
‚block‘ => ‚div‘,
‚classes‘ => ‚inhaltsseiten-liste‘,
‚wrapper‘ => true,
),
);
// Insert the array, JSON ENCODED, into ’style_formats‘
$init_array[’style_formats‘] = json_encode( $style_formats );

return $init_array;

}

 

styles in editor-styles.css of the child theme (renamed styles from style!)

.inhaltsseiten-haupttitel {
font-family: Hind !important;
font-size: 26px !important;
}

.inhaltsseiten-zwischentitel {
font-family: Hind !important;
font-weight: bold !important;
font-size: 15px !important;
margin-top: 25px !important;
}

.inhaltsseiten-lauftext {
font-family: Hind !important;
font-size: 15px !important;
}

.inhaltsseiten-liste {
font-family: Hind !important;
font-size: 15px !important;
list-style: none;
padding-left: 0;
}

.inhaltsseiten-liste > li {
margin-left: 15px;
}

/* Prevent nested li’s from getting messed up */
.inhaltsseiten-liste > li::before {
content: „-„;
margin-left: -15px;
}

 

CSS for the Layout Inhaltsseiten Beaver Themer Layout

(used em instead of px to be dynamic with Zeno Font Resizer)

.inhaltsseiten-haupttitel {
font-family: Hind !important;
font-size: 1.75em !important;
}

.inhaltsseiten-zwischentitel {
font-family: Hind !important;
font-weight: bold !important;
font-size: 1.0525em !important;
margin-top: 1.5em !important;
margin-bottom: -.575em;
}

.inhaltsseiten-lauftext {
font-family: Hind !important;
font-size: 1.075em !important;
}

.inhaltsseiten-liste {
font-family: Hind !important;
font-size: 1.075em !important;
padding-left: 0;
}

/*list style for dashed lists in the text*/
ul {
list-style-type: none !important;
margin-left: -1.5em !important;
}

ul li:before {
content: „\2014\a0“ !important;
position: absolute !important;
/*change margin to move dash around*/
margin-left: -1em !important;
}

/*undo list style for menu and submenu*/
.fl-menu ul {
list-style: none !important;
margin-left: 0em !important;
}

.fl-menu ul li:before {
content: „“ !important;
position: absolute !important;
}