Products

Solutions

Resources

Partners

Community

Blog

About

QA

Ideas Test

New Community Website

Ordinarily, you'd be at the right spot, but we've recently launched a brand new community website... For the community, by the community.

Yay... Take Me to the Community!

Welcome to the DNN Community Forums, your preferred source of online community support for all things related to DNN.
In order to participate you must be a registered DNNizen

HomeHomeUsing DNN Platf...Using DNN Platf...Skins, Themes, ...Skins, Themes, ...Skin using YUI grid layoutSkin using YUI grid layout
Previous
 
Next
New Post
10/6/2008 10:23 PM
 

Sorry for the nube question:

What is the recommended method for adding custom JavaScript includes to DNN pages/skins?  I could just include them in default.aspx.  But that would be messy since they would get applied to all pages in all portals.  Ideally, I would like to include external/custom JavaScript files in skins...somehow.

I just picked up DotNetNuke Skinning and Design from WROX.  I have yet to find any mention of the "correct" way to do this.

Thanks in advance.

~ Garth

 

 

 
New Post
10/8/2008 5:05 AM
 

Garth Brown wrote

Sorry for the nube question:

What is the recommended method for adding custom JavaScript includes to DNN pages/skins?  I could just include them in default.aspx.  But that would be messy since they would get applied to all pages in all portals.  Ideally, I would like to include external/custom JavaScript files in skins...somehow.

I just picked up DotNetNuke Skinning and Design from WROX.  I have yet to find any mention of the "correct" way to do this.

Thanks in advance.

~ Garth

 

TRY ADDING THIS TO YOUR SKIN FILE:

<script runat="server">
'SEE BLOG HERE: http://blogs.snapsis.com/CommentView,guid,eef98c82-f54d-480b-8e36-309ca6e406d8.aspx
Private Sub Page_Init(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Init
Dim oCSS As Control = Me.Page.FindControl("CSS")
 If Not oCSS is Nothing Then

   'add a script reference for Javascript to the head section
   Dim oLink As New HtmlGenericControl("link")
  oLink.Attributes("rel") = "stylesheet"
  oLink.Attributes("type") = "text/css"
  oLink.Attributes("media") = "print"
  oLink.Attributes("href") = SkinPath & "print.css"
  oCSS.Controls.AddAt(0, oLink)
 
'to add another css style sheet uncomment the lines below
'  oLink = New HtmlGenericControl("link")
'  oLink.Attributes("rel") = "stylesheet"
'  oLink.Attributes("type") = "text/css"
'  oLink.Attributes("media") = "screen"
'  oLink.Attributes("href") = SkinPath & "screen.css"
'  oCSS.Controls.AddAt(0, oLink)

'to add javascript files uncomment the lines below
   oLink = New HtmlGenericControl("script")
   oLink.Attributes("language") = "javascript"
   oLink.Attributes("type") = "text/javascript"
   oLink.Attributes("src") = SkinPath & "extra.js"
   oCSS.Controls.AddAt(0, oLink)

'to add another javascript file uncomment the lines below
'   oLink.Attributes("src") = SkinPath & "sifr-config.js"
'   oCSS.Controls.AddAt(0, oLink)

  End if

End Sub
</script>

 
New Post
10/8/2008 2:10 PM
 

Adski,

Thanks so much for the answer.  This is clean and it works!

The only issue I have with this technique is when it inserts tags like "link", it uses a seperate closing tag rather than self-closing the tag.  This prevents XHTML validation:

Invalid: <link></link>

Valid: <link />

Nonetheless, you have got me a long way down the road.

Thanks!

 

 

 

 

 
New Post
10/8/2008 6:34 PM
 

There is more than one way to "skin" this cat.

At Adski's suggestion, I looked at John Mitchell's technique for including custom .js files by defining them in your HTML skins.  This works well for JavaScripts but John suggests that you could also include .css files using a LINK tag.  The problem is that per XHTML, LINK tags must self-close.  John's technique will render but not validate.  Here is how I got both js and css includes AND without breaking XHTML rules.

I add this to the top of my HTML skin.

<script runat="server">
    Private Sub Page_Init(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Init
       
        Dim header As Web.UI.HtmlControls.HtmlHead
        header = TryCast(Me.Page.Header, Web.UI.HtmlControls.HtmlHead)
       
        If header IsNot Nothing Then
            ' First CSS Include
            Dim oLink As New HtmlLink
            oLink.Attributes.Add("rel", "stylesheet")
            oLink.Attributes.Add("type", "text/css")
            oLink.Attributes.Add("media", "screen")
            oLink.Attributes.Add("href", SkinPath & "yui/build/reset-fonts-grids/reset-fonts-grids.css")
            header.Controls.Add(oLink)

            ' Second/Third/Etc CSS Include
            oLink = New HtmlLink
            oLink.Attributes.Add("rel", "stylesheet")
            oLink.Attributes.Add("type", "text/css")
            oLink.Attributes.Add("media", "screen")
            oLink.Attributes.Add("href", SkinPath & "yui/build/button/assets/skins/sam/button.css")
            header.Controls.Add(oLink)

            ' First JavaScript Include           
            Dim oScript As New HtmlGenericControl("script")
            oScript.Attributes("type") = "text/javascript"
            oScript.Attributes("src") = SkinPath & "yui/build/yahoo-dom-event/yahoo-dom-event.js"
            header.Controls.Add(oScript)
           
            ' Second/Third/Etc JavaScript Include
            oScript = New HtmlGenericControl("script")
            oScript.Attributes("type") = "text/javascript"
            oScript.Attributes("src") = SkinPath & "yui/build/animation/animation-min.js"
            header.Controls.Add(oScript)
        End If

    End Sub
</script>

Note that HtmlGenericControl will not self-close but HtmlLink will.  SCRIPT tags can close with </script> but LINK tags must self-close like <link />.  Thus you'll stay XHTML compliant.

I hope this helps someone else down the road.  Thanks to Adski and John Mitchell.

~ Garth

 
Previous
 
Next
HomeHomeUsing DNN Platf...Using DNN Platf...Skins, Themes, ...Skins, Themes, ...Skin using YUI grid layoutSkin using YUI grid layout


These Forums are dedicated to discussion of DNN Platform and Evoq Solutions.

For the benefit of the community and to protect the integrity of the ecosystem, please observe the following posting guidelines:

  1. No Advertising. This includes promotion of commercial and non-commercial products or services which are not directly related to DNN.
  2. No vendor trolling / poaching. If someone posts about a vendor issue, allow the vendor or other customers to respond. Any post that looks like trolling / poaching will be removed.
  3. Discussion or promotion of DNN Platform product releases under a different brand name are strictly prohibited.
  4. No Flaming or Trolling.
  5. No Profanity, Racism, or Prejudice.
  6. Site Moderators have the final word on approving / removing a thread or post or comment.
  7. English language posting only, please.
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out