|
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 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
/* */
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;
}
|
|
|
