Learn More





New Community Website

Ordinarily, you'd be at the right spot, but we've recently launched a brand new community website... For the community, by the community.

Yay... Take Me to the Community!

Setting the Background of your Skin

Return to previous page

  • 4/7/2015



Setting the Background of your Skin

Last updated 6 years ago



(Enter the content of this article below)


If your skin has a color or an image as it's background, there are situations were this background is visible in the text editor too.
This can make it very difficult if not impossible to edit the content of your site.

You can experience this with FCKEditor 2*, CKEditor 3 and RadEditor.

The simple but effective solution for this is to use:

#Body {background:#000;}

in your CSS.
The reason the background shows up in the editor is that the editor is loaded in an iframe and to support WYSIWYG editing it loads the skin.css stylesheet in the editor.

If you set the body background (incorrectly) like this in skin.css:


This will cause the background color to show up in the editor too (as the editor in the iframe has a body element too).
To prevent this "effect" the body element of a page in DNN has a unique id; "Body".
The the body element of the editor does not have that id.

This allows you to address the pages body element specifically by using the "body" id in your CSS.

  • Note: Due to security issues, we strongly suggest upgrading FckEditor to CkEditor, and make sure, folder FckEditor get removed from /Providers/htmleditorproviders folder.
Subscribe to DNN Digest

DNN Digest is our monthly email newsletter. It highlights news and content from around the DNN ecosystem, such as new modules and themes, messages from leadership, blog posts and notable tweets. Keep your finger on the pulse of the ecosystem by subscribing.  

What is Liquid Content?
Find Out
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out