How to create resizable text in DotNetNuke® - part 10


Why? | Absolute-size Keywords and Percentages | This works great, what’s the catch? (IE5 hack) |  Pixel sizes and percentage equivalents | DotNetNuke Preparations and Implementation
 
Show as single page
font sizing
By Lee Sykes
March 2006 (Updated September 2006)

Continuing our series on How to build a DotNetNuke website, we are now going to enable the Vortex Music skin to use resizable text.

While viewing a web page using Internet Explorer, if you go to the View menu and select Text Size / Largest, you should see that the text size increases. Currently the Vortex Music skin does not allow you to re-size the text within Internet Explorer; however, here you can see an example of a skin that implements text sizing: http://skins.dnncreative.com

Why should we bother to create resizable text?

The main reason is to make your site accessible to as many people as possible. Enabling text sizing within your website allows visitors with visual impairments the opportunity to view the content of your site.

A further consideration is that it is law in the US and UK to create accessible sites. American National Federation for the Blind are suing Target over their inaccessible website, after alerting them to the problem months ago and seeing no remedial action - even though the fixes would be trivial.

There has been interesting comments from the web development community which unfortunately demonstrates an ignorance to accessibility. This is well summed up in Bruce Lawson’s blog

Another interesting fact is that 25% of all web users have some kind of accessibility problem. (This is a claim from the Danish Centre for Accessibility.)

This should give you a list of good reasons to consider implementing re-sizable text.

Creating re-sizable text in a website

In this section of the tutorial we will demonstrate how to set up a website which uses re-sizable text. Once we have discussed these principles for a standard website we will go through the steps required to implement this within DotNetNuke.
The in-accessible method
The common method for sizing text within a website is to set the font size of an element using pixels, eg:
.Body
{
    font-size: 12px;
}
Web designers have opted for this method in the past to ensure that their designs are displayed in exactly the same text size across multiple browsers.

The problem with this is that you can not re-size the text within Internet Explorer. View this page: Fixed Font Sizes, go to the View menu and select Text Size / Largest. You can see that the text will not re-size using Internet Explorer. It is possible to re-size the text in other browsers such as Firefox, but Internet Explorer is currently the most popular browser, so this is a significant problem that we need to find a solution for.

Why? | Page 1 of 5 | Absolute-size Keywords and Percentages

Videos

Video 1

  • Example of the current Vortex skin that does not enable the re-sizing of text
  • Downloading the new default.aspx file to upload to your DNN installation.
  • Uploading the default.aspx file to set up the XHTML Transitional 1.0
  • Doc Type for DotNetNuke
  • Demo of a problem it causes with blank space

Time Length: 5min 18secs

Video 2

  • Creating the Body Class
  • Additional classes, cleaning up the CSS code
  • The HouseMenuNav class
  • Classes up to Head class, details of the default and portal.css files and the inheritance problems

Time Length: 15min 32secs

Video 3

  • Subhead class
  • Setting up the Normal class for the Text/HTML module to use text-re-sizing – how to override the default.css file.
  • Grouping the Normal classes together to reduce the CSS code.
  • Viewing in Firefox & IE – demonstrate re-sizing of text
  • Demo of problems in IE – menu and footer background not displaying
  • Fixing the menu and footer background problem in IE

Time Length: 8min 35secs

Video 4

  • Skin object font settings – Skin Item Class
  • Viewing the Skin object items in IE, demonstration that they re-size
  • Setting up the Header Tags to use resizable text
  • Demo of Firefox – H1 Tag margin needs changing
  • IE6 – Sizing needs enabling on LINKS token
  • IE5.5 – All text is one size too large, even with the IE5/Win hack

Time Length: 8min 43secs

Video 5

  • Fixing H1 margin
  • Enabling Links token resizing
  • Editing body class to include td tags for IE5 / 5.5 to use the correct font size
  • Viewing the new CSS additions in IE5.5, Firefox, IE6
  • Fixing the Container title problem & viewing it
  • Changing the footer to sit towards the bottom of the skin
  • Fix for IE5.1 to center the skin
  • Viewing skin in various browsers: Firefox, IE6, IE5.5, IE5, Mozilla, IE7 beta2, Netscape, Opera
  • Demo of file size saving from using CSS Shorthand techniques

Time Length: 11min 37secs

Total Time Length: 49min 45secs

You need to Subscribe as a member of DNN Creative Magazine and Login to download this video tutorial.

AppTheory
RSS Feeds