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

HomeHomeDevelopment and...Development and...Building ExtensionsBuilding ExtensionsSkinsSkinsBest Practices for including js and css in skinBest Practices for including js and css in skin
Previous
 
Next
New Post
10/14/2011 9:53 AM
 
Hi,

I'm working on my first skin, based on a html "template" I made.
The "template" have quite a few css and js files (jQuery mostly).

So far I haven't read anywhere any advice about where exactly one should place your js/css and how to include them.
(Though I will place them in "css" and "js" folders, and include my css files from style.css)

So my questions are:
(1) What is best practice for including your css and js files in your skin?
(2) What if you have certain styles and js files that will only be used if the page (module) will use this or that elements (for instance my chart scripts and styles)   Of course I can just include them all, but that's an awefull waste of bandwith.
(3) In asp.net mvc I used combress.  Does DNN have something to compress css/js files or is there some commonly used tool.

Any other thoughts on this matter will be really welcome.  All a learning process.

 
New Post
10/14/2011 5:00 PM
 
1. beyond including them in your skin folder there is no particular best practice -personally I like to have a "scripts" folder for js, "styles" for css/hta's and "images" for images. Please make sure you declare the types as needed i.e. parsed skin files as files and others can be wrapped up in resources.zip (http://www.dotnetnuke.com/Resources/W...) . One final note, I recommend using the skinpath token to build paths e.g.

<script type=”text/javascript” src=”<%= SkinPath %>swfobject.js”></script>

2. Im not sure i understand what you're asking, could you expand the question a little.

3.we're adding clientresource management in 6.1.0 to allow concatenation (and optional compression) of js/css -see http://www.dotnetnuke.com/Resources/W... . Please note, you can also set compression under the host settings and it will handle it today.

Buy the new Professional DNN7: Open Source .NET CMS Platform book Amazon US
 
New Post
10/14/2011 11:56 PM
 
Thanks as always for the detailed replies (you got no idea how much you are helping me to get the hang of dnn...especially since I have to figure out webforms all over again.)

Starting at 3.  For one, we still use DNN 5.2 at work (I' rather wait till I'm 100% comfortable with DNN before upgrading, since we are using DNN as intranet with a lot of users and critical functionality).  Also I'd like to create skins that can at least be used in DNN 5 and 6 anyhow.
So I guess I'll just manually minify the css and js files before creating a package.

As for #2: My current design have all js and css files broken up  by what is needed by certain ""omponents".  (Say one for charts, one for forms, one for this, one for that).
One does not need all of the js/css files unless you are using all "components" on a page (thining in terms of html pages now).
On the other hand, with pages and modules (dnn world) I cannot know beforehand what the user (developer....even it's just me now) will be using on a page / module, so I just include every single  css/js file in the template I just started.
While typing it sounds like that's the way to go anyhow, I'll just have to push optimizing the css and scripts as much possible for performance.....and better include them compressed.

Cheers,
Krok
 
New Post
10/15/2011 4:01 PM
 
you can dynamically register javascript via server-side code by using Me.Page.ClientScript.RegisterClientScriptBlock or Me.Page.ClientScript.RegisterStartupScript (depending on where you want it placed), which allows you a bit more granularity.As for CSS you can leverage the core cdefault.AddStyleSheet method to inject css as required.

Buy the new Professional DNN7: Open Source .NET CMS Platform book Amazon US
 
New Post
10/15/2011 4:08 PM
 
Hmmm..more to look into. Thanks.

Do one have to use VB code in skins (prior to dnn6, which I understand are writtent in c#)?

Unintentionally having this and another thread overlap now (http://www.dotnetnuke.com/Resources/Forums/forumid/163/threadid/434835/scope/posts.aspx)
But thing is I'd also like to add meta data tags....not sure if there's an easy way for that as well.

Bit worried if I should use some 3rd party thing (40fingers) or figure out my own way....don't want to force users of my skin to install this or that.

Either case, will nut this one out. Have to or I'm in trouble next week. (made promises before knowing how to do sth..lol)
 
Previous
 
Next
HomeHomeDevelopment and...Development and...Building ExtensionsBuilding ExtensionsSkinsSkinsBest Practices for including js and css in skinBest Practices for including js and css in skin


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