Products

Solutions

Resources

Partners

Community

About

New Community Website

Ordinarily, you'd be at the right spot, but we've recently launched a brand new community website... For the community, by the community.

Yay... Take Me to the Community!

  • 4/7/2015
  • 7303 Views

Comments

7303 Views

Stylesheets

Last updated long time ago

Comments

Common

(Enter the content of this article below)

Advanced

 
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 explained

However 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 here

Stylesheet 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 skins

How 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.
Contents
No sections defined
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out