DNN websites, modules, skins and support

Menu: Blog ยป Skins and Templates

DotNetNuke background issues in FCK & Rad Editor

By:

If your skin has a dark color or an image as the background, there are situations were this background is visible in the editor too.
This can make it very difficult if not impossible to edit the content of your site.
As this question keeps comming up in the DNN Forums and is an issue in the new RAD Editor too, here's how to solve this issue in your skin.

There are 2 possible issues.

Editor gets the background color of the DotNetNuke skin

1. The background shows up in the editor (FCK, or RAD Editor) like this:

Here's what's causing this:
The editor is loaded in an iframe and to support WYSIWYG editing it loads the skin.css stylesheet for the editor.
As you defined the body background like this in skin.css:

body{background:#000000;}

The body tag of the editor gets this background too.
To prevent this the body element of a page in DNN has an id "Body" and the body element of the editor does not.

So you should always use this to set the background of your skin:

#Body{background:#000000;}

The result is this:

The background in the editor is white again.

The second issue you can experience:

FCK Pop-ups get background of the DotNetNuke Skin.

With the FCK editor the "Browse Server" pop-ups get the background of the page too, which can make the pages difficult to use.

The reason for this is that the pop-ups have an id "Body" too.
(they should not IMO, but they do)

The only solution I know to solve this is to inject an extra class in the page body tag and address that class in CSS.

As this is only injected for the pages and not the pop-ups, this will solve the issue of the pop-up background color in FCK.
You can do this using the 1.5+ version of our Style Helper skin object.

Add this to your ASCX skin:

<%@ Register TagPrefix="fortyfingers" TagName="STYLEHELPER" Src="~/DesktopModules/40Fingers/SkinObjects/StyleHelper/StyleHelper.ascx" %>
<fortyfingers:STYLEHELPER ID="STYLEHELPER1" BodyClass="Body" runat="server" />

And set the background like this in your skin:

.Body{background:#000000;}

That will solve both issues.