Home » DotNetNuke - Skinning » DotNetNuke Skins – Handling CSS Files

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.

Like this Article? Subscribe to get every article sent to your email.

Related Post

  • DotNetNuke Skinning – Standard CSS ClassesDotNetNuke Skinning – Standard CSS Classes By now, you've gotten the idea that creating a set of skins and containers for DotNetNuke is a little bit more work than just creating some HTML, images, and a CSS file. Hopefully, you […]
  • DotNetNuke Modules – Creating Base ModulesDotNetNuke Modules – Creating Base Modules Now that we have DotNetNuke installed into Visual Studio we can go ahead and create our first modules. Actually, creating the modules is pretty simple. But it is even easier to do it […]
  • DotNetNuke – Avoiding Container CollisionDotNetNuke – Avoiding Container Collision So many of the skin and container sets I buy are written in such a way that if I were to mix and match my containers, graphic disaster would strike my page.Fortunately, the problem is […]
  • DotNetNuke – SkinningDotNetNuke – Skinning Today I'm going to start a separate series on Skinning DotNetNuke. Don't worry, I'm still planning to continue the series on creating modules. Later on, I may start a series on something […]
  • DotNetNuke Skins – Hello, WorldDotNetNuke Skins – Hello, World Now that we understand how the ASCX files and CSS files relate to each other, it's time to create our first skin file. Today we are going to deal primarily with the issues of […]

About Dave Bush

Dave Bush is a Full Stack ASP.NET developer. His commitment to quality through test driven development, vast knowledge of C#, HTML, CSS and JavaScript as well as his ability to mentor younger programmers and his passion for Agile/Scrum as defined by the Agile Manifesto and the Scrum Alliance will certainly be an asset to your organization.

  • http://nill helena

    Hi there
    Could you suggest the best place (simple) for me to learn how to create a website using asp.net 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 http://www.newtechusa.com

    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 http://www.aspdotnetstorefront.com, or if you can get by with it, just use http://www.aspdotnetstorefront.com.

    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 http://www.aspdotnetstorefront.com 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.

  • http://www.travelatlantic.com(underconst.) Dbarselow

    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.