The html editors for websites are both amazing and troubling. They are impressive for their extraordinary functionality all written in javascript.

However, trying to be all things to all people leaves them frequently falling short on doing some simple things well. I often find myself needing to go into the html source code to take out unneccessary formatting the editors put in.

You would do well to learn a few html tags so you feel comfortable going into the html source. Thought I had posted an html cheat sheet, but I cannot find it now. You can search for html and find plenty of good cheat sheets online.

I post a lot of code and examples and to make them stand out from the rest of the text, it is nice to have them in a block. This same effect is useful for lots of other examples, like recipes, driving directions or any kind of instructions.

To start with, on your DotNetNuke website, go to Admin, Site Settings, Stylesheet Editor. Yours should be empty if you have not added anything to it. If you have the initial marketing garbage that DotNetNuke includes with their installation, go ahead and delete all of it. Copy and paste the stylesheet into another file for safe keeping first, if you like.

Now that you have a fresh stylesheet, you can copy the following CSS into your stylesheet to make a block for code and other instructions. Be sure to save the stylesheet after you make the changes.

pre { 
  background-color:#dddddd; border:solid black 1px;
  line-height:125%; padding:5px;}

You can see what the above code does. It creates the block you see above.

Now how to use this in your code.

Create a new item on your website and go into the text editor. These instructions are for the default FCKEDITOR that comes with DotNetNuke. Highlight the text you want in its own block. In the Format dropdown menu of the text editor, select the Formatted style.

This should put the html PRE tags around your block of text.

One thing to be aware is the PRE tag does not wordwrap and does not remove whitespace. It leaves the text as it is.

One problem is when the editor is in Design view and I copy in code that is already formatted, the editor can remove the formatting. So, before copying in your formatted code, click the Source button at the top right corner of the editor and go into Source view. Type in the pre tags and then copy your code in between, like this. Be careful to change all your < and > to &lt; and &gt; or you will actually insert any html code into your webpage with possibly bad effects.

<pre>
Formatted 
  code
    goes
      in
        between
          the
            pre
              tags
</pre>

Then click the Source button again to return to Design view.

By Andrew Weitzen, Bronze Inc. (c) 2010

Bronze is the publisher of several online Internet journals including: InternetHandholding.com, DomainNames.gs, DotNetNuke.bz, Programmer.bz, Software.vg, WebHosting.vg