tinyMCE style not matching site style

[chrisokelly]

Hi Alfresco'ers (Sharers? Explorers?),
We have recently set up Alfresco 4.0.b Community in an Ubuntu/Postgres/Tomcat environment. I have also implemented a custom theme based off the red fmeTheme here http://code.google.com/p/fme-alfresco-extensions/wiki/FmeTheme. After some initial problems (the fmeTheme seems to be missing alot of the yui classes so alot of prompts/buttons were without formatting. Kept the fme build environment and overwrote the source files with the Yellow Theme files distributed with alfresco, started again from there) we appear to be fairly set from a styling perspective, with the exception of the tinyMCE editor.
TinyMCE seems to have it's own set of styles defined in the header of it's iframe, which are unaffected by my overrides in presentation.css or yui/assets/skin.css. The result is that the font, font-size, color and behavior of tags such as li or td appear one way in the editor but totally different once published. While this is fine from my perspective (I will specify any formatting that I need and it carries through without a hitch), from a user perspective once we go live it will need to be fixed (it kind of kills the defining idea of a WYSIWYG editor). Is there any way for me to have the editor import the presentation.css stylesheet?

[davidcognite]

Hi Chris,

I see you've found the JIRA ticket (ALF-11999 for anyone else following this thread) & set up a watch - you'll be notified there once we actually fix this issue, but in the mean time, have you tried using an @import css statement inside TinyMCE's content.css on the active theme? That will pull the necessary style sheet into the TinyMCE editor's iframe.

However, I suspect that a significant number of the styles in presentation.css may need to be modified to work within the context of of the TinyMCE iframe - for example, those prefixed with .sticky-wrapper won't match anything. Give it a try & once you've got it imported, you'll be able to have a play and modify the styles that need tweaking. This is probably best done within the presentation.css file by adding an additional selector to any rule that isn't correctly applied and prefix that new selector with #tinymce to keep the less specific selector scoped to only TinyMCE.

I'll link the JIRA ticket to this thread, so if you wouldn't mind reporting back on how well that works, it'll help us when we come to fix that bug.

Thanks,
David.

[chrisokelly]

Hi David,

Thanks for responding, I was actually wondering with some of my testing since originally making this post whether this may be less related to stylesheets and more to this - https://forums.alfresco.com/en/viewtopic.php?f=47&t=23632&start=30 ? I originally thought that the problem was that TinyMCE was ignoring our styles changes as they matched the stylesheet and thus needed no tags added in that context, however have since discovered that, for example with fontsize, no matter what we set our font size to with TinyMCE it remains unchanged when published.

In regards to the workaround you suggested - importing the presentation.css into TinyMCE's content.css, I only lost you when it comes to TinyMCE's content.css (I am fairly new to Alfresco's layout). In our development environment we have

/Source
-/web
–/themes
—/customTheme
—-/images
—-/yui
—–/assets
‍‍‍‍‍‍‍‍‍

Inside CustomTheme we have a presentation.css and login.css, inside /assets we have skin.css. Would TinyMCE's content.css fit somewhere in here or would we need to map a different directory structure?