Save 37% off PRO during our Black Friday Sale! »

Making a Plone Theme. 5 Most Wanted Tips

80da88fa0ee72ef38bf344cda8a51d82?s=47 Denys Mishunov
September 27, 2011

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

80da88fa0ee72ef38bf344cda8a51d82?s=128

Denys Mishunov

September 27, 2011
Tweet

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

  7. 5

  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%;

  18. 4

  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

  43. None
  44. * html

  45. • Valid CSS • Easy to use • Almost no

    chance your styles will be broken
  46. 3

  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
  69. 2

  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

  78. None
  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

  88. None
  89. None
  90. • uses INavtreeStrategy • uses SitemapQueryBuilder() • uses ‘sitemapDepth’ (default

    == 3) in portal_properties/navtree_properties • works in all modern browsers, incl. Safari, IE6, IE7
  91. 1

  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
  117. None
  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
  120. None
  121. Improvement of JS

  122. None
  123. How it works?

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