Customizing Fonts in Contentspace (Deprecated)

Summary of steps
Modifying fonts using CSS files

LiveCycle Contentspace (Deprecated) uses a set of standard fonts but your organization may have a set of standard fonts that it would like to use. You can customize Contentspace to use your organization’s fonts. In addition to customizing fonts, you can also change the size, weight, and angle of a font. For example, you can change the headers to be a larger font size that is bolded, or bold links when the mouse hovers above them.

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.

Summary of steps

You must complete these steps to modify the fonts in Contentspace.

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

Modifying fonts using CSS files

You modify the fonts in LiveCycle Contentspace using CSS files. It is recommended that, when you add new fonts that you want to use, you type them as a first entry for the attribute, and users have the fonts installed on their computers. The following attributes are typically used to customize fonts:

font-family: Specifies the fonts that are used. To use a preferred font, place it first in the comma-delimited list of fonts.
font-size: Specifies the size of the font, usually specified in pixels (px).
font-weight: Specifies the weight of the font, such as normal, bold, and bolder.
font-style: Specifies the style of font, such as italics, normal, or oblique.

For classes or elements that do not have font-family, font-size, font-style, or font-weight defined, you can add them for the purpose of overriding fonts.

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. For the procedure below, the following customizations are made:

The font of links becomes bold when the mouse hovers over them.
The size of the fonts in the header are modified to be larger and bold.

To modify fonts using CSS files:

From the root level in your development environment, go to the css folder.
Using an editor, open the main.css file.
Find element a:hover class and change the font-weight attribute to bold.

        a:hover 
        { 
            color: #4272B4; 
            text-decoration: underline; 
            /* font-weight: normal; */ 
            font-weight: bold; 
        }

Find .mainTitle class and change font-size, font-weight, and font-style to 20px, bold, and italics respectively.

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