By Lee Sykes
October 2008
In this tutorial we demonstrate how you can use the styles drop down list in the FCK editor to format the text.
The styles drop down list allows you to use a set of predefined formatting definitions which help to ensure that the end-user (writer) can create well designed text without messing up the HTML source code.
Using the styles drop down list allows you to quickly apply CSS classes from your skin.css file and should help to ensure that administrators do not use bad practices for styling text, such as using font tags. All of the styling that you wish your administrators to use can be setup in the styles drop down list and should ensure that the content is styled correctly.
The styles drop down list is fully customizable, so you can create your own specific styles to match the CSS coding in your skin.
In the tutorial we demonstrate how to style the drop down lists in the FCK Editor to match the styling of your skin and to ensure that the content in the drop down lists is readable.
We demonstrate the various methods available in DotNetNuke for populating the styles drop down list, from static, dynamic and URL and finally demonstrate how to create your own fully customized style definitions to match your skin and upload them to the FCK Editor.
Tutorial References
Lazy Days Skin
Styling and formatting in the Text/HTML module using the skin.css file and the FCK Editor
Styling and formatting (part 2) - Text/HTML module and FCK Editor
Bad Practices when working with the Text / HTML module
The videos contain:
Video 1 - Styling the Background of the Style Dropdown List in the FCK Editor
- Introduction
- How to use the web developers toolbar to identify element information
- How to style the FCK Editor styles dropdown list using the skin.css file
Time Length: 7min 45secs
Video 2 - List of Available Styles for the FCK Editor
- How to apply a style to the text in the FCK Editor
- How to remove a style from the text
- The ‘FCK Editor Custom options’ page
- How to use the ‘Settings types’: Instance, Module and Portal
- How to use the ‘Apply custom settings to’ option
- How to use the ‘List of available styles for the editor’
- How to use the ‘Style List generation mode’
- Dynamic Styles
Time Length: 7min 10secs
Video 3 - Dynamic Styles in the FCK Editor
- How to apply a dynamic style to the text in the FCK Editor
- How to add a filter to the style dropdown list
- How to restart the application
- How to edit the web.config file to alter the default styles settings for the FCK Editor
- How to edit the default dynamic styles filter
- How to edit the styles default mode
Time Length: 6min 47secs
Video 4 - How to Create Custom Styles
- How to copy and edit the fckstyles.xml file
- How to edit the style list to create new styles
- How to create an image float left style
- How to create an image float right style
- How to upload the new fckstyles.xml to the FCK Editor
Time Length: 8min 59secs
Video 5 - Creating Class Styles in the Style Dropdown List
- How to view classes within the skin.css file
- How to create styles for classes in the fckstyles.xml file
- How to create a style for the green and red classes
- How to add styles that use span and paragraph tags
- How to use the source button to quickly fix problems with paragraph tags nesting inside paragraph tags
Time Length: 8min 39secs
Video 6 - How to Customise Block Quotes with Different Classes
- How to create blockquote styles within the fckstyles.xml file
- How to create a paragraph tag style
- How to use the paragraph tag style to remove a paragraph tag
- How to correct the styling of the blockquote styles
Time Length: 8min 23secs
Total Time Length: 47min 43secs