Customizing Colors

Summary of steps
Modifying CSS files

LiveCycle Contentspace (Deprecated) uses a set of standard colors that you can customize by modifying cascading style sheet (CSS) files. For example, you can modify the colors to reflect the branding of your organization.

Below is an illustration of Contentspace with different colors for the background, navigational pane, background for the breadcrumb and breadcrumb links, and font used for the selected pane.

Note: Adobe is migrating Adobe® LiveCycle® Content Services ES customers to the Content Repository built on the modern, modular CRX architecture, acquired during the Adobe acquisition of Day Software. The Content Repository is provided with LiveCycle Foundation and is available as of the LiveCycle ES4 release.

View full size graphic

Summary of steps

You must complete these steps to modify the colors in Contentspace:

Set up your development environment. (See Setting Up to Customize LiveCycle Contentspace (deprecated).)
Change the colors using CSS files. (See Modifying CSS files.)
Deploy your customization. (See Deploying a Customized Contentspace (Deprecated).)

Modifying CSS files

You modify most of the colors in Contentspace using CSS files. Typically, you modify the following attributes:

color: The foreground color that is used for fonts.
background-color or background: The background color for the element or class.

For classes or elements that do not have color, background-color, or background defined, you can add them for the purpose of overriding inherited colors. There are eight CSS files that are located in the css folder.

cont.css: The CSS file for the About container.
login.css: The CSS file for the Login page.
main.css: The CSS file for the main page in Contentspace, which includes the header, dashlets, shelf and colors for the navigational tree.
office.css: The CSS file for Microsoft Office plugins available in Content Services (deprecated).
office_ie6.css: The CSS file for Microsoft Office plugins available in Content Services (deprecated) for users that use Microsoft Internet Explorer 6.
opensearch.css: The CSS file used for the search box located in the top-right corner of Contentspace.
xforms.css: The CSS file used for file and image picker dialog boxes in the Contentspace user interface.
yahoo-tree.css: The CSS file most fonts and spacing for the navigational tree.

Before you determine which CSS files to modify, you must know what you want to customize in Contentspace. You can determine the elements to change by experimenting or you can view the JSP files to determine the elements or classes you need to modify. For the procedure below, the following colors are changed, which are all in the main.css file:

The background color
The background color for the breadcrumb and the color for the breadcrumb links
The color of text used in current space
The background of the navigational pane

Instead of deleting or removing the original attribute that you are changing, comment it out with surrounding /* */ syntax. You can also use the comment syntax to describe the changes you are making.

To modify colors using CSS files:

From the root level in your development environment, go to the css folder.
Using an editor, open the main.css file.
Search for the body tag and change the background-color attribute to a color you want, such as#98FB98.

        body  
        { 
            font-family: Tahoma, Arial, Helvetica, sans-serif; 
            /*background-color: white;*/ 
            background-color: #98FB98; 
            margin: 3px; 
        }

Find .mainTitle class and change the color attribute to a color you want, such as #ff60cb.

        .mainTitle 
        { 
            /*color: #004488;*/ 
            color: #ff60cb; 
            font-size: 16px; 
            font-weight: bold; 
            vertical-align: middle; 
        }

Find .headerBarTitle class and change the color and background attributes to a color you want, such as #ff60cb and #98FB98 respectively.

        .headbarTitle 
        { 
            /* color: #004488; */ 
            color: #ff60cb; 
            font-size: 14px; 
            font-weight: bold; 
            margin-top: 5px; 
            margin-bottom: 5px; 
            /* background: #dfe6ed; */ 
            background: #98FB98; 
            vertical-align: center; 
            padding-left: 6px; 
        }

Find .navigatorPanelBody class and add the background-color attribute and set it to a color you want, such as #ff60cb.

        .navigatorPanelBody 
        { 
            height: 330px; 
            width: 220px; 
            overflow: auto; 
            background-color: #ff60cb; 
        }