Clarity PPM Studio UI Themes

ccppmop158
User interface (UI) themes determine the look and feel of the 
Clarity PPM
 application pages for all users as seen through their web browsers. The application includes stock UI themes that you can select to change the color, log in information, branding, and other aspects of the user interface. You can also create a custom UI theme that is specific to your business needs. Your custom UI theme can adjust or extend the settings that are present in the stock themes. You can customize the logo, the application name, tabs, buttons, icons, login page, and other features.
If a custom UI theme does not exist in a third-party application that is integrated with 
Clarity PPM
, the default UI theme in the third-party application is used.
You can import or export a UI theme using the XML Open Gateway. Use the specific UI themes XML read and write files for UI themes that are provided with the XML Open Gateway. 
 
 
2
 
 
Stock UI Themes
The following standard UI themes are included with Classic Clarity PPM:
  • Navy Blue
  • Red
  • Blue
  • Black and White
  • High Contrast
  • Teal and Grey
  • Phoenix UI
 You cannot edit or delete the original stock UI themes. However, you can make a copy to create your own UI theme.
Apply a UI Theme
When you select a new UI theme, you see the change reflected in the application immediately. Other users see the change on their next login.
 
Follow these steps:
 
  1. Open 
    Administration
    , and from 
    Studio
    , click 
    UI Themes
    .
    The UI themes list appears.
  2. Select the theme that you want to apply.
  3. Click 
    Save
    .
Apply a UI Theme to a Partition
You can apply a distinctive UI theme, including a logo and colors, to a partition. Partitions without a designated UI theme inherit the UI theme of their closest ancestor partition.
  • Users who are members of the partition see the new appearance.
  • Users who belong to multiple partitions with different UI themes can go to Account Settings and select a default partition to determine their primary UI theme.
  • Users who are not members of any partition always see the UI theme of the system partition.
 
Follow these steps:
 
  1. Open 
    Administration
    , and from 
    Studio
    , click 
    Partition Models
  2. Click the name of a partition model.
  3. Click 
    Partitions
    .
  4. Click the name of a partition.
  5. In the UI Theme field, select a theme.
  6. Click 
    Save and Return
    .
Custom UI Themes
If the stock UI themes do not meet your business needs, you can create a custom UI theme by copying and modifying the CSS text of one of the stock themes. The following graphic shows the page areas in the application that you can customize:
 
Image showing CA PPM page areas that you can modify with UI themes.
 
The following table describes the page areas in the application that you can customize:
Section:
 
Area:
 
 
Possible Modifications:
 
|
 
Main page header
 
  • Logo
  • Company name
  • Links
  • Icons
  • Fonts
  • Colors (application background)
||
 
Main menu bar
 
  • Menu bar icons (Back, Recent Pages, Refresh, Home, Search)
  • Menu icons (Next, Previous, Refresh)
  • Fonts
  • Colors
|||
 
Workspace
 
  • Fonts
  • Colors (background, buttons, headers, tabs, portlets)
  • Tab styles
  • Button styles
  • Portlet headers
You can adjust fonts, colors, sizes, and other properties under the 
/* Login page CSS styles */
 section.
Create a Custom UI Theme in 
Clarity PPM
 Studio
Modify an existing custom or stock UI theme that is closest in appearance to the new theme you want to create. This method provides you with predefined UI features that you can adjust until you have the look you want.
You can edit styles in the CSS style sheet, but do not remove them. Removing a style can cause the UI to render incorrectly. 
Clarity PPM
 always expects a theme to be applied, and the styles that are specified in the Default UI theme are required.
 
Follow these steps:
 
  1. Open Administration, and from Studio, select UI Themes.
  2. Click the name of the UI theme that is closest to the look that you want.
    The properties page appears displaying the CSS style sheet.
  3. Select and copy all of the code in the CSS text box and click Return.
  4. Click New.
  5. Paste the copied text into the CSS text box.
  6. Modify the standard CSS style sheet property values. Use the examples in this article to guide you. Comments in the stylesheet identify the area in the user interface that you can modify.
  7. Enter a name for the UI theme in the Name field.
  8. Enter a unique alphanumeric string of up to 60 characters to identify the UI theme in the ID field.
  9. The Active check box determines if users can select the UI theme. Select Active to make the theme available to others. Clear the check box to hide the theme.
  10. Click Save and Return.
  11. Select the theme and click Save.
    The selected theme is applied.
Custom UI Theme Main Page Header
The following examples show how you can modify the CSS text from a stock UI theme to alter items in the main page header.
 
Product Name
 
To change the product name, replace 
CA PPM
 with a new name in the following section:
/* The product name itself */ #ppm_header_product span:before, #ppm_header_product_small span:before { content: "CA PPM"; }
The product name appears in the page title, the page header, and the Login page.
 If a syntax error prevents your custom name from being parsed and applied, the default value of 
