Quantcast

Recommendations for Plone compatible design deliverables

This document is intended for web designers unfamiliar with Plone producing designs for integration into a Plone site.

When creating visual designs for Plone, your design will almost always co-exist with Plone's native editing UI. This UI provides elements such as the content tabs, action menus, folder views, visual editor and more. Rarely do projects seek to re-implement these very solid UI components as they are non-trivial to re-design and part of what makes Plone great.

Because of this, it is important to consider how your styles can peacefully coexist with Plone's native markup and CSS for these sections. This document offers a few simple guidelines for producing Plone-integration-friendly visual designs. Following these guidelines will produce designs which will be significantly faster and easier to convert to Plone themes.

Valid XHTML & CSS

Your markup should be XHTML and both your markup and CSS should pass validation.

No global resets

Designers often use a global reset to quickly even out default margin/padding settings between browsers. This wreaks havoc on element in the editing UI which have been thoughtfully styled and are subsequently zero'd out.

For example, the following is a terrible idea:

* {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: inherit;
  font-style: inherit;
  font-size: 100%;
  font-family: inherit;
  vertical-align: baseline;
}

Don't style at the tag level.

For the same reasons as global resets, styling at the tag level is problematic. Constrain your styles with contextual selectors. For example:

don't do:

p {
margin-top: ...
}

or

div {
padding: ...
}

rather, do:

p.newsitem {
margin-top: ...
}

or

div#welcome {
padding: ...
}

Selectors to avoid

While Plone uses many selectors of its own, #content is the one most likely to cause collisions. If you avoid using #content as a selector in your design and id's that start with #portal-, you'll avoid the most common CSS namespace collisions.

These are the selectors to avoid:

#portal-(anything)
#content

Selectors to use for body styles

One of the challenges in styling content inside Plone's O-ring (main content area) is that parts of the editing interface are also displayed in this area. Plone has special wrapper divs which go just below the edit UI. These identifiers are:

class="documentContent" 
id="region-content"

Attaching your body styles downstream of these selectors is an excellent practice to prevent collisions with the drop down menus and tab navigation. Selectors like the following are ideal:

.documentContent li {
margin-left:...
}

#region-content div {
padding:...
}

Thank you's

This document is the result of discussions with designers arcoss several Plone integration projects. Thanks to Mani Sheriar and Indicia Nederland. Made possible thanks to funding from Bay Nature Magazine, International Society for Psychoneuroendocrinology, and Nature and More Foundation.