Making a Plone Theme. 5 Most Wanted Tips
A presentation at Plone Conference 2007 in in Naples, Metropolitan City of Naples, Italy by Denys Mishunov
Making a Plone Theme 10 5 MOST WANTED TIPS
not about PYTHON
not about ZOPE
CSS
PLONE 3
FUN
5
CENTERING THE DESIGN
Fixed-width design
Examples
www.stopdesign.com
www.zeldman.com
www.happycog.com
CSS
#visual-portal-wrapper { width: 980px; margin-left: auto; margin-right: auto; }
Liquid design
#visual-portal-wrapper { margin-left: 20%; margin-left: 10%;gin-right: 10%; margin-right: 20%; }
4
STYLES FOR DIFFERENT INTERNET EXPLORERs
IE = BUG
BUGS !=FUN
• IEFixes7.css • IEFixes8.css • IEFixes6.css
IEFixes.css
in XHTML...
<tal:iefixstart replace="structure replace="structure string:<!--[if string:<!--[if IE]>" IE]>" /> /> <tal:iefixstart <style type="text/css" media="all" tal:condition="exists: portal/IEFixes.css" tal:content="string:@import url($portal_url/ IEFixes.css);"> </style> <tal:iefixend <tal:iefixend replace="structure replace="structure string:<![endif]-->" string:<![endif]-->" /> />
IEFixes.css
Notes
IE7 is cool!
(at least better than IE6)
- Write styles for IE7 at first
- Hack for others
How to hack?
for IE6 and lower
- html
IEFixes.css #portal-top { background: #007AC5; } * html #portal-top { background: #FF8700; }
#portal-top
IEFixes.css #portal-top { background: #007AC5; } * html #portal-top { background: #FF8700; }
Internet Explorer 7
Internet Explorer 6
IEFixes.css #portal-top { background: #007AC5; } * html #portal-top #portal-top { { background: #FF8700; background: #FF8700; }
Internet Explorer 7
Internet Explorer 6
- html
• • • Valid CSS Easy to use Almost no chance your styles will be broken
3
STYLES ALTERATION
Different sections
Site root News Products About us Contact
in XHTML...
BODY class: string:${here/getSectionFromURL}
NEWS section class=“section-news”
PRODUCTS section class=“section-products”
CONTACT section class=“section-contact”
ABOUT US section class=“section-about-us”
in CSS...
body.section-news { background-color: #007AC5; background-color: #007AC5; } body.section-products { background-color: background-color: #FF8700; #FF8700; } ...
Particular template
in XHTML...
BODY class: ... template-${template/id}
any_cutom_view.pt
in CSS...
body.section-news { background-color: #007AC5; } body.template-any_custom_view { background-color: #34BD0D; background-color: #fff; } ...
Real-life example
Web Couturier www.webcouturier.com
body.section-...
body.template-frontpage_view
• • it is NOT about “Changing a Theme” slight modifications only
2
DROPDOWN MENUS ➚
Examples
www.traust.is
www.htmldog.com
Son Sonofofthe Suckerfish Suckerfish Dropdowns
Patrick Griffiths and Dan Webb
• Accessible • valid CSS • obvious and clean XHTML
PLONE Dropdowns
by Paulo Lopez
• Plone 2.5.x, Plone 2.1.x • manual work • need to read the how-to
PLONE 3
FUN
• Plone 2.5.x, Plone 2.1.x • manual work • need to read the how-to
• Plone 3.0.x • NO manual work • NO need to read the how-to
New Product
webcouturier.dropdownmenu
Site’s structure
• • • uses INavtreeStrategy • works in all modern browsers, incl. Safari, IE6, IE7 uses SitemapQueryBuilder() uses ‘sitemapDepth’ (default == 3) in portal_properties/navtree_properties
1
ROUNDED CORNERS
“Rounded corners in CSS has become sort of a holy grail”
About 20 different techniques
http://css-discuss.incutio.com/? page=RoundedCorners
Pure CSS solution
Example Techniques
Initial Nifty Corners
• • • • 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
Images-based solutions
Example Techniques
Sliding Doors
Adam Kalsey technique
http://tutorials.alsacreations.com
And so on...
• Plone has XHTML hooks in portlets for this • • Pretty simple (but not trivial) CSS • • Fixed set of images for the corners Most of the cases use nested HTML elements Inflexible for changes
JS+CSS solution
• • The most flexible • Does not require additional CSS Does not require nested elements in HTML to be put manually
Examples
Nifty Corners Cube
JQuery corners
• First seems not to work with borders and background images • The second one doesn’t work nice with Safari and requires JQuery
CurvyCorners library
by Cameron Cooke and Tim Hutchison
Pros
• • • • Supports most of the modern browsers Works with borders Works with background images Supports antialiased corners
Cons
• 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
Improvement of JS
How it works?
http://www.curvycorners.net/usage.php
5 most often asked styling questions on the plone users mailing list in 2007.
Plone Conference 2007, Naples, Italy
for free. You
can too.
