Making a Plone Theme. 5 Most Wanted Tips

A presentation at Plone Conference 2007 in October 2007 in Naples, Metropolitan City of Naples, Italy by Denys Mishunov

Slide 1

Slide 1

Making a Plone Theme 10 5 MOST WANTED TIPS

Slide 2

Slide 2

not about PYTHON

Slide 3

Slide 3

not about ZOPE

Slide 4

Slide 4

CSS

Slide 5

Slide 5

PLONE 3

Slide 6

Slide 6

FUN

Slide 7

Slide 7

5

Slide 8

Slide 8

CENTERING THE DESIGN

Slide 9

Slide 9

Fixed-width design

Slide 10

Slide 10

Examples

Slide 11

Slide 11

www.stopdesign.com

Slide 12

Slide 12

www.zeldman.com

Slide 13

Slide 13

www.happycog.com

Slide 14

Slide 14

CSS

Slide 15

Slide 15

#visual-portal-wrapper { width: 980px; margin-left: auto; margin-right: auto; }

Slide 16

Slide 16

Liquid design

Slide 17

Slide 17

#visual-portal-wrapper { margin-left: 20%; margin-left: 10%;gin-right: 10%; margin-right: 20%; }

Slide 18

Slide 18

4

Slide 19

Slide 19

STYLES FOR DIFFERENT INTERNET EXPLORERs

Slide 20

Slide 20

IE = BUG

Slide 21

Slide 21

BUGS !=FUN

Slide 22

Slide 22

• IEFixes7.css • IEFixes8.css • IEFixes6.css

Slide 23

Slide 23

IEFixes.css

Slide 24

Slide 24

in XHTML...

Slide 25

Slide 25

<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]-->" /> />

Slide 26

Slide 26

IEFixes.css

Slide 27

Slide 27

Notes

Slide 28

Slide 28

IE7 is cool!

Slide 29

Slide 29

(at least better than IE6)

Slide 30

Slide 30

  1. Write styles for IE7 at first

Slide 31

Slide 31

  1. Hack for others

Slide 32

Slide 32

How to hack?

Slide 33

Slide 33

for IE6 and lower

Slide 34

Slide 34

  • html

Slide 35

Slide 35

IEFixes.css #portal-top { background: #007AC5; } * html #portal-top { background: #FF8700; }

Slide 36

Slide 36

#portal-top

Slide 37

Slide 37

IEFixes.css #portal-top { background: #007AC5; } * html #portal-top { background: #FF8700; }

Slide 38

Slide 38

Internet Explorer 7

Slide 39

Slide 39

Internet Explorer 6

Slide 40

Slide 40

IEFixes.css #portal-top { background: #007AC5; } * html #portal-top #portal-top { { background: #FF8700; background: #FF8700; }

Slide 41

Slide 41

Internet Explorer 7

Slide 42

Slide 42

Internet Explorer 6

Slide 43

Slide 43

Slide 44

Slide 44

  • html

Slide 45

Slide 45

• • • Valid CSS Easy to use Almost no chance your styles will be broken

Slide 46

Slide 46

3

Slide 47

Slide 47

STYLES ALTERATION

Slide 48

Slide 48

Different sections

Slide 49

Slide 49

Site root News Products About us Contact

Slide 50

Slide 50

in XHTML...

Slide 51

Slide 51

BODY class: string:${here/getSectionFromURL}

Slide 52

Slide 52

NEWS section class=“section-news”

Slide 53

Slide 53

PRODUCTS section class=“section-products”

Slide 54

Slide 54

CONTACT section class=“section-contact”

Slide 55

Slide 55

ABOUT US section class=“section-about-us”

Slide 56

Slide 56

in CSS...

Slide 57

Slide 57

