My current favourite DNN Skinning Techniques

Here are my current favourite DNN skinning techniques:

1. Apply HTML5 Doctype to all Skins

In DNN9, there is no Fallback Doctype setting in the Host Settings anymore. So you need to add a special XML file to your skin folder so DNN knows what doctype you want to use. You can download the file here.

And here's a reference if you want to know more: https://www.dnnsoftware.com/docs/designers/creating-themes/create-doctype-xml.html

2. Smooth Scroll

Up until recently, if you wanted smooth scrolling your website you had to use JavaScript to achieve that. Now you can use this super simple line of CSS and it works across the board!

html {
  scroll-behavior: smooth;
}

3. Detect if the PersonaBar is present in DNN9

A lot of the designs I work with have fixed or sticky positioned elements and I need to be able to adjust those things when the user has the PersonaBar on the side of their screen. Currently, DNN 9 only detects if user is in Edit Mode, but it's useful to know if the PersonaBar is present and add CSS to adjust it. So I add a little JS to detect if the PersonaBar is present, and then add a CSS class to the body tag.

<script>
if ($(".personalBarContainer").length ) {
    $("body#Body").addClass("has-persona-bar");
}
</script>

Now that the .has-persona-bar class is set, I can add CSS that is only active when the CSS class is there. Here's a really rudimentary example:

/* header is fixed for non-logged in users. turn off fixed header for admins */
.header {
    position: fixed;
    top: 0;
    left: 0;
}

body#Body.has-persona-bar .header {
    position: relative;
}

4. Move Bootstrap Modals to the body#Body tag

Bootstrap needs modals to be at the body tag level. When you make a skin or a module, the modals would be nested inside of your skin or module so it's not at the right z-index that it needs to be. The problem appears when you open a modal and the modal overlay is appearing above the modal. So the simple fix is to use a little bit of JavaScript to simply move the modal to the body level. I use this script in my skin.js file which applies to all modals.

$(document).ready(function() {
     $(".modal").appendTo("#Body");
});

5. Hide the 2SXC pane controls

I love 2SXC but I really don't like the controls that are inserted inside the panes for admins. My content editors are typically non-technical users and I don't want them adding modules to pages. These controls are easy to accidentally hit so I use some simple CSS to hide them.

.sc-content-block-menu.sc-content-block-quick-insert {
	display: none !important;
	visibility: hidden !important;
}