Umbraco’s rich text editor is using my site’s styles

April 27th, 2006 | Tags: ,

I am creating an Umbraco site with a document type that has rich text (my innovation here is astounding!) and everything was working great on my local. Then I upload it to the production server and the rich text editor now has a navy blue background with black text and is centered—editing is now very difficult. Since the site I am creating has a navy blue background I had an obvious culprit and a quick test by deleting the site’s style sheet confirmed my suspicions.

After tinkering for a while and do some searching, I have found out why this was happening only on the production site and how to fix it.

It turns out that Umbraco uses the styles defined in the ‘Stylesheets’ section of ‘Settings’ to style the rich text editor. These styles can, however, be overridden by defining styles for #holderBody and #holder. I figured this out because on my local Umbraco site I had imported the website wizard sample package which, among other things, includes a couple style sheets. In one of these style sheets there are definitions for those two elements (see the tutorial below for their contents). My production site was a clean install and did not have the sample templates, and so it didn’t have the rich text styles overridden to normal.

Here is how to fix this problem if you don’t want to install the sample package:

  1. Login to the Umbraco admin
  2. Go to the ‘Settings’ section
  3. Right-click on ‘Stylesheets’ and select ‘Create’
  4. Enter ‘RichTextEditor’ as the name
  5. Click on ‘RichTextEditor’ in the list of stylesheets
  6. Copy and paste the styles listed below into the editor
  7. Click the save button
        background: #fff;

        border: 1px solid #ccc;
        padding: 10px;
        margin: 5px;
        text-align: left;

That’s it, you should now have a useable rich text editor.

No comments yet.