Previous Topic: Skin AssociationsNext Topic: How to Use Multiple Skins

CA Identity Manager User Console Design Guide › Branding the User Console › How to Create a Skin

How to Create a Skin

Creating a skin involves the following steps:

  1. Copying an existing skin
  2. Updating the skin’s images
  3. Updating the skin’s colors and fonts
  4. Modifying the .properties file
  5. Modifying the index.jsp file

Copy an Existing Skin

Perform the following procedure to copy an existing skin.

Follow these steps:

  1. Look at the illustrations in CA Identity Manager Skins, and decide which of the following skins is similar to the one that you want to create for your company:

    For illustrative purposes, this section assumes that you chose the look of the neteauto skin and will call it yourskin. The name yourskin is the name of your company’s skin.

  2. Copy the following file:

    iam_im.ear/user_console_war/app/imcss/neteauto

    iam_im.ear/

    Give it the following name:

    iam_im.ear/user_console_war/app/imcss/yourskin

  3. In the yourskin directory, rename the files in the following table:

Current Name

New Name

neteauto.css

yourskin.css

neteauto_task.css

yourskin_task.css

neteauto.properties

yourskin.properties

To simplify administration, the name of the .properties file and the .css files should correspond to the name of the skin.

Note: Skin names are case-sensitive.

Update the Skin Images

Update any of the images (.gif, .jpg, or .png) in the following directories with the images that match the look of your company’s skin:

For example, to put your company’s logo in the yourskin skin, replace logo.jpg from the image directory with your company’s logo.

We recommend using the same image file names because many of these images are already mapped with the appropriate paths in the yourskin.properties file.

Update the Skin Colors and Fonts

Update the yourskin skin’s cascading style sheets with the fonts and menu, background, margin, and other colors of your choice.

The paths to the style sheets are as follows:

Modify the .properties File

Perform the following procedure to modify the .properties file.

Follow these steps:

  1. In the yourskin.properties file, replace every neteauto reference with yourskin.
  2. Make the following additional modifications in the yourskin.properties file:
    1. If it is not already specified, set the following in the parent section: 
          parent=/app/imcss/idm/im.properties

      The parent section specifies the location to the properties file of the parent skin. In this example, the parent skin is idm.

    2. Set the cascading style sheets as follows: 
          stylesheet/skin.css=yourskin/yourskin.css
    stylesheet/skin_task.css=yourskin/yourskin_task.css
    3. Proceed as follows:

      If you replaced the images in the skin without renaming them, go to Step d. If you renamed images, do the following:

      • In the header images section, set the path to header images from Update the Skin Images.

        You can add multiple image entries to the .properties file by adding an entry like the following:

        image/logo.gif=yourskin/image/logo.jpg

      • In the standard tabs section, set the path to tab images from Update the Skin Images.
      • In the task body buttons section, set the path to task body button images from Update the Skin Images.
    4. Save the file.

More information:

Update the Skin Images

Modify the index.jsp File

Perform the following procedure to modify the index.jsp file.

Follow these steps:

  1. Open the index.jsp file in a text editor. This file is located in the following folder:

    <iam_im.ear>/user_console_war/app/imcss

  2. Under the <skin:update> section, add the following as the first entry: 
    <skin:skin name="yourskin" filename="/app/imcss/yourskin/yourskin.properties" />
  3. Save the file.

CA Identity Manager selects the default skin for the CA Identity Manager User Console based on which skin tag is listed first in the <skin:update> section of the index.jsp file.

As noted in the following <skin:update> section from the index.jsp file, CA Identity Manager will display the user console for the yourskin skin:

<skin:update>

<skin:skin name="yourskin" filename="/app/imcss/yourskin/yourskin.properties" />
<skin:skin name="idm" filename="/app/imcss/idm/im.properties" />
<skin:skin name="neteauto" filename="/app/imcss/neteauto/neteauto.properties" />
<skin:skin name="horizontal" filename="/app/imcss/horizontal/horizontal.properties" />
<skin:skin name="horizontal2" filename="/app/imcss/horizontal2/horizontal2.properties" />

</skin:update>

When you want to use a different skin, you need to change the order of the skin tags listed.

Recompile the .jsp Files and Restart the Application Server

If you are running CA Identity Manager on a JBoss application server, you must recompile the JSP files and restart the application server after you have created a skin, as follows:

  1. Configure your application server to recompile all the console.jsp files.
  2. Restart the application server so that the yourskin skin’s changes can take effect.

Note: If you are using a different application server, you do not need to complete this step.