DotNetNuke Tips & Tricks

Wednesday, January 28, 2009 by Cuong Dang

A Cleaner CSS file for DotNetNuke Framework

Filed under: Tips & Tricks, Skinning

Often I see people asking about how to design a web site and implement it using DotNetNuke framework while maintaining the integrity of the design. The answer I have is to start with a cleaner CSS file. As we know the team at DotNetNuke has their reasons for keeping the default.css file intact, it does not mean that it prevents you from making changes to the file yourself.

I always start with a project using my very own version of this file. Since the last release of version 4.x, I cleaned up the file and use it across many sites for both client and personal work. If you’d to see how it looks, feel free to download it here (please login if you're already a registered user, if not, go ahead and create an account) and throw it in your testing environment to replace the current one that you have. You’ll be in complete control of your design, I promise.

This file resets many of the CSS properties and its values that should be defined by a web designer. By comparing the old file with this cleaned up version, you’ll see a big change in file size.

One things to consider is that you need to define styles for some generic elements such as td, th, span, div… in your own CSS (skin.css) to achieve the desire look and feel.

For those of you don’t know where the location of the file is, here’s the path: http://www.domain.com/Portals/_default/default.css

So grab the file and go create some kick-ass DotNetNuke design!

Comments

Ian Robinson
Wednesday, January 28, 2009 10:28 AM
Don't forget that this file will be overwritten if you were to upgrade your site and you'll need to replace it - which is a little bit of a setback, but certainly worth the effort. Make sure this is well documented on any of your projects!
Cuong Dang
Wednesday, January 28, 2009 10:35 AM
Thanks Ian! Also, this file has not been tested on version 5, but is working properly up to 4.9.1.
Eoghan O'Neill
Thursday, April 2, 2009 3:27 AM
I went a step further, and moved all the Admin specific styles from default.css and moved them to an admin.css file that was wrapped in with my site's admin skin.
Aaron
Tuesday, May 26, 2009 10:41 AM
Thank you so much for posting this. This gives me some ideas on how to create my own CSS-website.
james
Thursday, November 5, 2009 10:57 PM
We do something similar, instead of gutting the default, we just include another one under it that essentially resets everything in the default. Makes upgrading possible but it does bloat the amount of CSS you have to download. This is a must though, you are right on.

James - Drupal Consulting
blog comments powered by Disqus