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:

• Framework
• Portal (Site)
• Skin
• Container(s)
• Module(s).
  

The Framework stylesheet always gets loaded, the others only get loaded if they apply / exist.

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

Notes

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.

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.
File Location:
/Portals/_Default/Skins/"MySkin"/Skin.css
or
/Portals/"PortalFolder"/Skins/"MySkin"/Skin.css

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.
File Location:
/Portals/_Default/Skins/"MySkin"/"SkinName".css
or
/Portals/"PortalFolder"/Skins/"MySkin"/"SkinName".css

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.
File Location:
/Portals/_Default/Containers/MyContainer/Container.css
or
/Portals/"PortalFolder"/Containers/MyContainer/Container.css

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.
File Location:
/Portals/_Default/Containers/ MyContainer /"ContainerName".css
or
/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.

File Location:

/DestopModules/"ModuleName"/Module.css

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.

File Order:

• Module.css
• Default.css
• Skin.css
• Skinname.css
• Container.css
• Containername.css
• Portal.css
  

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)