DocumentationAEM 6.5User Guide

Changing the color scheme of the interface changing-the-color-scheme-of-the-interface

Last update: Thu Mar 14 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

You can modify the color scheme of AEM Forms workspace user interface portions to suit your requirements. Following are some examples of representative color scheme customizations. In addition to the steps discussed in this article, see Generic steps for AEM Forms workspace customization.

Top navigation bar top-navigation-bar

Using background image using-background-image

To update the navigation bar at the top of AEM Forms workspace.

  1. Create a background image to update the color. Name the file as newBackground.jpg.

  2. Upload the background image file in /apps/ws/images folder using a WebDAV client.

    note note
    NOTE
    For more information, see WebDAV Access.

  3. Reference the new background image in /apps/ws/css/newStyle.css by adding following style.

    code language-css 
    #header {
    background:#292929 url(../images/newBackground.jpg) repeat-x;
}

Using color property in CSS using-color-property-in-css

  1. Add the following style in newStyle.css at /apps/ws/css

    code language-css 
    #header {
background : none;
background-color: gray;
}

Category component category-component

Category component displays the various categories of your tasks in the left panel. To change its color, define the background color in .category element of the CSS file.

Task component task-component

Tasks are displayed in the middle panel called the TaskList Component. To change its color, modify the style associated with .task selector in the style sheet.

recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2