28 April 2008

DotNetNuke Internet Explorer font scaling

Updated May 2009 to cope with MinimalEntropy skin.

When you put content onto a DotNetNuke (DNN) site you must think how other users see your information. By default, if your visitors use Internet Explorer (IE) then most of your site will NOT resize according to the user's Text Size setting. In my opinion this is not good practice because some users prefer larger text than others. This post shows how to make DNN fonts scale correctly. An earlier post shows what happens if you do not make my changes.

In this post I make the changes in a portal.css stylesheet file - click here to download DNN_ScalingFont_Portal_090511.css. You may use and update this file freely provided you retain the attribution to Chris Cant. Note that this CSS file only affects the fonts shown to ordinary users - Edit and Admin fonts are unchanged.

To use my CSS file, log in as an Administrator or Host then choose [Admin][Site Settings]. Scroll down and open up the [Stylesheet Editor]. Select all the existing text, copy and paste to a local text file as a backup. Insert my CSS file at the start of the style sheet textarea, then click on [Save Style Sheet]. To see the effect of the new file, you will have to navigate to a new page (eg Home) and refresh your browser (F5).

Note that my CSS stylesheet is not guaranteed to make all fonts scale on your site - the current skin and container may have definitions that take precedence over the portal CSS. Please test this stylesheet carefully on all pages of your site before putting into production use.

How it works

DNN uses several CSS stylesheets when rendering content. The following stylesheets are included in this order:
  1. Portal default CSS (in /portals/_default/default.css)
  2. Current skin CSS
  3. Current container CSS
  4. Portal CSS (eg in /Portals/0/portal.css)
The portal default CSS has fixed-size definitions for many generic HTML elements as well as many DNN-specific classes. My substitute Portal CSS overrides these definitions. Because the portal CSS is included last, it has a good chance of having its definitions used, though some skins and containers may have specific definitions that take precedence.

The DNN Portal default CSS uses fixed size fonts, eg H1 has font-size:20px. This is fixed in my CSS by specifying the font size as font-size:x-large which lets IE resize the font as the user changes Text Size.

Font Family Definitions

The first section of my CSS gathers all the font family definitions into one place. By altering the definitions here, you should change all the font families that are normally visible. The normal fonts are defined here as being Tahoma, Arial, Helvetica; the BLOCKQUOTE, PRE and CODE elements are Lucida Console, monospace. Alter all instances of both of these as you wish.

Scaling fonts and default weights/colours

The next section of my CSS file does the main work of redefining generic HTML tags and DNN classes. The general HTML elements are put back to standard font size, colour and weight. Firefox (FF) and IE have different (but similar) defaults - the IE default is used.

Next, various DNN classes are defined to use scaling font sizes.

Main menu and Module container menu scaling

The main menu and module container menu are now made scaling. The main menu bar by default has a fixed size of 16px. This is changed to have a scaling size of 2em. The font sizes of the menu classes are defined as 1em. A similar job is done for the module container menu classes.

Other classes

The existing style sheet has definitions for various classes used by the standard DNN template. In many cases you can clear these definitions.

Example sites

1 comment:

VickySwift said...

Thank you - that is really helpful