body.section-news { background-color: #007AC5; background-color: #007AC5; } body.section-products { background-color: background-color: #FF8700; #FF8700; } ...

Slide 58

Slide 58

Particular template

Slide 59

Slide 59

in XHTML...

Slide 60

Slide 60

BODY class: ... template-${template/id}

Slide 61

Slide 61

any_cutom_view.pt

Slide 62

Slide 62

in CSS...

Slide 63

Slide 63

body.section-news { background-color: #007AC5; } body.template-any_custom_view { background-color: #34BD0D; background-color: #fff; } ...

Slide 64

Slide 64

Real-life example

Slide 65

Slide 65

Web Couturier www.webcouturier.com

Slide 66

Slide 66

body.section-...

Slide 67

Slide 67

body.template-frontpage_view

Slide 68

Slide 68

• • it is NOT about “Changing a Theme” slight modifications only

Slide 69

Slide 69

2

Slide 70

Slide 70

DROPDOWN MENUS ➚

Slide 71

Slide 71

Examples

Slide 72

Slide 72

www.traust.is

Slide 73

Slide 73

www.htmldog.com

Slide 74

Slide 74

Son Sonofofthe Suckerfish Suckerfish Dropdowns

Slide 75

Slide 75

Patrick Griffiths and Dan Webb

Slide 76

Slide 76

• Accessible • valid CSS • obvious and clean XHTML

Slide 77

Slide 77

PLONE Dropdowns

Slide 78

Slide 78

Slide 79

Slide 79

by Paulo Lopez

Slide 80

Slide 80

• Plone 2.5.x, Plone 2.1.x • manual work • need to read the how-to

Slide 81

Slide 81

PLONE 3

Slide 82

Slide 82

FUN

Slide 83

Slide 83

• Plone 2.5.x, Plone 2.1.x • manual work • need to read the how-to

Slide 84

Slide 84

• Plone 3.0.x • NO manual work • NO need to read the how-to

Slide 85

Slide 85

New Product

Slide 86

Slide 86

webcouturier.dropdownmenu

Slide 87

Slide 87

Site’s structure

Slide 88

Slide 88

Slide 89

Slide 89

Slide 90

Slide 90

• • • uses INavtreeStrategy • works in all modern browsers, incl. Safari, IE6, IE7 uses SitemapQueryBuilder() uses ‘sitemapDepth’ (default == 3) in portal_properties/navtree_properties

Slide 91

Slide 91

1

Slide 92

Slide 92

ROUNDED CORNERS

Slide 93

Slide 93

“Rounded corners in CSS has become sort of a holy grail”

Slide 94

Slide 94

About 20 different techniques

Slide 95

Slide 95

http://css-discuss.incutio.com/? page=RoundedCorners

Slide 96

Slide 96

Pure CSS solution

Slide 97

Slide 97

Example Techniques

Slide 98

Slide 98

Initial Nifty Corners

Slide 99

Slide 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

Slide 100

Slide 100

Images-based solutions

Slide 101

Slide 101

Example Techniques

Slide 102

Slide 102

Sliding Doors

Slide 103

Slide 103

Adam Kalsey technique

Slide 104

Slide 104

http://tutorials.alsacreations.com

Slide 105

Slide 105

And so on...

Slide 106

Slide 106

• 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

Slide 107

Slide 107

JS+CSS solution

Slide 108

Slide 108

• • The most flexible • Does not require additional CSS Does not require nested elements in HTML to be put manually

Slide 109

Slide 109

Examples

Slide 110

Slide 110

Nifty Corners Cube

Slide 111

Slide 111

JQuery corners

Slide 112

Slide 112

• 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

CurvyCorners library

Slide 114

Slide 114

by Cameron Cooke and Tim Hutchison

Slide 115

Slide 115

Pros

Slide 116

Slide 116

• • • • Supports most of the modern browsers Works with borders Works with background images Supports antialiased corners

Slide 117

Slide 117

Slide 118

Slide 118

Cons

Slide 119

Slide 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

Slide 120

Slide 120

Slide 121

Slide 121

Improvement of JS

Slide 122

Slide 122

Slide 123

Slide 123

How it works?

Slide 124

Slide 124

http://www.curvycorners.net/usage.php