Styling and formatting in the Text/HTML module - part 11

By Lee Sykes

April 2006

Continuing our series on How to build a DotNetNuke website, we are now going to explore adding content to the Vortex Music website.

This tutorial focuses on the methods you can use to add content to your website using the Text/HTML module.

In particular using the FCKEditor in combination with calling classes from the skin.css file to format the text and images within the Text/HTML module.

If you are wondering why you would use this method for styling your content, read this article: Bad Practices when working with the Text / HTML module.

We demonstrate how you can create the following layouts without using any additional containers or tables.

Click here to view a demonstration image of the styles that we create in the video

The video tutorials demonstrate step by step how you can create CSS classes to format your images and text.

This means that you can simply highlight a section of text and instantly turn it into a quote or an image with a caption.

For instance, to align them to the left with a small grey border and a text caption underneath while allowing the main text to wrap around the image and caption. (This is done using CSS not tables).

Combining the power of styles in your CSS file, we can programme the FCKEditor to include a list of your styles from your skin.css file.

This means that you can simply highlight a section of text and instantly turn it into a quote or an image with a caption by selecting the styles from a drop down list in the FCKEditor.

This makes it very simple for your website administrators to format the text and layout of the content within the Text/HTML module and ensures the source code is kept to a minimum.

NOTE: The classes in this tutorial were added using <div> tags, it is also possible to add the classes to your text by using any other tags such as <p> tags. In most situations it will be best practice to use the tags that are already available to you. – ie. if you have a paragraph section of text that already has <p> tags, do not add a <div> tag around the <p> tag, add the class directly within the <p> tag. – ie.

<p class=”quoteleft”>My Quote</p>

When adding the styles list to the FCKEditor, you may wish to specify <p> tags rather than <div> tags.

The videos cover:

Video 1 - Introduction and practices to avoid

• Introduction to the content (images and text) we are going to create and how we are not going to use tables to create it.
• Demo of methods you can use to manipulate the layout and styling of images and text that are not recommended (bad practice).
• Reasons why this is bad practice, comparisons of source code

Time Length: 10min 13secs

Video 2 - First CSS styling and setting up the FCKEditor

• Copying vortex music skin and opening it in Visual Web Developer
• Creating the first class – imageleftside
• Applying the imageleftside class into the Text/HTML module
• How to setup the FCKEditor to display the text exactly as it will display on the web page using the skin.css classes

Time Length: 12min 44secs

Video 3 - CSS styles for images and quotes

• Creating the imagerightside class and adding it to the Text/HTML module
• Creating the quoteleft class
• Adding the quoteleft class to the Text/HTML module, viewing
• Creating the quoteright class
• Adding the quoteright class to the Text/HTML module, viewing

Time Length: 9min 03secs

Video 4 - CSS styles for images with captions

• Creating imageleftsidecaption class
• Adding the imageleftsidecaption class to the Text/HTML module, configuring and viewing
• Adding imagerightsidecaption class, viewing

Time Length: 7min 44secs

Video 5 - FCKEditor and setting up a styles list

• The FCKEditor style list
• How to apply a style which automatically creates <div class=”quoteleft”>This is a quote</div>
• Opening the fckstyles.xml file to edit the styles list
• Explanation of the styles list and what each element does
• Adding all of the styles from the skin.css file to the fckstyles.xml file

Time Length: 11min 51secs

Video 6 - Using the FCKEditor to call styles from the skin CSS file

• Viewing FCKEditor styles list in DotNetNuke – clearing cache
• Tip to enable viewing the style names in the drop down list
• Applying the quoteright style to the Text/HTML module to instantly add the class to the text
• Applying:
  
  • quote left style
  • image on right caption style
  • image on right
  • clear
• How to add a style list sheet per portal
• Conclusion

Time Length: 9min 27secs

Total Time Length: 61min 2secs