advanced skinning with dotnetnuke
Post on 18-Dec-2014
1.510 Views
Preview:
DESCRIPTION
TRANSCRIPT
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
top related