5

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:

enter image description here

Marty
  • 39,033
  • 19
  • 93
  • 162
  • Does Business Catalyst use a proprietary WYSIWYG, TinyMCE, CKEditor, something else... ? – simshaun Nov 18 '11 at 02:59
  • @simshaun I.. Have no idea. How can I find out? – Marty Nov 18 '11 at 03:00
  • Depends. Try going to a page that has a WYSIWYG and view its source. Look around where the WYSIWYG is integrated and see if you find any tags or hints as to what it uses. – simshaun Nov 18 '11 at 03:07
  • 2
    Have you seen this thread in their forums? http://www.businesscatalyst.com/ForumRetrieve.aspx?ForumID=1735&TopicID=22337 According to this you should be able to set a Content CSS for the editor. – Jona Nov 20 '11 at 21:57
  • @Jona Thanks for this. I'm looking into how everything works from within the partner portal now. Massive help. – Marty Nov 20 '11 at 22:01
  • @Jona Btw that was the solution I was after if you're willing to post it as an answer. – Marty Nov 21 '11 at 02:48

2 Answers2

3

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.

Jona
  • 2,087
  • 15
  • 24
1

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.

Kamil Sindi
  • 21,782
  • 19
  • 96
  • 120