Your SlideShare is downloading. ×
Advanced Skinning with DotNetNuke 5
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Advanced Skinning with DotNetNuke 5

1,879

Published on

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.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,879
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
21
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Advanced Skinning with 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
    • <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>
  • 4. 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>
  • 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:
    • <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
  • 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

×