How to make TinyMCE wysiwyg editor notice CSS?

  • maisteriharju

    (@maisteriharju)


    15 years, 9 months ago

    Hi,

    I want to add special button/function to TinyMCE. A button which adds custom tabs and content within those tabs to the post. The tabs I wanted to use are shown here: http://www.dynamicdrive.com/dynamicindex17/tabcontent.htm

    If I could get those tabs to show up in TinyMCE/Wysiwyg window of the editor, I could add some content in them. When I add the tabs as a code

    <h3>Demo #1- Basic implementation</h3>
<ul id="countrytabs" class="shadetabs">
	<li><a class="selected" rel="country1" href="#">Tab 1</a></li>
	<li><a rel="country2" href="#">Tab 2</a></li>
	<li><a rel="country3" href="#">Tab 3</a></li>
	<li><a rel="country4" href="#">Tab 4</a></li>
	<li><a href="http://www.dynamicdrive.com">Dynamic Drive</a></li>
</ul>

    from CODE view of editor, they show up as a plain list. The editor window doesn’t read the theme CSS.

    So the problem is that I just can’t figure out how to get those tabs show up in TinyMCE/Wysiwyg editor because it seems like the editor window doesn’t apply any CSS at all.

    I have added the needed CSS propably to all the CSS files I’ve found from the core of WordPress. All theme CSS files, all TinyMCE CSS files, all admin side CSS files – and nothing works. Of course there may be slip ups so I may have missed the right CSS file since there seems to be a lot of CSS files which control the look of the admin side.

    When I look at the source code of editor page I can find only these CSS files from there:

    wp-admin/css/global.css
    wp-admin/wp-admin.css
    wp-admin/css/colors-fresh.css
    wp-admin/css/ie.css
    wp-includes/js/thickbox//thickbox.css

    Any of those files doesn’t make any difference to the content of the Wysiwyg-editor.

    Even if I “hardcode” the CSS to the admin-header.php the CSS doesn’t make any difference. On the other side (in the actual post), the CSS works and those tabs look ok. But I can’t add any content in them because I cannot see them in admin side.

    I’m making this function to my client who doesn’t know how to code so coding the content in those tabs isn’t an option.

    Anyone knows where is the css file which actually is connected to the editor window? Or doesn someone have any other ideas how to make this thing work?

Viewing 4 replies - 1 through 4 (of 4 total)
  • Thread Starter maisteriharju

    (@maisteriharju)

    15 years, 9 months ago

    Some progress. I found a way to have the WordPress theme CSS in the WYSIWYG-editor: http://blog.starenka.net/javascript/2007-12-23-tinymce-wordpress-using-theme-css

    In case that website disappears for some reason or another I copy the instructions here also:

    Locate your TinyMCE config file in /wp-includes/js/tinymce/tiny_mce_config.php. Now open it (f.e with Notepad++ ) and search for “content_css”. This property points to CSS used for displaying the WYSIWYG textarea content. You can either edit the CSS to suit your needs or link your theme CSS instead. To link current theme CSS change the line to show: content_css : “<?php bloginfo(‘stylesheet_url’); ?>”,

    Problem is that still the tabs aren’t working in the WYSIWYG screen. I still get the list instead of tabs. I don’t know why the CSS doesn’t get through. Fonts and other stuff works alright, the CSS has effect on them. This is weird.

    Thread Starter maisteriharju

    (@maisteriharju)

    15 years, 9 months ago

    I found a perfect solution:
    http://pirex.com.br/wordpress-plugins/post-tabs/

    I hope I would have looked the plugins section earlier.

    baardvidar

    (@baardvidar)

    14 years, 12 months ago

    This seems to be outdated and/or in conflict with the TineMCE Advanced Pugin. At least the tiny_mce_config.php-file was not present in my installation.
    However, as I use the advanced plugin I edited the tinymce-advanced.php-file. I found

    if ( $tadv_options['importcss'] == '1' )
	$wp .= ',' . get_bloginfo('stylesheet_url');

    in the original file and edited it to

    if ( $tadv_options['importcss'] == '1' )
	$wp .= ',' . 'http://your_theme_url/wysiwyg.css';

    I put in selected css from my theme into the wysiwyg.css and turned on the “import the current theme CSS classes”-option. Voilá! There might be a better php-code to achieve this, but I’m not too good at php.

    bolemo

    (@bolemo)

    14 years, 11 months ago

    nice trick baardvidar,

    You can replace
    $wp .= ',' . 'http://your_theme_url/wysiwyg.css';
    by
    $wp .= ',' . get_bloginfo('template_url') . '/wysiwyg.css';

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘How to make TinyMCE wysiwyg editor notice CSS?’ is closed to new replies.