DotNetNuke uses a system of cascading stylesheets to apply common look and feel across it's installation. These have been in place since the beginning of DotNetNuke and they can be helpful in ensuring a consistent look across a site, or in ensuring that a higher level "brand" is applied to a lower level area (e.g. an item such as the styling for a company logo is defined at the default level and thus applies to all portals within that site).
Read
DotNetNuke Stylesheets explainedHowever the multiple stylesheets, in particular the large default.css are not well liked by designers. Whilst theres nothing to stop a designer deleting the contents of default.css or portal.css (deleting the files themselves will not work as the framework recreates them), this does mean that the skin's created are effectively site specific i.e. if the designer packages them up they need to clear the files on any install the skins are used on. As this is not possible in many cases (e.g. reselling skins), there are a number of solutions.
- To remove elements of an undesired attributes from specific elements on the page, the core StyleScrubberWidget Widget can be used.
- Timo Breumelhof, head of the DotNetNuke skinning group has created a few skin objects to allow for unloading of stylesheets - UnloadCSS and it's successor StyleHelper
Note: the experience team are working on refining the default.css stylesheet, please see
hereStylesheet precedence
The stylesheet references are added in at different points in the skin, leading to an order or precedence i.e. one skin cascades over another, adding to it or overwriting it when it determines a style has a higher precedence. Please see
CSS Wiki article for more details.
The order in which the four types of stylesheet are loaded is as follows:
- Module.css - For every module on a page that has a stylsheet with this name, this gets loaded.
- Default.css - this ships with DotNetNuke and can be found in Portals/_default/
- Skin.css - this is created as part of the skin on the current page and it's contents are defined by the skin designer
- Container.css - this is created as part of the container on the current page and it's contents are defined by the skin designer
- Portal.css - this ships with DotNetNuke. A copy is created for each portal created and can be found by looking in that portal root folder i.e. if it is portal 0, then the portal.css is loaded from the Portals/0 folder
Additional references
Introduction to CSS and inheritance in DotNetNuke skinsHow to configure DotNetNuke Stylesheet - this article has a very handy list of many of the css classes and what they apply to
http://www.thinkofdesign.com/resources/dotnetnuke-skinning-reference/ thinkofdesign have a fantastic online skinng reference covering both skin objects and containers.