nuxeo • Themes

The CSS property editor is getting a usability overhaul. In its current form it consists of:

• 2 edit mode buttons (CSS / FORM)
• a drop-down list of CSS selectors (h1, a:hover, form input, …)
• a group of  style category buttons (all, color, background, border, font, image)
• the actual input fields for setting CSS properties
• a style picker

CSS property editor (before)

Because of the long list of properties the UI requires a lot of scrolling.

The category buttons are not very useful because they target the wrong elements, for example to change the color of a font it seems more intuitive to go to the Font section than to the Color section. The Image category begs the question: the image of what?

So what are the changes?

• we use the Tahoma font for better readibility
• property names are right-aligned to better match labels and input fields
• we use a more neutral style picker icon
  
• we show already set properties first to minimize the need for scrolling
• we introduce new style categories: backgrounds, borders, font, text, visual, …
• we use an accordion layout (+/-) to display categories and properties

CSS property editor (after)

A word about CSS3

The compatibility level is CSS 2.1 by default.

But since newer generations of web browsers are beginning to support CSS level 3, a CSS3 button is added to get access to visual features such as:

• box-shadow
• text-shadow
• border-radius
• border-image