- This topic is empty.
-
AuthorPosts
-
July 12, 2011 at 4:37 pm #33463mrtunesMember
wow i had a real afternoon of some css combat this afternoon, trying to add some styles to the wordpress tinymce editor. there is the advanced tinymce plugin, but i think it’s a bit overkill for what i’m trying to do. any other option involved a whole lot of functions.php editing from what i can tell.
July 12, 2011 at 4:51 pm #83324TheDocMemberThe functions.php route is easy!
// custom editor styles -- create editor-style.css in your theme directory
add_editor_style();
// add style selector drop down
add_filter( 'mce_buttons_2', 'my_mce_buttons_2' );
function my_mce_buttons_2( $buttons ) {
array_unshift( $buttons, 'styleselect' );
return $buttons;
}
// add styles - more info: http://alisothegeek.com/2011/05/tinymce-styles-dropdown-wordpress-visual-editor/
add_filter( 'tiny_mce_before_init', 'my_mce_before_init' );
function my_mce_before_init( $settings ) {
$style_formats = array(
array(
'title' => 'Button',
'selector' => 'a',
'classes' => 'button'
),
array(
'title' => 'Callout Box',
'block' => 'div',
'classes' => 'callout',
'wrapper' => true
),
array(
'title' => 'Bold Red Text',
'inline' => 'span',
'styles' => array(
'color' => '#f00',
'fontWeight' => 'bold'
)
)
);
$settings = json_encode( $style_formats );
return $settings;
}July 12, 2011 at 9:26 pm #83305stevendeedsMember@TheDoc is doing it the right way. Don’t take shortcuts, and don’t be tempted to edit anything in the wp-admin folder. It will go back to default when wordpress is updated
July 14, 2011 at 8:30 pm #83184TreeTopStudioMemberWill you elaborate?
I’d like to be able to view the content in tinyMCE with my theme css styles…
Can I just add my theme css to
add_editor_style();
like so?
add_editor_style('style.css');
I also see “editor-style.css” in my theme folder – can I edit/add to this?
Thank you,
CMP.S.
I built my theme with Starkers.July 14, 2011 at 10:54 pm #83166TheDocMember@TreeTopStudio – the original poster was asking for something a little different. I accidentally included the add_editor_style function into the code that I copy/pasted.
But you’ve pretty much hit the nail on the head. Add the ‘add_editor_style();’ to your functions.php file and you can go ahead and edit the editor-style.css document in your theme folder.
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.