adding new style sheet to select box on tiny mce

hi all,
i want to ask how the way if i want to adding a new style sheet to select box on tiny mce ?

thx.

I’ve got the same problem too.
Where is the location of that css file, if I want to add some styles that can be used in tinyMCE.

I’ve found a plugin named blockquote, but I don’t understand how to use and install it.
I’ve got it from here http://sourceforge.net/tracker/?func=detail&aid=1498692&group_id=103281&atid=738747

thx before.

I did some looking around, and you can assign a style sheet to TinyMCE in the site Configuration, in the Interface & Features tab. In the field Path to CSS, put something like /assets/templates/mytemplate/style.css - this needs to be from the root of your web space. For example, for my localhost development installation, I used /modx/assets/templates/andreas03.css.

This will automatically populate the styles drop-down with all of the class designators in your css file.

You may need to add some instructions to your .css file to compensate for the fact that the editor window does not contain all of the structure of your site template, such as wrapper divs.

http://wiki.moxiecode.com/index.php/TinyMCE:Configuration/content_css#TinyMCE_specific_rules

ok, thx for the explanation, that’s work correctly now

No matter on how many sites I try to do this, all I ever get is the body’s background colour (or even worse - background image) to cover the background of my content editor window, but no new styles are added to the Styles drop-down list. What am I doing wrong?

Quote from: rivendell48 at Mar 04, 2010, 10:30 AM

No matter on how many sites I try to do this, all I ever get is the body’s background colour (or even worse - background image) to cover the background of my content editor window, but no new styles are added to the Styles drop-down list. What am I doing wrong?

You need to go to Tools > Configuration > Interface Features and scroll down to TinyMCE Settings and then find "CSS Selectors" follow the instructions to add specific styles to the dropdown. For example if you want to add the class .blue_text then you’d go to the input box and type in: Blue Text=blue_text. The first part would be what the user sees in the dropdown box in TinyMCE the second part, after the equals sign, is what TinyMCE uses to add that selector to the code. Make sense?

I can use that method ok, but thank you for your reply anyway.

The problem I am having is with the "Path to CSS file" option. If I add my style sheet in here, I was under the impression from manuals and other posts that the core styles from that style sheet should be added to the editor. But it doesn’t seem to work. I am pretty sure I am not getting the path wrong, as the background colour/image of my site suddenly becomes the background colour/image of the editor window, so it’s picking the body style up somehow. But where am I supposed to see the rest of the styles for selection? I thought it’s supposed to be in the Styles drop-down list?

Oops! I should have read a little bit more.

If it’s any consolation I’ve never been able to get that to work. I always got the same result as you when I tried to add the css file - background images and other annoying styles screwing with the visibility of the editor window. With that said, I’ve always preferred to manually input the styles as to avoid unnecessary client gaffes. Can you imagine them adding a link style to a headline or other crazy combo?

There is something that I’ve always thought about trying, but never did... I thought about isolating the styles that I wanted to show up in a separate style sheet and referencing that instead of the main stylesheet to avoid the body and wrapper/container styles. It might be worth a shot. Good luck either way!

The only successful way I ever found to accomplish this was exactly how cbaone described - create a seperate style sheet specifically for the editor, although only classes worked - not #ids, if I remember correctly.

Then just add the relative path into the css path field in the manager and it should work.
ex: assets/templates/your_template/editor.css

No worries, I appreciate anyone replying to my questions

Yes, I think you’re right about that trimmed down stylesheet - but I still can’t figure out where the styles are supposed to show ....


O.K., I’m back and with a smile on my face! Thanks to your suggestion, I created a new style sheet that only contains the styles that I want my client to be able to use. Not ony do they appear on the Style drop-down list (albeit not as nicely names as when you use the CSS Selector method of hand-typing them into Tools/Configuration), but these styles are also applied to the editor window - making it much easier for the client to see what they’re doing. Thanks for the idea (even if you didn’t get around yet to trying it out yourself - go for it now )