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:
- Portal default CSS (in /portals/_default/default.css)
- Current skin CSS
- Current container CSS
- Portal CSS (eg in /Portals/0/portal.css)
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:
Thank you - that is really helpful
Post a Comment