Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

Making a Plone Theme. 5 Most Wanted Tips

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

Denys Mishunov

September 27, 2011
Tweet

More Decks by Denys Mishunov

Other Decks in Technology

Transcript

  1. CSS

  2. FUN

  3. 5

  4. CSS

  5. 4

  6. <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;" />
  7. #portal-top { background: #007AC5; } * html #portal-top { background:

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

    #FF8700; } IEFixes.css * html #portal-top { background: #FF8700; }
  9. • Valid CSS • Easy to use • Almost no

    chance your styles will be broken
  10. 3

  11. 2

  12. FUN

  13. • uses INavtreeStrategy • uses SitemapQueryBuilder() • uses ‘sitemapDepth’ (default

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

  15. • 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
  16. • 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
  17. • The most flexible • Does not require nested elements

    in HTML to be put manually • Does not require additional CSS
  18. • First seems not to work with borders and background

    images • The second one doesn’t work nice with Safari and requires JQuery
  19. • Supports most of the modern browsers • Works with

    borders • Works with background images • Supports antialiased corners
  20. • 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