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.
Modifying CSS files
You modify most of the colors in Contentspace using CSS
files. Typically, you modify the following attributes:
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 /* */
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.
font-family: Tahoma, Arial, Helvetica, sans-serif;
Find .mainTitle class
and change the color attribute to a color you want,
such as #ff60cb.
Find .headerBarTitle class and change the color and background attributes
to a color you want, such as #ff60cb and #98FB98 respectively.
/* color: #004488; */
/* background: #dfe6ed; */
Find .navigatorPanelBody class and add the background-color attribute
and set it to a color you want, such as #ff60cb.