Identifying CSS Files and Class Definitions

To identify the CSS files and class definitions used for a particular page, view the page. Use the "View Source" capability of your Web browser to identify the cascading style sheet files and class definitions pertinent to any page of PPM you are viewing.

Example: Finding Information for a PPM Dashboard Page

In this example, assume that you are considering changing the format for the title of the Budget by Business Objective portlet (which could potentially change the formatting for all portlet titles).

To identify the cascading style sheet and class definition:

1. Log on to PPM.

2. Navigate to a PPM Dashboard page that contains the Budget by Business Objective portlet.

3. View the HTML source for the page.

   • From Microsoft Internet Explorer, select View > Source.

   • From Mozilla Firefox, select View > Page Source.

4. Search the HTML source for the string "Budget by Business Objective" (the title of the portlet as it appears on the page) until you find something similar to the following text:

   <td class='page-title page-title-spacing title-line'>

   <span id='visiblePortletTitle'>Budget by Business Objective</span>

   From this HTML snippet you can determine that the class definitions you want to evaluate include the string visiblePortletTitle.

5. Search backwards in the HTML source for the string "CSS" that is associated with PPM Dashboard style sheets until you find something similar to the following text:

   <link rel=stylesheet href='/dashboard/static/arch/css/df-all.cssx?USER_LOCALE_=en_us' type='text/css' />
   <link rel=stylesheet href='/itg/web/knta/css/PortletSpacing.css' type='text/css'>
   <link rel=stylesheet href='/itg/web/knta/dsh/css/Portlet.css' type='text/css'>

   From this HTML snippet you can determine that the class definition is likely to be in either the df-portal.css, portlet.css, or portlet-extensions.css file in the dashboard.war directory. If the class definitions are not found in any of these CSS files, repeat this step until you locate the information.

To make changes to the PPM Dashboard-related cascading style sheet requires a number of steps. See Modifying Style Sheets for details.

Example: Finding Information for a Non-Dashboard Page

For this example, assume that you are considering changing the Sign Out button borders.

To identify the cascading style sheet and class definition:

1. Log on to PPM.

2. From any page in the standard interface, view the HTML source for the page.

   • From Microsoft Internet Explorer, select View > Source.

   • From Mozilla Firefox, select View > Page Source.

3. Search the HTML source for the string "SIGN OUT" (the text that appears on the button itself) until you find something similar to the following text:

   <td><span class='signOutBtn1'><a href="javascript:onLogout()">SIGN OUT</a></span></td>

   From this HTML snippet you can determine that the class definition you want to evaluate includes the string signOutBtn1.

4. Search backwards in the HTML source for the string "CSS" until you find something similar to the following text:

   <link rel=stylesheet href='/itg/web/knta/global/css/GlobalStyleSheet.css' type='text/css'>

   From this HTML snippet you can determine that the class definition is likely to be found in the GlobalStyleSheet.css which is found in the itg/web/knta/global/css folder on your PPM Server. If the class definition is not found in this CSS files, repeat this step until you locate the information.

Make any changes to the appearance of the Sign Out button in the span.signOutBtn1 (or signOutBtn1) class definition in the GlobalStyleSheet.css file.