• it is NOT about “Changing a Theme”
• slight modifications only
Slide 69
Slide 69 text
2
Slide 70
Slide 70 text
DROPDOWN
MENUS
MENUS
➚
Slide 71
Slide 71 text
Examples
Slide 72
Slide 72 text
www.traust.is
Slide 73
Slide 73 text
www.htmldog.com
Slide 74
Slide 74 text
Son of Suckerfish
Dropdowns
Suckerfish
Son of the
Slide 75
Slide 75 text
Patrick Griffiths
and
Dan Webb
Slide 76
Slide 76 text
• Accessible
• valid CSS
• obvious and clean XHTML
Slide 77
Slide 77 text
Dropdowns
PLONE
Slide 78
Slide 78 text
No content
Slide 79
Slide 79 text
by Paulo Lopez
Slide 80
Slide 80 text
• Plone 2.5.x, Plone 2.1.x
• manual work
• need to read the how-to
Slide 81
Slide 81 text
PLONE 3
Slide 82
Slide 82 text
FUN
Slide 83
Slide 83 text
• Plone 2.5.x, Plone 2.1.x
• manual work
• need to read the how-to
Slide 84
Slide 84 text
• Plone 3.0.x
• NO manual work
• NO need to read the how-to
Slide 85
Slide 85 text
New Product
Slide 86
Slide 86 text
webcouturier.dropdownmenu
Slide 87
Slide 87 text
Site’s structure
Slide 88
Slide 88 text
No content
Slide 89
Slide 89 text
No content
Slide 90
Slide 90 text
• uses INavtreeStrategy
• uses SitemapQueryBuilder()
• uses ‘sitemapDepth’ (default == 3) in
portal_properties/navtree_properties
• works in all modern browsers, incl. Safari,
IE6, IE7
Slide 91
Slide 91 text
1
Slide 92
Slide 92 text
ROUNDED
CORNERS
Slide 93
Slide 93 text
“Rounded corners
in CSS has become
sort of a holy grail”
• 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
Slide 100
Slide 100 text
Images-based
solutions
Slide 101
Slide 101 text
Example Techniques
Slide 102
Slide 102 text
Sliding Doors
Slide 103
Slide 103 text
Adam Kalsey technique
Slide 104
Slide 104 text
http://tutorials.alsacreations.com
Slide 105
Slide 105 text
And so on...
Slide 106
Slide 106 text
• 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
Slide 107
Slide 107 text
JS+CSS solution
Slide 108
Slide 108 text
• The most flexible
• Does not require nested elements in
HTML to be put manually
• Does not require additional CSS
Slide 109
Slide 109 text
Examples
Slide 110
Slide 110 text
Nifty Corners Cube
Slide 111
Slide 111 text
JQuery corners
Slide 112
Slide 112 text
• First seems not to work with borders and
background images
• The second one doesn’t work nice with
Safari and requires JQuery
Slide 113
Slide 113 text
CurvyCorners library
Slide 114
Slide 114 text
by
Cameron Cooke
and
Tim Hutchison
Slide 115
Slide 115 text
Pros
Slide 116
Slide 116 text
• Supports most of the modern browsers
• Works with borders
• Works with background images
• Supports antialiased corners
Slide 117
Slide 117 text
No content
Slide 118
Slide 118 text
Cons
Slide 119
Slide 119 text
• 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