• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Advanced Skinning with DotNetNuke 5
 

Advanced Skinning with DotNetNuke 5

on

  • 2,653 views

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

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

Statistics

Views

Total Views
2,653
Views on SlideShare
2,647
Embed Views
6

Actions

Likes
0
Downloads
19
Comments
0

1 Embed 6

http://www.slideshare.net 6

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Advanced Skinning with DotNetNuke 5 Advanced Skinning with DotNetNuke 5 Presentation Transcript

    • Advanced Skinning with DotNetNuke 5 Nik Kalyani DotNetNuke Corporation Session Code: NN.10
    • 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
        • $(&quot;p:last&quot;).addClass(&quot;selected&quot;);
        • })(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