Closed (fixed)
Project:
Wysiwyg
Version:
6.x-2.0-alpha1
Component:
Editor - TinyMCE
Priority:
Normal
Category:
Support request
Assigned:
Unassigned
Reporter:
Created:
19 Nov 2009 at 00:42 UTC
Updated:
5 Dec 2009 at 01:20 UTC
I am using TinyMCE with the "Editor default CSS" setting, as Acquia was causing problems any other way.
I would like to make two changes to how the CSS styles my TinyMCE displays.
Primarily, I would like to change the display font, which looks like a font size 7-9 MS Sans Serif, to match mt theme.
Second I would like to change the window background color from white to a shade that matches my theme as well.
Is there any way to do this? Which CSS file(s) does "Editor default CSS" load and what might be dictating these settings?
Any help would be amazing. Thanks.
Comments
Comment #1
uomeds commentedI take it back it's almost certainly a Verdana, which is referenced in:
Any help narrowing down which one it is?
Comment #2
twodYou can determine exactly which styles are applied to an element using the Firebug extension for Firefox. It lets you right-click an element and select 'Inspect element', which will show you both the markup and relevant style rules, along with some more useful info.
The CSS options in a TinyMCE profile controls the content_css option passed when initializing the editor.
It basically works like this:
When you have set it to use 'Editor default CSS', content_css is left to its default value. Which file is loaded depends on the active theme (hardcoded to 'advanced' in Wysiwyg) and the active skin. Styles are also added by various plugins no matter what content_css is set to.
It looks like
\tinymce\jscripts\tiny_mce\themes\advanced\skins\o2k7\content.cssis used in your case. DON'T change that file as it will be replaced when updating the editor library, override those styles using your own stylesheets from your Drupal theme instead. More on that below. If you wish to make the editor contents look as close to the rendered node as possible, it's probably a better idea to set the editor to use the stylesheets from your Drupal theme instead as you would not need to override as many style rules.If you have set the option to 'Define CSS', the content_css option is simply set to whatever you put in the stylesheet list. The plugin stylesheets still apply. You could include the stylesheets from your Drupal theme, and and extra file specially crafted to override some things which don't look so good in the editor. No files from this list are added to the rendered node.
If you set the editor to use the stylesheets from your Drupal theme, the files normally included by your theme will be included into the editing area as well. Plugin stylesheets still apply. You'll probably encounter a situation where the styles normally applied to your body tag are applied to the content in the editing area, making things look bad. The editor uses an iFrame containing a basically empty HTML document, and the content being edited is inserted directly below the body tag of that document. To make the contents in the editor actually look like your rendered node you need to change your stylesheets so the same styles are applied to both whatever tag encloses your rendered node, and the body tag itself. Doing so would most likely make your site look horrible unless there was a way to make the rules only match the body tag created in the editor, and not the regular body on all other documents. Fortunately, there is such a way.
Specific style overrides for the content editing area:
TinyMCE provides an extra class on the body tag in the iframe:
mceContentBody. So you can leave the original styling on your site's body tags alone, and target only TinyMCE's tag like this:Comment #3
uomeds commentedThanks. Found it: