How to set references to CSS and JS in a DotNetNuke skin?

Question

Does anyone know how the precedence works for CSS and JS references in DotNetNuke?

I understand this precedence can be set via a Priority property of the dnn:DnnJsInclude and dnn:DnnJsInclude tags.

It hasn't proved trivial to port an html page with multiple css and js references to a simple skin, where the references to the CSS and JS files are done by the dnn:DnnJsInclude and dnn:DnnJsInclude tags.

I suspect (and hope!) there is a set of values for the priority property that allows the skin to behave exactly as the original html page.

Chris Hammond Chris Hammond · Accepted Answer · 2015-08-11T14:30:23

You're going to need to pay attention to the loading order of the default CSS files in DNN, and adjust your priority based on those orders, to control where your files load.

My HammerFlex skin has some good examples of loading order for CSS and Javascript for bootstrap.

https://github.com/ChrisHammond/HammerFlex/blob/master/Home.ascx

<dnn:JQUERY ID="dnnjQuery" runat="server" jQueryHoverIntent="true" />
<dnn:DnnJsInclude ID="bootstrapJS" runat="server" FilePath="js/bootstrap.min.js" PathNameAlias="SkinPath" Priority="10" />
<dnn:DnnCssInclude ID="bootStrapCSS" runat="server" FilePath="css/bootstrap.min.css" PathNameAlias="SkinPath" Priority="14" />
<dnn:DnnJsInclude ID="bluImpJS" runat="server" FilePath="js/jquery.blueimp-gallery.min.js" PathNameAlias="SkinPath" />

How to set references to CSS and JS in a DotNetNuke skin?

1 Answers