By Lee Sykes
September 2008
In this tutorial we demonstrate how to configure the content area in the FCK Editor to display the same text styles as your skin.css file.
Configuring the FCK Editor in this way makes it much easier to edit the content in your site and ensure that it is correctly styled.
We demonstrate how to solve problems such as unreadable text when editing with skins that have a dark background colour, as well as how to style the Link Gallery, Image Gallery and Custom Options FCK Editor pages.
There are several ways to set the FCK Editor to display the text using the styles from the skin.css file. We cover all of the methods ranging from setting the default editor display mode, through to configuring the display mode for a single instance, modules of the same type and across a portal within your DotNetNuke installation.
Tutorial Reference
Lazy days - Free DotNetNuke CSS Skin
The videos contain:
Video 1 - Introduction, Configuring the Default Editor Display Mode
- Introduction, quick demonstration
- Lazy Days Skin and Template
- Editing the text in the FCK Editor and the default appearance of the text
- How to set the default editor display mode
- Static, dynamic, url modes
- FCK Editor settings in the web.config file
- Reformatting the code to display on each line
- CSS DefaultMode
Time length: 7min 09secs
Video 2 - Fixing Text Display Problems, Creating a Custom FCK Body ID
- The text displays using the styles from the skin.css
- Problem with styling coming from the body tag, ie background images, or black text on a black background
- How to set the FCK Editor to use its own custom body ID
- fckconfig.js
- Creating a custom body id of ‘fckbody’
- How to edit the skin.css file and add CSS for the fckbody ID
- How to clear the cache and view the text styled correctly in the FCK Editor
Time length: 7min 45secs
Video 3 - Styling the Image Gallery, Link Gallery, Custom Options FCK Editor Pages
- How to style the image gallery
- How to style the link gallery
- How to style the Custom Options Page
- How to identify an ID for styling the image gallery
- How to configure a background color for the FCK image gallery, link gallery and custom options page
Time length: 8min 12secs
Video 4 - Configuring an Instance, Module or Portal FCK Editor Display Mode
- Show Custom Editor Options
- Settings type: Instance, Module, Portal
- Apply custom settings: Instance, Module, Portal
- Editor area CSS
- CSS Generator Module: Static, Dynamic, URL
- How to set the Dynamic Mode across the portal
- URL CSS Generator Mode
- How to use an external CSS stylesheet for styling the FCKEditor window
Time length: 7min 33secs
Total Time Length: 30min 39secs