Advanced Skinning  with DotNetNuke 5 Nik Kalyani DotNetNuke Corporation Session Code:  NN.10
Agenda <ul><li>Four Advanced Skinning Techniques </li></ul><ul><ul><li>Style attribute clean-up </li></ul></ul><ul><ul><li...
Skinning Techniques: Style Attribute Clean-up <ul><li>Problem:  DNN framework or Module has hard-coded “style” attribute <...
Skinning Techniques: Content Positioning for SEO <ul><li>Problem:  Navigation and header causes content to appear lower on...
Skinning Techniques: CSS Automation <ul><li>Problem:  CSS declarations are often repetitive and cumbersome to create and m...
Skinning Techniques: CSS Automation (continued) <ul><li>Variables: </li></ul>
Skinning Techniques: CSS Automation (continued) <ul><li>Mixins: </li></ul>
Skinning Techniques: CSS Automation (continued) <ul><li>Operations: </li></ul>
Skinning Techniques: CSS Automation (continued) <ul><li>Nested Rules: </li></ul>
Skinning Techniques: CSS Automation (continued) <ul><li>Usage: </li></ul><ul><ul><li>Install Ruby language compiler and LE...
Skinning Techniques: CSS Class Injection <ul><li>Problem:  Not all desired elements are accessible in CSS using ID, class ...
Skinning Techniques: CSS Class Injection <ul><li>Problem:  Not all desired elements are accessible in CSS using ID, class ...
Skinning Techniques: CSS Class Injection (continued) <ul><li>Selectors: </li></ul><ul><ul><li>Content  :contains(text), :e...
Skinning Techniques: CSS Class Injection (continued) <ul><li>Usage: </li></ul><ul><li><script type=“text/javascript”> </li...
Skin Automation <ul><li>Problems: </li></ul><ul><ul><li>DotNetNuke skinning engine is powerful, but limits skin selection ...
Skin Automation <ul><li>Solution: </li></ul><ul><ul><li>“ Skinfigurator” </li></ul></ul><ul><ul><ul><li>Open Source soluti...
Demo <ul><li>Skinfigurator </li></ul><ul><li>PUURE by Bind </li></ul><ul><li>DNN BluePrint </li></ul>
Evaluation form Vul je evaluatieformulier in en maak kans op een van de prachtige prijzen!! Fill out your evaluation form ...
Upcoming SlideShare
Loading in …5
×

Advanced Skinning With DotNetNuke

1,640 views
1,612 views

Published on

