Many times I have been asked the same question by various clients regarding the DotNetNuke CSS load order. Many of them were having difficulties when customizing their modules and skins to have uniform styles. Simply understanding the DotNetNuke CSS hierarchy is essential when performing these tasks.
Understanding DotNetNuke CSS precedence:
- Assists you to create detail-oriented and professional DotNetNuke skins
- Helps to troubleshoot issues with CSS in various context after installing skins and applying to use in a production environment (especially cross-browser troubleshooting)
- Provides the advantage to design your website in a consistent manner by customizing the modules in DotNetNuke
So what’s the CSS hierarchy in DotNetNuke? When users request to view a DotNetNuke web page, the load order for CSS files that a browser will render is as follows:
- Modules.css
- Default.css
- Skin.css
- Container.css
- Portal.css
Now, general CSS rules dictate that the last file loaded in this list is the most important (as in this case, Portal.css will override Container.css and so on). My colleague (Ian Robinson) and I found out that Chapter 16 (page 440) in the Professional DotNetNuke™ 4, Open Source Web Application Framework for ASP.NET 2.0 book has indicated the opposite that the first one to load will override the next. We went to the Wrox.com site to find errata but had no luck! However, we did submit the errata to the site to keep people who are new to DotNetNuke skinning from receiving incorrect information.
I hope having a clear understanding of the DotNetNuke CSS precedence will be helpful in customizing your DotNetNuke skins and modules!