Making a Plone Theme. 5 Most Wanted Tips

5 most often asked styling questions on the plone users mailing list in 2007.

Plone Conference 2007, Naples, Italy

Transcript

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