CODEWITHSUNDEEP
javascriptcssdotnetnuke
Hugo Nava Kopp
Hugo Nava Kopp

Reputation: 3064

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

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.

Upvotes: 1

Views: 878

Answers (1)

Chris Hammond
Chris Hammond

Reputation: 8943

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" />

Upvotes: 1

Related Questions