DotNetNuke Skins – Handling CSS Files

One of the most common mistakes I see when I buy skins for dotnetnuke is that the skin creator places a link tag for the CSS file inside the ASCX file for that skin. I’ve also seen skin creators use the skin.css for both the skin and the container.

I look at this and just shake my head. The person who created this skin just doesn’t get it. But so many don’t get it that it must be the documentation, right? Or does anyone read the documentation?

So here it is, plain and simple. Your final product should NEVER include a link to the CSS files, and the CSS for the skin should be separate from the CSS for the containers. Here’s why…

When dotnetnuke loads a skin for a page, it automatically loads the CSS file for that skin. It does the same for a container. However, DotNetNuke is smart enough to know if it has already loaded a CSS for a container and only loads it once.

If you load the CSS file for your skin and your container, that means the CSS files will be loaded at least twice as often as they need to be. However, if you use the container, or a container from the same container set, multiple times on the page, having the CSS file in a link statement in the container will force the CSS file to be loaded for each instance of the container you have on the screen. This will ultimately cause your page to load more slowly than is necessary.

But if we don’t put the CSS file in the ASCX file, how will we be able to see, in design view, what our CSS is doing on the screen?

You won’t, but this is one of the reasons we are working in DotNetNuke and not in some sort of third-party design tool like Dreamweaver. What you’ll need to do to really see what the skin and container code are doing is run your installation of DotNetNuke while you are making changes to the ASCX, CSS, and any related images.

If you think about how skins and containers work, this only makes sense. The CSS for the skin will impact the CSS for the container and the only way you can really see what the combination will look like is to put a container on a page and look at the result when DotNetNuke has merged everything together.

Related Post

3 Responses to “DotNetNuke Skins – Handling CSS Files”

  • Hi there
    Could you suggest the best place (simple) for me to learn how to create a website using and c# (visual studio 2008), I’ve been going around in circles for the past 3 weeks working on a shopping cart website. Which ever way I go I always get stuck on binding to show contents of cart that users selected. I’m very very new at this and mostly need walkthrough tutorials (like yours).
    I would appreicate any help.

  • Dave:

    Sounds like you need a class, not tutorials. I can recommend

    I also have several tutorials posted on databinding which it sounds like is you immediate need.

    Having said that, a shopping cart is a HUGE undertaking using any platform. I’d recommend you forget about building it yourself and use DotNetNuke in combination with, or if you can get by with it, just use

    Just to give you an idea of the things you need to know something about, here’s a list:

    Credit Card Security (PCI) requirements (stop now, if you don’t even know what PCI is)
    Tax Requirements
    Shipping Requirements
    Partial Orders
    Wish List

    Trust me, been there, done that and have moved all my code to mostly because Visa/MC keep tightening the security requirements and I just can’t keep up. It has been bad enough getting the shipping and taxes to work properly. Security just put the nail in the coffin.

  • I am wondering if the list above is a complete list or is there going to be more with relation to tying it all together. I am still a little confused as to how this wraps up.