Understanding the style sheet

Before customizing workspace, make yourself familiar with the default style sheet supplied with AEM Forms at /libs/ws/css/style.css.

To customize the workspace, it is recommended that you make yourself familiar with the existing style sheet, style.css, located in /libs/ws/css folder. A few prominent components are described below.

CSS elementUser interface component modified
#headerHeader of the AEM Forms workspace
.categoryListCategory list
.categoryList .headerHeader of category list
.categories, .filtersSpace below category list
.category, .filterCategory
.category:hover, .category.selected, .filter:hover, .filter.selectedSelected category and mouse over style of category
categoryListBar .tool, categoryListBar .contentStart process page (closed Category list)
filterListBar .tool, filterListBar .contentTo Do page (closed Filter list)
processNameListBar .tool, processNameListBar .contentTracking page (closed Process name list)
.startPointList, .tasklistThe startpoint list or the task list
.startPointList .header, .tasklist .headerThe header of a startpoint list or a task list
.startpoint.selected, .task.selectedThe selected startpoint or task
.startpoint.selected .description, .task.selected .descriptionDescription of the selected startpoint or task
#taskareaThe Task area
#header .dropdownUser dropdown in header
.sortDrop dd ulSort task dropdown