Advanced Skinning With DotNetNuke

download Advanced Skinning With DotNetNuke

of 18

  • date post

    18-Dec-2014
  • Category

    Technology

  • view

    1.495
  • download

    3

Embed Size (px)

description

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

Transcript of Advanced Skinning With DotNetNuke

  • 1. Advanced Skinningwith DotNetNuke 5 Nik Kalyani DotNetNuke Corporation Session Code:NN.10

2. 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

3. Skinning Techniques: Style Attribute Clean-up

  • Problem:DNN framework or Module has hard-coded style attribute
  • Solution:StyleScrubberWidget

4. Skinning Techniques: Content Positioning for SEO

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

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

6. Skinning Techniques: CSS Automation (continued)

  • Variables:

7. Skinning Techniques: CSS Automation (continued)

  • Mixins:

8. Skinning Techniques: CSS Automation (continued)

  • Operations:

9. Skinning Techniques: CSS Automation (continued)

  • Nested Rules:

10. 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

11. 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

12. 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

13. 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

14. Skinning Techniques: CSS Class Injection (continued)

  • Usage:
    • (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);
  • Resources: http://docs.jquery.com/Selectors

15. 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

16. Skin Automation

  • Solution:
    • Skinfigurator
      • Open Source solution to make DNN skins more configurable by adding rule-based automation capabilities

17. Demo

  • Skinfigurator
  • PUURE by Bind
  • DNN BluePrint

18. 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