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)

  1. Write styles for IE7 at first

  1. 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