Advanced Skinning with DotNetNuke 5

18
Session Code: NN.10 Advanced Skinning with DotNetNuke 5 Nik Kalyani DotNetNuke Corporation

description

Slide deck from my session on advanced DotNetNuke skinning at SDN/OpenForce in Fall 2009.

Transcript of Advanced Skinning with DotNetNuke 5

Page 1: Advanced Skinning with DotNetNuke 5

Session Code: NN.10

Advanced Skinning with DotNetNuke 5

Nik Kalyani

DotNetNuke Corporation

Page 2: Advanced Skinning with DotNetNuke 5

Agenda

• Four Advanced Skinning Techniques– Style attribute clean-up– Content positioning for SEO– CSS automation– CSS class Injection

• Skinfigurator: Dynamic Skin Selection

• Case Study and Best Practices

Page 3: Advanced Skinning with DotNetNuke 5

Skinning Techniques:

Style Attribute Clean-up

• Problem: DNN framework or Module has hard-coded “style” attribute

• Solution: StyleScrubberWidget<object id=“Scrub” codetype=“dotnetnuke/client”

codebase=“StyleScrubberWidget”><param name=“classNames” value=“x;y” /><param name=“tag” value=“” /><param name=“removeAttribute” value=“” /><param name=“recursive” value=“” />

</object>

Page 4: Advanced Skinning with DotNetNuke 5

Skinning Techniques:

Content Positioning for SEO

• Problem: Navigation and header causes content to appear lower on page

• Solution: RelocationWidget<object id=“Scrub” codetype=“dotnetnuke/client”

codebase=“RelocationWidget”><param name=“sourceId” value=“” /><param name=“targetId” value=“” />

</object>

Page 5: Advanced Skinning with DotNetNuke 5

Skinning Techniques:

CSS Automation

• Problem: CSS declarations are often repetitive and cumbersome to create and manage with editor search and replace

• Solution: Use {LESS} CSS compiler to simplify stylesheet creation/maintenance by extending CSS with:– Variables, Mixins, Operations, Nested Rules

Page 6: Advanced Skinning with DotNetNuke 5

Skinning Techniques:

CSS Automation (continued)

• Variables:

Page 7: Advanced Skinning with DotNetNuke 5

Skinning Techniques:

CSS Automation (continued)

• Mixins:

Page 8: Advanced Skinning with DotNetNuke 5

Skinning Techniques:

CSS Automation (continued)

• Operations:

Page 9: Advanced Skinning with DotNetNuke 5

Skinning Techniques:

CSS Automation (continued)

• Nested Rules:

Page 10: Advanced Skinning with DotNetNuke 5

Skinning Techniques:

CSS Automation (continued)

• Usage:– Install Ruby language compiler and LESS gem– Create .less file using LESS shorthand notation– Compile and publish to final .css file

• Resources:http://rubyforge.org/frs/?group_id=167

http://lesscss.org

Page 11: Advanced Skinning with DotNetNuke 5

Skinning Techniques:

CSS Class Injection

• Problem: Not all desired elements are accessible in CSS using ID, class or child selector; also advanced selectors do not work consistently across all browsers

• Solution: Use jQuery selectors to easily and consistently inject classes

Page 12: Advanced Skinning with DotNetNuke 5

Skinning Techniques:

CSS Class Injection

• Problem: Not all desired elements are accessible in CSS using ID, class or child selector; also advanced selectors do not work consistently across all browsers

• Solution: Use jQuery selectors to easily and consistently inject classes

Page 13: Advanced Skinning with DotNetNuke 5

Skinning Techniques:

CSS Class Injection (continued)

• Selectors:– Content :contains(text), :empty– Hierarchy parent > child, prev + next– Visibility :hidden, :visible– Attribute [attribute=value], [attribute*=value]– Child :first-child, :only-child

Page 14: Advanced Skinning with DotNetNuke 5

Skinning Techniques:

CSS Class Injection (continued)

• Usage:<script type=“text/javascript”>

(function($){

// Change all DIV elements that have an attribute ID that// ends with “Pane” by adding a Class of “StandardMargin”$(“div[id$=‘Pane’]”).addClass(“StandardMargin”);

// Add a Class of “selected” to the last P element$("p:last").addClass("selected");

})(jQuery);</script>

• Resources:http://docs.jquery.com/Selectors

Page 15: Advanced Skinning with DotNetNuke 5

Skin Automation

• Problems:– DotNetNuke skinning engine is powerful, but

limits skin selection to site or page– Designers often need skin selection to be

dynamic based on role membership, site section, or other run-time criteria

– Designers also would like some aspects of their skin to be customizable by site admins

Page 16: Advanced Skinning with DotNetNuke 5

Skin Automation

• Solution:

– “Skinfigurator”• Open Source solution to make DNN skins more

configurable by adding rule-based automation capabilities

Page 17: Advanced Skinning with DotNetNuke 5

Demo

• Skinfigurator

• PUURE by Bind

• DNN BluePrint

Page 18: Advanced Skinning with DotNetNuke 5

Evaluation form

Vul je evaluatieformulier in en maak kans op een van de prachtige prijzen!!

Fill out your evaluation form and win one of the great prizes!!

Session Code: NN.10