Slide deck from my session on advanced skinning for DotNetNuke 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,640
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
28
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Advanced Skinning With DotNetNuke

  1. 1. Advanced Skinning with DotNetNuke 5 Nik Kalyani DotNetNuke Corporation Session Code: NN.10
  2. 2. Agenda <ul><li>Four Advanced Skinning Techniques </li></ul><ul><ul><li>Style attribute clean-up </li></ul></ul><ul><ul><li>Content positioning for SEO </li></ul></ul><ul><ul><li>CSS automation </li></ul></ul><ul><ul><li>CSS class Injection </li></ul></ul><ul><li>Skinfigurator: Dynamic Skin Selection </li></ul><ul><li>Case Study and Best Practices </li></ul>
  3. 3. Skinning Techniques: Style Attribute Clean-up <ul><li>Problem: DNN framework or Module has hard-coded “style” attribute </li></ul><ul><li>Solution: StyleScrubberWidget </li></ul><ul><li><object id=“Scrub” codetype=“dotnetnuke/client” codebase=“StyleScrubberWidget”> </li></ul><ul><ul><li><param name=“classNames” value=“x;y” /> </li></ul></ul><ul><ul><li><param name=“tag” value=“” /> </li></ul></ul><ul><ul><li><param name=“removeAttribute” value=“” /> </li></ul></ul><ul><ul><li><param name=“recursive” value=“” /> </li></ul></ul><ul><li></object> </li></ul>
  4. 4. Skinning Techniques: Content Positioning for SEO <ul><li>Problem: Navigation and header causes content to appear lower on page </li></ul><ul><li>Solution: RelocationWidget </li></ul><ul><li><object id=“Scrub” codetype=“dotnetnuke/client” codebase=“RelocationWidget”> </li></ul><ul><ul><li><param name=“sourceId” value=“” /> </li></ul></ul><ul><ul><li><param name=“targetId” value=“” /> </li></ul></ul><ul><li></object> </li></ul>
  5. 5. Skinning Techniques: CSS Automation <ul><li>Problem: CSS declarations are often repetitive and cumbersome to create and manage with editor search and replace </li></ul><ul><li>Solution: Use {LESS} CSS compiler to simplify stylesheet creation/maintenance by extending CSS with: </li></ul><ul><ul><li>Variables, Mixins, Operations, Nested Rules </li></ul></ul>
  6. 6. Skinning Techniques: CSS Automation (continued) <ul><li>Variables: </li></ul>
  7. 7. Skinning Techniques: CSS Automation (continued) <ul><li>Mixins: </li></ul>
  8. 8. Skinning Techniques: CSS Automation (continued) <ul><li>Operations: </li></ul>
  9. 9. Skinning Techniques: CSS Automation (continued) <ul><li>Nested Rules: </li></ul>
  10. 10. Skinning Techniques: CSS Automation (continued) <ul><li>Usage: </li></ul><ul><ul><li>Install Ruby language compiler and LESS gem </li></ul></ul><ul><ul><li>Create .less file using LESS shorthand notation </li></ul></ul><ul><ul><li>Compile and publish to final .css file </li></ul></ul><ul><li>Resources: </li></ul><ul><ul><li>http://rubyforge.org/frs/?group_id=167 </li></ul></ul><ul><ul><li>http://lesscss.org </li></ul></ul>
  11. 11. Skinning Techniques: CSS Class Injection <ul><li>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 </li></ul><ul><li>Solution: Use jQuery selectors to easily and consistently inject classes </li></ul>
  12. 12. Skinning Techniques: CSS Class Injection <ul><li>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 </li></ul><ul><li>Solution: Use jQuery selectors to easily and consistently inject classes </li></ul>
  13. 13. Skinning Techniques: CSS Class Injection (continued) <ul><li>Selectors: </li></ul><ul><ul><li>Content :contains(text), :empty </li></ul></ul><ul><ul><li>Hierarchy parent > child, prev + next </li></ul></ul><ul><ul><li>Visibility :hidden, :visible </li></ul></ul><ul><ul><li>Attribute [attribute=value], [attribute*=value] </li></ul></ul><ul><ul><li>Child :first-child, :only-child </li></ul></ul>
  14. 14. Skinning Techniques: CSS Class Injection (continued) <ul><li>Usage: </li></ul><ul><li><script type=“text/javascript”> </li></ul><ul><ul><li>(function($) </li></ul></ul><ul><ul><li>{ </li></ul></ul><ul><ul><li>// Change all DIV elements that have an attribute ID that </li></ul></ul><ul><ul><li>// ends with “Pane” by adding a Class of “StandardMargin” </li></ul></ul><ul><ul><li>$(“div[id$=‘Pane’]”).addClass(“StandardMargin”); </li></ul></ul><ul><ul><li>// Add a Class of “selected” to the last P element </li></ul></ul><ul><ul><li>$(&quot;p:last&quot;).addClass(&quot;selected&quot;); </li></ul></ul><ul><ul><li>})(jQuery); </li></ul></ul><ul><li></script> </li></ul><ul><li>Resources: http://docs.jquery.com/Selectors </li></ul>
  15. 15. Skin Automation <ul><li>Problems: </li></ul><ul><ul><li>DotNetNuke skinning engine is powerful, but limits skin selection to site or page </li></ul></ul><ul><ul><li>Designers often need skin selection to be dynamic based on role membership, site section, or other run-time criteria </li></ul></ul><ul><ul><li>Designers also would like some aspects of their skin to be customizable by site admins </li></ul></ul>
  16. 16. Skin Automation <ul><li>Solution: </li></ul><ul><ul><li>“ Skinfigurator” </li></ul></ul><ul><ul><ul><li>Open Source solution to make DNN skins more configurable by adding rule-based automation capabilities </li></ul></ul></ul>
  17. 17. Demo <ul><li>Skinfigurator </li></ul><ul><li>PUURE by Bind </li></ul><ul><li>DNN BluePrint </li></ul>
  18. 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

×