PDA

View Full Version : Show CSS Styles in Editor


karks88
11-23-2009, 08:05 PM
One of the setbacks I'm running into is that when I'm editing a page in the Website Publisher admin, I cannot see the CSS styles for the theme inside the editor. I have added some of my own CSS classes and I would love to be able to see them reflected in the editor.

They show up on the site just fine but my client would like to be able to see exactly how something is going to look before he saves it. Is this possible?

karks88
11-24-2009, 02:27 PM
I figured this out! If you want to use your own CSS file within the TinyMCE editor, here's what you'll need to do (note that I'm using version 5.1.5 of IWP, your version may vary):

1. Find this file:
/lib/tiny_mce/editor.html

2. Find this line inside editor.html

// Example content CSS (should be your site CSS)
content_css : "{$tinyMCE.shortUrl}themes/advanced/skins/o2k7/content.css",

Replace {$tinyMCE.shortUrl}themes/advanced/skins/o2k7/content.css with a full URL to whatever CSS file you want to use.

3. Find this file:
/lib/tiny_mce/tiny_mce.php

4. Find the public $pluginList line in the code and make sure it looks like this:
public $pluginList = 'iwpcalendarmoduleplugin,iwpinsertlink,gallerymodu leplugin,moduleForm,safari,pagebreak,style,layer,t able,save,advimage,advlink,media,searchreplace,pri nt,contextmenu,paste,fullscreen,visualchars,nonbre aking,xhtmlxtras,template,inlinepopups,preview';

5. Find the public $buttons1 line and make sure it looks like this:
public $buttons1 = 'undo,redo,|,bold,italic,underline,formatselect,fo ntselect,fontsizeselect,styleselect,justifyleft,ju stifycenter,justifyright,justifyfull,|,fullscreen' ;

6. Find the public $buttons2 line (optional) and you can add a Preview button that will open up your content in a separate window. Make sure the line looks like this:
public $buttons2 = 'cut,copy,paste,pastetext,pasteword,|,cleanup,|,bu llist,numlist,|,outdent,indent,|,link,unlink,iwpin sertlink,moduleForm,anchor,image,media,table,|,for ecolor,backcolor,%%content_pagebreak%%|,code,|,sty leprops,|,preview';

7. Upload both files to your server. Enter the admin and you should see a "Styles" drop down menu on the top of the TinyMCE editor. There should be a list of different classes from your CSS file to choose from.