FROM Location: BlogsAnthony Glenwright’s Blog
Some tips for choosing which CSS file to use in DNN for your custom CSS elements.
I get a lot of posts asking about which of DotNetNuke’s CSS files that a portal administrator or web designer should put their custom CSS styles in – especially when end users are customizing the appearance of our SideMenu and TopMenu modules.
DotNetNuke (with a little help from HTML and CSS, of course) gives you a huge amount of flexibility in the layout and design of your website, web portal or web-based application. You can do anything from tweaking a font size or colour here and there to starting a “skin" design from scratch – and DNN implements what I call a “5-tier" model for CSS, where CSS elements for different purposes belong in different CSS files.
Some technical background
The five tiers discussed in this blog are an abstraction – a way of thinking about where to put your CSS to structure it best. Technically, it doesn’t matter which .css file you use – when you have references to multiple CSS files in HTML, they all get counted when the browser renders your output.
The 5 Tiers
module.css:
module.css files exist in the /DesktopModules/[modulename] folder. If there isn’t one already there, you can create the file and it will automatically get used.
Generally I leave the module.css files alone, and reserve them for CSS that the module developer wants to include. If a module developer includes a module.css, it will get overwritten when you next upgrade the module, so it’s a bad place to put your custom css.
portal.css:
portal.css is located in the /portals/[portalid] folder – there’s one for each portal running in your DNN installation. Use portal.css for styles that are intended to be portal-wide. That is, the CSS in portal.css should be intended to affect all skins & pages in your portal. portal.css doesn’t get overwritten when you upgrade modules (or the DNN core), so it’s a safe place to put your custom CSS. I generally create my own skins for each portal, so I tend to use skin.css in favour or portal.css. But if you are using purchased or downloaded skins, this is the best place to put your custom CSS because your skin.css file would be overwritten if you upgrade the skin.
skin.css:
skin.css files are created as part of the skin package – for more detailed information about creating skins, refer to the DNN documentation.
If you control the skin you are using (that is, if you created it yourself instead of purchasing one or using one of the skins that comes with DNN), skin.css is the best place to put your custom CSS elements. The elements in skin.css only affect the skin that the skin.css is for (and all the containers and modules, of course).
container.css:
container.css files are created as part of the container package – for more detailed information about creating containers, refer to the DNN documentation.
container.css should be used for elements that are intended to affect a specific container or group of containers and the modules within them.
portals/_default/default.css:
The default.css file contains CSS defined by the DNN core. This could get overwritten in a DNN upgrade, so it’s safest to leave it alone. However, it contains some non W3C-compliant CSS, so I usually edit it to make it pass the W3C validator.
Summary
The short answer: For custom CSS, if you are designing your own skin, use skin.css. If you are using pre-packaged skins, use portal.css.
The way DNN structures it’s CSS files make CSS seem modular (which is a good thing), but every CSS file referenced within the HTML page that DotNetNuke generates can affect your entire page. There’s no technical reason you can’t put a BODY {background-color: red} in a module.css file, which would affect your entire page, not just the module.
If you exercise some discipline over where you add your own CSS, then the modular nature of the DNN CSS classes works well. If you don’t, it can be very confusing.
唐玄輝. 設計教育的反映實踐者. 