Applying a separate stylesheet to a WYSIWYG loaded page in a CMS

Question

Most of the websites that I build at work are developed within Business Catalyst - a reasonable content management system.

Lately I've been having some difficulties with a few website owners accidentally wrecking their website, finding it too difficult to update, etc.

The WYSIWYG editor is quite small, and this causes content to crumple up often. This can be a problem for many obvious reasons. Stylesheets are applied within the WYSIWYG area, meaning that there's often stuff going on that only works in the context of the actual viewable website.

I want to know if there's an easy way to load a different stylesheet for the content in the WYSIWYG area. This way I can greatly simplify the appearance and through this the editing experience, with a more advanced and attractive stylesheet applied on the live website.

Is this possible? I thought I might be able to make my CSS rules like this:

iframe div#myElement

Because the WYSIWYG editor loads the page via an iframe. But this didn't work.

---

This visual of the WYSIWYG editor itself might be of use:

Answer 1

You can set a custom Content CSS used by the WYSIWYG editor under PP > Tools > Online Editor Settings > Content CSS.

See also this thead in the Business Catalyst forums.

Answer 2

Try adding "!important" to the CSS styles you want to change so that they don't get overridden by the WYSIWYG editor. E.g. tr {border: 0 !important}. Btw the editor looks very similar to TinyMCE.