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.
Other post in DotNetNuke - Skinning
- DotNetNuke Skinning - Getting Set Up - June 10th, 2008
- DotNetNuke Skins - Handling CSS Files - June 12th, 2008
- DotNetNuke Skins - Hello, World - June 17th, 2008
- DotNetNuke Skins - Skin Objects - June 19th, 2008
- DotNetNuke Skinning - Dealing with Images - July 3rd, 2008
- DotNetNuke - Avoiding Container Collision - June 11th, 2012
- Infinite DotNetNuke Skin Sets For One Low Price - August 14th, 2012
- DotNetNuke Skins - ASCX vs HTML mode - November 6th, 2012
- DotNetNuke Skinning - Collapsible Containers - January 8th, 2013
- DotNetNuke Skinning - Standard CSS Classes - February 5th, 2013
- DotNetNuke - Skinning - March 12th, 2013
- DotNetNuke Skinning - Containers - December 18th, 2013
- DotNetNuke Skinning - SolPartMenu - January 29th, 2014