TinyMCE not recognizing styles

I originally posted this question in Templates - sorry, didn’t realize that there was a specific section for TinyMCE questions. Haven’t gotten an answer to my question so thought I’d repost here. My posting there is named css issues if someone wants to look at responses I’ve gotten so far. None of them helped.

My issue is that my stylesheet is being applied in my actual documents just fine but the styles are not appearing in the dropdowns for formatting in the TinyMCE. I just want my non-HTML clients to be able to apply the H1, H2, Paragraph, etc. and be able to visually see the document as it should appear without having to go to Preview document.

Hi,

and be able to visually see the document as it should appear without having to go to Preview document.

hope i understand you right...if you want your styles formatting your text while you’re actually working with the RTE, you need to write them into this stylesheet too:
-> assets -> plugins -> tinymce3201 -> jscripts -> tiny_mce -> themes -> advanced -> skins -> default -> content.css

j

What, then, is the purpose of the Configuration setting (in the Interface & Features tab) "Path to CSS File"? I seem to recall that this would set the css file the editor would use?

My issue exactly, Sottwell. The "Path to CSS" file does affect the "Styles" dropdown list in the TinyMCE but it does not affect the "Format" dropdown list, which is what contains the standard paragraph and headings settings that the non-html client should be using or could potentially use. It opens up a problem of the client using those incorrect format styles and really messing up the page.

I can set up separate "classes" for the paragraph and headings and other standard formatting so that they do appear in the Styles dropdown rather than the Format dropdown but that is a lot of extra coding that shouldn’t have to be necesesary.

Sharkbait, I did find the file you directed me to and see how I can change the formatting for the headings but that’s scary touching that file as it affects the overall style of the TinyMCE editor box as well.

This is driving me insane!!! I’ve worked with changing the settings in the TinyMCE stylesheet to reflect my website styles as Sharkbait suggested and now the H1 and H2 headings are showing up appropriately in the WYSIWYG content editor. I deleted the h3, h4 etc settings that I’m not using but they are still appearing in the format dropdown menu. How do I get rid of those?

Also I want a background color to show in my body of my fixed width website but my content section has a white background. The TinyMCE style sheet body is set for a white background, my website stylesheet is set to the color I want but that color is showing up in the TinyMCE editor content background. It seems that the TinyMCE stylesheet overrides some sections but the page stylesheet overrides the TinyMCE editor in other areas. What the use of having a WYSIWYG feature for the client when it’s not going to look like the actual web page!!!

TinyMCE puts an override class (.mceForceColors which sets the background colour to white & text colour to black) on the body displays in the editor. You can override it with a higher priority css selector. eg: In my content.css (which is included in TinyMCE via the config include) I used:

He Guys,

I ran into the same problem.
In the beginning I had it working but after selecting a different style sheet only the user defined tags were working correctly and not the H1, H2 etc.

Here’s the story and my "solution":
Working: content_css : "/layout/css/basics.css",
H1, H2 etc are shown correctly as well as the user defined tags

Not working: content_css : "/layout/css/usercss.css",
Tough It’s the same code in the css file, only the user defined tags are shown correctly

So I thought that maybe the length of the name of the file would give the problem so I changed the name:

content_css : "/layout/css/user.css",

This was working fine again, then just double check I replaced the file name usercss.css with userabc.css:

content_css : "/layout/css/userabc.css",

Also this was working fine, a last test:
content_css : "/layout/css/acss.css",
Also fine.....

I first was thinking that the "css" in the name of the css file would give the problem but apparently that isn’t the issue tough renaming the usercss.css file to user.css did solve my problem

Here’s my way of making TinyMCE use my site stylesheet:
1. make a stylesheet (assets/templates/yourtemplate/css/content.css) for content and define styles for content stuff.
NOTE: You shouldn’t use nested selectors like

Instead use


2. On the tools/configuration/interface & features tab of MODx manager set Path to CSS file: assets/templates/yourtemplate/css/content.css
3. Place an empty css file instead /assets/plugins/tinymce/style/content.css