Making a Plone Theme: 5 Most Wanted Tips

Loading...

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

2 comments

Comments 1 - 2 of 2 previous next Post a comment

Post a comment
Embed Video
Edit your comment Cancel

12 Favorites & 1 Group

Making a Plone Theme: 5 Most Wanted Tips - Presentation Transcript

  1. Denis Mishunov Plone integrator from Ukraine
  2. THANK YOU
  3. • My wife • Plone community • Vincenzo Barone
  4. Making a Plone Theme 10 MOST WANTED TIPS 5
  5. not about PYTHON
  6. not about ZOPE
  7. CSS
  8. PLONE 3
  9. FUN
  10. 5
  11. CENTERING THE DESIGN
  12. Fixed-width design
  13. Examples
  14. www.stopdesign.com
  15. www.zeldman.com
  16. www.happycog.com
  17. CSS
  18. #visual-portal-wrapper { width: 980px; margin-left: auto; margin-right: auto; }
  19. Liquid design
  20. #visual-portal-wrapper { margin-left: 20%; margin-left: 10%;gin-right: 20%; margin-right: 10%; }
  21. 5
  22. CENTERING THE DESIGN
  23. 4
  24. STYLES FOR DIFFERENT INTERNET EXPLORERs
  25. IE = BUG
  26. BUGS !=FUN
  27. •IEFixes6.css • IEFixes7.css • IEFixes8.css
  28. IEFixes.css
  29. in XHTML...
  30. <tal:iefixstart replace=\"structure string:&lt;!--[if IE]&gt;\" /> <tal:iefixstart replace=\"structure string:&lt;!--[if IE]&gt;\" /> <style type=\"text/css\" media=\"all\" tal:condition=\"exists: portal/IEFixes.css\" tal:content=\"string:@import url($portal_url/ IEFixes.css);\"> </style> <tal:iefixend replace=\"structure string:&lt;![endif]--&gt;\" /> <tal:iefixend replace=\"structure string:&lt;![endif]--&gt;\" />
  31. IEFixes.css
  32. Notes
  33. IE7 is cool!
  34. (at least better than IE6)
  35. 1. Write styles for IE7 at first
  36. 2. Hack for others
  37. How to hack?
  38. for IE6 and lower
  39. * html
  40. IEFixes.css #portal-top { background: #007AC5; } * html #portal-top { background: #FF8700; }
  41. #portal-top
  42. IEFixes.css #portal-top { background: #007AC5; } * html #portal-top { background: #FF8700; }
  43. Internet Explorer 7
  44. Internet Explorer 6
  45. IEFixes.css #portal-top { background: #007AC5; } * html #portal-top { { #portal-top background: #FF8700; background: #FF8700; }
  46. Internet Explorer 7
  47. Internet Explorer 6
  48. * html
  49. • Valid CSS • Easy to use • Almost no chance your styles will be broken
  50. 4
  51. STYLES FOR DIFFERENT INTERNET EXPLORERs
  52. 3
  53. STYLES ALTERATION
  54. Different sections
  55. Site root News Products About us Contact
  56. in XHTML...
  57. BODY class: string:${here/getSectionFromURL}
  58. NEWS section class=“section-news”
  59. PRODUCTS section class=“section-products”
  60. CONTACT section class=“section-contact”
  61. ABOUT US section class=“section-about-us”
  62. in CSS...
  63. body.section-news { background-color: #007AC5; background-color: #007AC5; } body.section-products { background-color: #FF8700; background-color: #FF8700; } ...
  64. Particular template
  65. in XHTML...
  66. BODY class: ... template-${template/id}
  67. any_cutom_view.pt
  68. in CSS...
  69. body.section-news { background-color: #007AC5; } body.template-any_custom_view { background-color: #34BD0D; background-color: #fff; } ...
  70. Real-life example
  71. Web Couturier www.webcouturier.com
  72. body.section-...
  73. body.template-frontpage_view
  74. • it is NOT about “Changing a Theme” • slight modifications only
  75. 3
  76. STYLES ALTERATION
  77. 2
  78. DROPDOWN ➚ MENUS
  79. Examples
  80. www.traust.is
  81. www.htmldog.com
  82. SonSuckerfish of Suckerfish Dropdowns
  83. Son of Suckerfish Dropdowns
  84. Patrick Griffiths and Dan Webb
  85. • Accessible • valid CSS • obvious and clean XHTML
  86. PLONE
  87. Suckerfish PLONE Dropdowns
  88. PLONE Suckerfish
  89. PLONE Dropdowns
  90. by Paulo Lopez
  91. • Plone 2.5.x, Plone 2.1.x • manual work • need to read the how-to
  92. PLONE 3
  93. FUN
  94. • Plone 2.5.x, Plone 2.1.x • manual work • need to read the how-to
  95. • Plone 3.0.x • NO manual work • NO need to read the how-to
  96. New Product
  97. webcouturier.dropdownmenu
  98. Site’s structure
  99. • uses INavtreeStrategy • uses SitemapQueryBuilder() • uses ‘sitemapDepth’ (default == 3) in portal_properties/navtree_properties • works in all modern browsers, incl. Safari, IE6, IE7
  100. 2
  101. DROPDOWN MENUS
  102. 1
  103. ROUNDED CORNERS
  104. “Rounded corners in CSS has become sort of a holy grail”
  105. Cornerstone of designers’ minds
  106. About 20 different techniques
  107. http://css-discuss.incutio.com/? page=RoundedCorners
  108. Pure CSS solution
  109. Example Techniques
  110. Initial Nifty Corners
  111. • The more radius the more complex CSS • Too ugly XHTML • No hooks in Plone • People don’t like dealing with CSS if they can change images
  112. Images-based solutions
  113. Example Techniques
  114. Sliding Doors
  115. Adam Kalsey technique
  116. http://tutorials.alsacreations.com
  117. And so on...
  118. • Plone has XHTML hooks in portlets for this • Pretty simple (but not trivial) CSS • Most of the cases use nested HTML elements • Fixed set of images for the corners • Inflexible for changes
  119. JS+CSS solution
  120. • The most flexible • Does not require nested elements in HTML to be put manually • Does not require additional CSS
  121. Examples
  122. Nifty Corners Cube
  123. JQuery corners
  124. • First seems not to work with borders and background images • The second one doesn’t work nice with Safari and requires JQuery
  125. CurvyCorners library
  126. by Cameron Cooke and Tim Hutchison
  127. Pros
  128. • Supports most of the modern browsers • Works with borders • Works with background images • Supports antialiased corners
  129. Cons
  130. • Some obvious problems when background images are used and box has different radiuses • Other small issues when used with other rounded boxes - box shifts to the top or bottom
  131. Improvement of JS
  132. How it works?
  133. http://www.curvycorners.net/usage.php
  134. PLONE 3
  135. FUN
  136. New Product
  137. collective.roundedcorners
  138. QUESTIONS

+ Denys MishunovDenys Mishunov, 3 years ago

custom

10842 views, 12 favs, 7 embeds more stats

Chart of most wanted tips for people who are workin more

More info about this document

© All Rights Reserved

Go to text version

  • Total Views 10842
    • 10811 on SlideShare
    • 31 from embeds
  • Comments 2
  • Favorites 12
  • Downloads 669
Most viewed embeds
  • 16 views on http://tzicatl.blogspot.com
  • 7 views on http://www.christophermerle.com
  • 3 views on http://knowledgeworkca.blogspot.com
  • 2 views on http://s3.amazonaws.com
  • 1 views on http://www.adii.co.za

more

All embeds
  • 16 views on http://tzicatl.blogspot.com
  • 7 views on http://www.christophermerle.com
  • 3 views on http://knowledgeworkca.blogspot.com
  • 2 views on http://s3.amazonaws.com
  • 1 views on http://www.adii.co.za
  • 1 views on http://blog.cynapse.com
  • 1 views on http://localhost

less

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate. If needed, use the feedback form to let us know more details.

Cancel
File a copyright complaint
Having problems? Go to our helpdesk?

Categories

Groups / Events