CA PPM 
appears. The following error appears in the application log file:
Error getting product name from the selected default ui theme. Ensure that the section used to set the product name is valid.
 
Main Page Background Color
 
To change the background color of the main page, locate the following statement and define the color that you want.
/* The main page background color */ .ppm_page_bg { background: #04152d; background: -webkit-gradient(radial,50% 10, 1, 50% 100, 600, from(#052E5F), to(#04152D )); background: -moz-radial-gradient(50% 10% 0deg,ellipse contain, #052E5F, #04152D); }
 
Logo
 
Several tools are available on the Internet that let you convert an image to a base64 string. Paste the base64 encoded string in the CSS as shown in the following example. The example shows an abbreviated base64 string.
/* The logo in the upper left hand corner of the page header */ #ppm_header_logo { background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAqCAYAAADxughHAAAKMElEQVRo3s1Z93eT5xX+ AFvykoe85C3b2tuSLMmSB95gbMwIJcwwbGagISRAFg0JK6xAmGGUk7TNaU8TaEvapOn4157eez/ ... 3QxXFJCmwgpmVNd0BSMAc3z2HD1EQCydTsFoC19qcQPq+Wi9Ks4LzvZQtY52Fz7+QFmW+DxMx2vJe43816f1xNGKfhAAAAABJRU5ErkJggg==); margin: 6px 0px 0px 15px; width: 50px; height: 42px; }
Custom UI Theme Image
Most images in 
Clarity PPM
 have corresponding cascading style sheet (CSS) class names. These classes can be added or overridden in the CSS code that you provide for the custom UI theme. For example, if you want to change the image for the portlet Options button (the button at the top right corner of a portlet), you can identify the class name for that UI element using browser built-in developer tools or an external third-party plugin. You can override the stock class definition, as shown in the following example:
/* The image for the portlet options button in the upper right corner of the page header */ .caui-workspaceWorkspaceHeadBtn { background: url(data:image/png;base64,<base_64_encoded_source_text_of_the_intended_image>); margin: <intended_margin_coordinates>; width: <intended_width>; height: <intended_height>; }
Custom UI Theme Main Menu Font and Color
The following section controls the color and fonts used in the main menu bar.
/* The main omnibar/navigation bar below the header */ #ppm_omnibar { background-color: #7791AB; background: -moz-linear-gradient(#7791AB, #4C6786); background: -webkit-gradient(linear, center top, center bottom, from(#7791AB), to(#4C6786)); background: linear-gradient(#7791AB, #4C6786); -pie-background: linear-gradient(#7791AB, #4C6786); color: #001122; font-family: Helvetica Neue,Arial,sans-serif; font-weight: bold; }
 
Change Main Menu Hover Styles
 
/* The omnibar button hover styles */ .ppm_omnibar_button:hover { border: 1px solid #566a7c; } /* The styles of the primary navigation menus when hovered */ .ppm_nav_menu_hover { background-color: #f5f8fa; color: #335588; }
Custom UI Theme Workspace Background Color
/* Button styles */ .ppm_button { border-top: 1px solid #c4d1e1; border-bottom: 1px solid #889ab5; border-left: 1px solid #bccee4; border-right: 1px solid #889ab5; background: -webkit-gradient(linear, center top, center bottom, color-stop(0, #ebf4fc), color-stop(.5, #d9e9fc), color-stop(.52, #c6ddf6), color-stop(1,#c3d3eb)); background-image: -moz-linear-gradient(center top, #ebf4fc 0%, #d9e9fc 50%, #c6ddf6 52%, #c3d3eb 100%); background: linear-gradient(center top, #ebf4fc 0%, #d9e9fc 50%, #c6ddf6 52%, #c3d3eb 100%); -pie-background-image: linear-gradient(center top, #ebf4fc 0%, #d9e9fc 50%, #c6ddf6 52%, #c3d3eb 100%); }
Custom UI Theme 
Tab Style
 
/* Top-level tabs */ .ppm_tab { background-color: #B3C8DB; background: linear-gradient( #B3C8DB, #92A8BE ); background: -moz-linear-gradient(#B3C8DB, #92A8BE); background: -webkit-gradient(linear, 0% 100%, 0% 0%, from(#B3C8DB), to(#92A8BE)); filter: progid:DXImageTransform.Microsoft.Gradient( GradientType=0, startColorStr='#B3C8DB', endColorStr='#92A8BE' ); } /* Top-level selected tab */ .ppm_sel_tab { background-color: #E8EBF2; background: -moz-linear-gradient(#FFF, #e3e7ec); background: -webkit-gradient(linear, center top, center bottom, from(#FFF), to(#e3e7ec)); background: linear-gradient(#FFF, #e3e7ec); filter: progid:DXImageTransform.Microsoft.Gradient( GradientType=0, startColorStr='#FFFFFF', endColorStr='#e3e7ec' ); } /* The top-level tab labels */ .ppm_tab > a, .ppm_sel_tab > a { }
Custom UI Theme 
Button Style
 
/* Button styles */ .ppm_button { border-top: 1px solid #c4d1e1; border-bottom: 1px solid #889ab5; border-left: 1px solid #bccee4; border-right: 1px solid #889ab5; background: -webkit-gradient(linear, center top, center bottom, color-stop(0, #ebf4fc), color-stop(.5, #d9e9fc), color-stop(.52, #c6ddf6), color-stop(1,#c3d3eb)); background-image: -moz-linear-gradient(center top, #ebf4fc 0%, #d9e9fc 50%, #c6ddf6 52%, #c3d3eb 100%); background: linear-gradient(center top, #ebf4fc 0%, #d9e9fc 50%, #c6ddf6 52%, #c3d3eb 100%); -pie-background-image: linear-gradient(center top, #ebf4fc 0%, #d9e9fc 50%, #c6ddf6 52%, #c3d3eb 100%); } /* Button styles when hovered */ .ppm_button:hover { background: -webkit-gradient(linear, center top, center bottom, color-stop(0, #f8fbff), color-stop(.5, #e4effb), color-stop(.52, #d1e4f8), color-stop(1,#c5d5eb)); background-image: -moz-linear-gradient(center top, #f8fbff 0%, #e4effb 50%, #d1e4f8 52%, #c5d5eb 100%); background: linear-gradient(center top, #f8fbff 0%, #e4effb 50%, #d1e4f8 52%, #c5d5eb 100%); -pie-background-image: linear-gradient(center top, #f8fbff 0%, #e4effb 50%, #d1e4f8 52%, #c5d5eb 100%); }
Custom UI Theme Login Page
You can also use the UI theme CSS to customize the appearance of the login page. For example, set a custom logo for an organization or set a message for all users to view when they log in. A sample system maintenance message appears as follows:
The system will be unavailable from Sun April 15 at 11:30 pm until Mon April 16 at 3:30 am.
The following image shows a custom UI theme login page.
Image showing a sample custom UI theme login page
Image showing a sample custom UI theme login page
 
1. Login Page Top Message
 
You can add a service announcement or custom message at the top of the login page.
/* The login service message */ #ppm_login_message_top span:before{ content: "Custom UI Theme Message 1 at the top"; }
 
2. Login Page Bottom Message
 
You can add a service announcement or custom message at the bottom of the login page.
/* The login service message */ #ppm_login_message_bottom span:before{ content: "Custom UI Theme Message 2 at the bottom"; }
 
3. Login Page Logo
 
Convert your custom logo image to a base64 encoded string and paste it into the following section:
/* CA PPM Logo */ #ppm_login_logo { background: url(data:image/filetype;base64, my_image_base64_string); margin: 6px 0px 0px 15px; width: 150px; height: 50px; }
The image 
filetype 
string is included in the base64 conversion result and represents the original image type. For example, gif, jpeg, or png. Copy and paste the base64 string over 
my_image_base64_string
 in the code. The string can be long (30,000 characters). To view it, scroll to the right. Also specify the width and height values for your image.
 We recommend that you optimize your image before you convert it to the base64 string. An image optimization tool such as Smush.it can produce a smaller encoded string.
To convert your image to a base64 encoded string, use an online conversion utility available at the following sites:
Phoenix UI Theme
The 15.5.1.1 patch introduced a new Phoenix UI theme designed to invite Classic Clarity PPM users into the new aesthetics and styling of the Clarity PPM Modern UX which made its debut in Release 15.1 as the New User Experience. CA Clarity PPM 15.5.1.1, 15.6, and higher releases include this new optional UI theme.
To preview the theme, watch the following demo video:
 7811 
The following image highlights some of the new styling and compares traditional PPM UI themes with the new Phoenix UI theme:
Phoenix UI Theme
Phoenix UI Theme
  • The new UI theme provides an attractive visual skin over Classic PPM functionality. In addition to its new styling, the Clarity PPM New User Experience offers a completely redesigned set of features. The New UX and Classic PPM remain two distinct user interfaces, and some users will prefer to keep them visually distinct; however, for users who prefer consistency, the Phoenix UI theme helps unify the user experience.
  • Documentation, training, and Support KBs continue to specify when steps must be performed in the New UX and when they must be performed in Classic PPM. When using both Classic and the 
    New User Experience
    , users must be aware of which interface they are using. In addition, their access rights and other configuration options determine which features and options appear in their user interface.
  • Classic Clarity PPM with the Phoenix UI theme applied does not support Internet Explorer 11.
Minor Known Issue with Links and Notes on Task Properties Dialog
In Clarity PPM 15.5.1 and newer releases, when the Phoenix UI theme is applied over the Classic PPM interface, the modal window for Task Properties might not display the two small links for Links and Notes.