Session Code: NN.10

Advanced Skinning with DotNetNuke 5

Nik Kalyani

DotNetNuke Corporation

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

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>

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>

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

Skinning Techniques:

CSS Automation (continued)

• Variables:

Skinning Techniques:

CSS Automation (continued)

• Mixins:

Skinning Techniques:

CSS Automation (continued)

• Operations:

Skinning Techniques:

CSS Automation (continued)

• Nested Rules:

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

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

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

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

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

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

Skin Automation

• Solution:

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

configurable by adding rule-based automation capabilities

Demo

• Skinfigurator

• PUURE by Bind

• DNN BluePrint

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