About DotNetNuke Stylesheets
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.
These "parts" are:
- Portal (Site)
The Framework stylesheet always gets loaded, the others only get loaded if they apply / exist.
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.
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).
NotesIf 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.Be careful with changes to portal.css. If they are in fact corrections for a specific skin, it's better to edit skin.css. If you don't, you can get unexpected results if you ever use the skin package in another installation or portal.
Skin package related Stylesheets
These stylesheets 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
Stylesheet 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.
Stylesheet for a specific Skin
Stylesheet with the same name as a skin file (.ascx).It is used to overwrite styles from Skin.css for that specific skin variation.
Stylesheet for all Containers
Stylesheet 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.
Stylesheet for a specific Container
Stylesheet with the same name as a container file (.ascx).It is used to overwrite styles from Container.css for that specific container variation.
/Portals/_Default/Containers/ MyContainer /"ContainerName".css
/Portals/"PortalFolder"/Containers/ MyContainer /"ContainerName".css
StyleSheets for Modules
Some modules come with a stylesheet 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 Stylesheets of modules on the page are loaded.
DotNetNuke Style sheet load order
If you want to create DNN skins effectively it is important to understand the order in which the stylesheets get loaded.
The order is; Modules, Framework, Skin, Container, Portal.
This means an Admin can always overrule any CSS by editing Portal.css, because it is loaded last.
Also Read: Use of IDs and Classes in Containers and Skin
Note: DotNetNuke CSS Precedence, What You Should Know.
by Cuong Dang is another good resource that covers this area.FORMATTER ERROR (Snippet Not Found)