DotNetNuke CSS Precedence
DotNetNuke CSS Precedence – DotNetNuke skinning isn’t easy exactly how CSS files from the framework get loaded at runtime. You need to spend time for fine tuning the details such as typography, padding, margin, and so on. There is secret of understanding DotNetNuke CSS precedence.
There are many CSS files being loaded on a page when a user lands on your site. Depending on how your site is configured (how many modules you have on a page, etc), there can be several CSS files the user must download and it can definitely affect performance. In HTML development it’s a good practice to separate content and design. The CSS styles that make up the actual design are defined in separate files called stylesheets.DotNetNuke loads several style sheets for a page. For every level of DotNetNuke there is a style sheets that could be loaded / used.
Hierarchy of CSS in DotNetNuke:
- Module.css
- Default.css
- Skin.css
- NewSkin.css
- Container.css
- NewContainer.css
- Portal.css
FRAMEWORK STYLESHEET:
This file that contains basic framework CSS, gets loaded for every portal (Site) in your installation of DotNetNuke.This is the only stylesheet that always gets loaded.
File Location:
/Portals/Default/Default.css
PORTAL / SITE STYLESHEET:
This file is specific to a portal.
By default it does not contain any CSS, but it can be edited by a site admin from within DNN to overrule CSS in the skins. (Mostly used for small tweaks).
File Location: /Portals/”PortalFolder/Portal.css
Points to Ponder:
If you remove this file from the portal folder it does not get loaded through the file manager. This is the file you edit if you use the stylesheet editor on the Site Settings page. It is there to allow an admin to overwrite CSS defined in one of the other stylesheets.Currently there is no possibility to edit the other stylesheets from the admin interface.
SKIN PACKAGE RELATED STYLESHEETS:
These style sheets only get loaded if they exist in the skin package.
(if you don’t add them to the skin package, there won’t be a link in the head of the page)
STYLESHEETS FOR ALL SKINS:
Style sheet that contains CSS for all the skins in a package. If a Skin.css file exists in the package it will load for every skin in the package.
Location:
/Portals/~Default/Skins/”NewSkin”/Skin.css
or
/Portals/”PortalFolder”/Skins/”NewSkin”/Skin.css
STYLESHEET FOR A SPECIFIC SKIN:
Style sheet with the same name as a skin file (.ascx).It is used to overwrite styles from Skin.css for that specific skin variation.
Location:
/Portals/~Default/Skins/”NewSkin”/”SkinName”.css
or
/Portals/”PortalFolder”/Skins/”NewSkin”/”SkinName”.css
STYLESHEET FOR ALL CONTAINERS:
Style sheet that contains CSS for all the Containers in a package. If a Container.css file exists in the package it will load for every container used from the package.
Location:
/Portals/~Default/Containers/NewContainer/Container.css
or
/Portals/”PortalFolder”/Containers/NewContainer/Container.css
STYLESHEET FOR A SPECIFIC CONTAINER:
Style sheet with the same name as a container file (.ascx).It is used to overwrite styles from Container.css for that specific container variation.
Location:
/Portals/~Default/Containers/ NewContainer /”ContainerName”.css
or
/Portals/”PortalFolder”/Containers/ NewContainer /”ContainerName”.css
STYLESHEETS FOR MODULES:
Some modules come with a style sheet with some basic CSS to make sure the module renders ok.
If a module on the page has a Module.css file it will get loaded.
Obviously only the Style sheets of modules on the page are loaded.
Location:
/DestopModules/”ModuleName”/Module.css