DotNetNuke tutorials, tips and tricks

Tuesday, January 31, 2006

DotNetNuke CSS Skin Released

I've set up a sub domain to test skins and for everyone to see the skins working in action with varying lengths of text and different modules.

You can view the 'Simple Red Leaf skin' here: DotNetNuke Free Skin

This skin is a pure CSS skin:

The layout is created using CSS and makes use of CSS for styling the fonts, menu etc.

It does not use the SolPart menu. It uses the House of Nuke Menu.

Accessibility: All fonts are based on percentages and can be increased / decreased in size within all browsers. This makes the skin accessible for users with visual impairments.

Search Engine Friendly: The skin is search engine friendly.
  • There is a tag line at the top of the skin which allows you to enter a key phrase for your page. This is placed at the top of your source code enabling search engines to index your page based on your key phrase.

  • Within the source code, the main content appears before the menu. This allows search engines to easily gain access to your main content and index it. This also allows screen readers easy access to the main content.

  • The menu is CSS based and completely search engine friendly. All of the links can be read and indexed by the search engines.

I've tested the skin in IE5, 5.5, 6, Mozilla, Firefox, Netscape and Opera.

All of the browsers display the skin correctly except for the Opera browser which displays the text one size too large.

The cause of this maybe due to the doctype of the default.aspx file. - It is currently using quirks mode:

It has been suggested that I need to try using Standard mode:

I experimented with this early on, but it does raise further issues with the Solpart menu on the Containers (it displays at the top left of the page rather than on the container in Standard mode)

The other problem will be that IE6 will now display the fonts at the correct size rather than imitate the IE5 text size problems. - So I will need to find a workaround to this within my separate hacks.css file.

* * * * * * * * * *
If you are looking for tutorials regarding DotNetNuke and skinning, here are 16 videos to get you started: DotNetNuke Skinning Tutorial Videos.

DNN Creative Magazine provides DotNetNuke tutorials, articles, reviews all for the DotNetNuke web designer. An issue is released each month. Stats: 86 Videos & 5 MP3 Interviews


Post a Comment

<< Home