5 most wanted plone theme tips - Denis Mishunov (spliter)¶

One piece of news: plone solution will be renamed in JARN (updated: that's jarN, not jarL, tnx limi for mailing the correction!).

Ok. The top 5 things he gets asked css-wise, with solutions.

Tip 5: centering the design. Many fixed-width sites center the design horizontally. For this, use the #visual-portal-wrapper, give it a fixed width and a margin-rigth and margin-left of auto. That's the css way of centering it.

Tip 4: styles for different internet explorers. Plone has a special IEfixes.css file for IE-specific fixes. That's for all IE browsers, it doesn't distinguish between various versions.

If you write styles for internet explorer, target IE7 first and hack it for other IE versions afterwards. For those IE6 versions, use the * html hack.

Tip 3: styles for different sections of your site. Plone marks the body text with a section-NAMEOFSECTION class, so you can use body.section-products to create a different layout to that section of the site. Likewise with templates. You also have a class that includes the template name. body.template-frontpage_view for instance.

Don't use these to change the whole layout of your site, just change small things like background colors or images.

Tip 2: dropdown menus. The best way is the so-called suckerfish-dropdowns. Denis made a handy plone3 product for it to make it an out-of-the-box experience: webcouturier-dropdownmenu . The good thing is that it works in all modern browsers.

Tip 1: rounded corners. Designers think they have to put rounded corners everywhere. Plone has xhtml hooks in portlets and so for the corners. With some simple (but not trivial) CSS you can make them round. There's a fixed set of images for the corners, so it is inflexible.

Another solution is a combination of javascript+css. The javascript reacts on a class you've put on your portal (for instance). Very flexible and the least intrusive for your html. Cross-browser support is hard, though. A suggestion Denis made was to look at http://www.curvycorners.net/usage.php .

Here also, he's got a product for plone3. collective.roundedcorners. He's going to put it online in a few days :-)