Skip Navigation

Unload and conditionally load default.css in DNN

Posted in DNN on December 31, 2020

If you build DNN websites, and you care about the design and the front-end performance, then you've probably run into issues with default.css. If you're not familiar, default.css is a CSS files that gets loaded on every DNN website on a DNN instance. So if you had 10 portals on one instance, it would load for all 10. 

Default.css has some really terrible typography styles that really makes the DNN interfaces look rough - bad font size, colour, line heights, and font family. It also has an old CSS reset that you might not want. Not to mention it's loading a bunch of CSS that your interface (and your users) probably don't need. 

I want to show you how I get around this now so you can make your DNN websites even better - more beautiful and faster.

The Backstory

Since I started developing websites in DNN in 2006, default.css has always been a huge pain in my side. I would make a really nice website in HTML and CSS and then when I converted it to a DNN skin and ran it on DNN, all my typography looked terrible. Back when I wasn't so good at CSS and I didn't fully understand how to get around it, I used to just modify the default.css file directly to remove the problematic styles. This isn't a great solution because it's a bit of work to remove all that CSS manually and then default.css gets overriden whenever you do a DNN upgrade anyway.

Eventually, I discovered 40Fingers DNN Skinobject Stylehelper which is a great module and allows you to conditionally unload default.css for SuperUsers and Administrators. So you can unload and load default.css for when you need it but there's a couple of things that is problematic for me:

  1. I don't want to install a 3rd party module. I like to keep the modules installed on my DNN websites as simple as possible
  2. Even though it loads default.css conditionally, it still has conflicting CSS that messes with the user experience when users are logged in

Instead of trying to unload the CSS, I figured out how to simply override the problem styles with my own CSS by leveraging the .Normal class. This is a pretty good solution on its own and I've actually written about how to do that here. The one shortcoming is that it doesn't unload default.css so we're just piling on more CSS to fix a problem.

I wanted to find a solution within DNN that let me unload CSS and I found this solution documented by Brian Dukes. But this only lets you unload, but not conditionally load it back in for users who need it.

After chatting with some other DNN developers, I came up with this very logical solution that I can run inside the DNN skin:

<% if(PortalSettings.UserInfo.IsInRole(PortalSettings.Current.AdministratorRoleName)) { %>
  <dnn:DnnCssInclude runat="server" FilePath="/Resources/Shared/stylesheets/dnndefault/7.0.0/default.css" Priority="5" />
<% } else { %> 
   <dnn:DnnCssExclude runat="server" Name="dnndefault" />
<% } %> 

The idea is that the skin check if the user is an Administrator and unloads the CSS otherwise it doesn't do anything. However, this doesn't seem to work as expected. The code still unloads the default.css no matter what. I've since submitted an issue to DNN so hopefully we get this soon: https://github.com/dnnsoftware/Dnn.Platform/issues/4385

So how do we solve the issue now?

 I've always wanted to figure out the best way to:

  1. Unload default.css for all users
  2. Load it conditionally for users who need it (SuperUsers, Administrators, Content Editors)
  3. Still style the typography well even if the default.css is loading

I achieve this in three parts:

  1. Leverage the Normal class and override the base styles using CSS in my skin: https://wolfxmachina.com/blog/take-control-of-typography-in-dnn-themes
  2. Unload the default.css using <dnn:DnnCssExclude runat="server" Name="dnndefault" /> inside of your .ascx skin file
  3. Use 2sxc and C# Razor templating to conditionally load the default.css file if the user is authenticated. I use the following code inside a common module in my website:
@if (Request.IsAuthenticated) {
 <link rel="stylesheet" href="/Resources/Shared/stylesheets/dnndefault/7.0.0/default.css" data-enableoptimizations="5:head" />
}
else {
  @* don't load the default.css stylesheet *@
}

Notes and caveats:

  • Obviously you need 2sxc installed. You could probably do this in OpenContent as well
  • Note that in my code I'm using the 2sxc code data-enableoptimization="5:head". This loads it in the head at highest priority (5 is where default typically loads so it loads it first to let the skin styles override the typography where necessary)
  • I'm linking to the default.css file that's loading on my particular website. Yours might vary depending on the DNN version
  • I'm only checking for users that are authenticated (logged in) so this applies to anyone. You might want to only apply to SuperUsers, Administrators, and/or Content Editors or other roles
  • For this to work, the 2sxc module has to exist on the page so you might want to put the code in a commonly used module like a page hero or title. And you can't use the method that loads a 2sxc module through the skin (I tried but it doesn't work)

I think this is a pretty sweet solution. We get rid of the default.css for users who don't need it so we get a front end performance boost. And the users who do need it, get it, but the typography isn't overriden so your designs can look and stay consistent.

Is this perfect? No, but I think it's pretty great in the meantime. Perhaps one day, if default.css ever gets fixed, we won't need this solution. But until then, I hope this helps you make your designs even better and faster.

Happy skinning!

If you have any opinions or feedback, I would love to hear it. Or if you need help creating better designs and interfaces for your websites, please get in touch and check out https://wolfxmachina.com/expert-dnn-development

Aaron Lopez

Aaron Lopez

Founder & Lead Developer at Wolf X Machina

See what we can do for you

Our Services

Wolf X Machina Interface Development logo

Wolf X Machina is a team of developers and designers located in Victoria, BC and Saskatoon, SK. We've completed projects for very recognizable brands and our work is used by hundreds of thousands of people around the world.