I'm implementing a custom editor.css stylesheet for TinyMCE, and as expected, my custom styles are showing up just fine. The problem is when I hover over my custom styles, it doesn't seem to switch the text colour to white, like it does with the category text.
I have set two stylesheets for the "uiEditorCssPaths" in my episerver.config file, with one being the typography styles and the other being the custom style definitions, which looks something like this:
EditMenuName: Heading 1;
EditMenuName: Heading 2;
This works. I can see my custom styles in the Styles dropdown. But when I hover over them, the background colour changes to blue (that's OK) but the text colour stays dark grey, which happen to be the colour I'm using in my typography stylesheet for the body element.
Here's a screenshot: http://dnasir.com/wp-content/uploads/2013/07/tinymce-style-bug.jpg
How can I fix this? Removing the text colour from the typography stylesheet will cause all text to use the default text colour, which in this case is black. And I'd really like to maintain the whole WYSIWYG thing intact if possible. It doesn't make sense to me if the styles in TinyMCE appear differently to the actual stuff.
Hope someone can help. Thanks in advance.
You should be able to trace where that blue thing is coming from if you F12 on the dropdown element...
The blue background is from the standard UI stylesheet which is fine. What I want to get rid of is the inline colour that's being applied to the select item by TinyMCE. I'm guessing it's scanning the stylesheet for styling rules, and applying it to the select items. The problem is that the colour sticks on hover.