Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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,820 views

Published on

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

Published in: Technology
  • Be the first to comment

  • Be the first to like this

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

×