Note: Modifications to the skins that ship with IBM® Rational® Method Composer are not supported. IBM cannot guarantee that modifications made by users will work in future versions of IBM Rational Method Composer. Please see the support policy.

IBM Rational Method Composer is a platform for process engineers, project leads, and project and program managers who are responsible for maintaining and implementing processes for development organizations or individual projects. They can use Rational Method Composer to model and document their development methods and processes, as well as for reuse from the IBM Rational process library. These processes can be exported in various formats, such as project plans and business models, and published on a Web site. This site then presents a selection of method and process elements in one common look and feel.

Skins change the appearance of a Web site, such as the color scheme, graphics theme, and various elements. By using skins, you can modify the look and feel to fit your requirements.

The option to use skins was added to the Version 7.2 release in response to Rational Method Composer users' requests to be able to make specific changes to the visual presentation. For example, some users wanted to change the order in which information is presented on the various pages; others wanted to omit some model information altogether; some wanted to change the styles, such as fonts and colors, to match their company's guidelines; while others even wanted to use different terminology in places (for example, to call an activity a procedure, instead). You can now make all of these changes to the published site quickly and easily by using skins.

This tutorial teaches you how to create your own custom skins that reflect your company's Web style guide or your own personal taste.

Locations and purposes of essential files

You can create your own skin by copying the Rational Method Composer default skin and then making changes to style sheets (CSS and XSL files) and resource files. Thus, the first thing that you need to know is where to find which files to copy and modify and what they are for, so here's a summary:

• On a Microsoft® Windows® system, after you publish or browse a site for the first time, the default skin for Rational Method Composer is located at
  C:\Documents and Settings\<user name>\RMC\Skins\RMC.
• On Microsoft® Windows Vista®, the default skin location is C:\Users\<username>\RMC\Skins\RMC
• Linux users will find the directory in
  /home/<username>/RMC/Skins/RMC.
• The directory named RMC contains these subdirectories:
  • app_skin, app_widget
  • content_css
  • content_xsl
• The content_css directory contains the default.css file that defines layout and colors settings in the published Web site.
• The content_xsl directory contains .xsl files that are used for defining the layout of the published pages.
• The resources.properties file in the content_xsl directory defines all text strings.

Create a skin

To create your own skin:

1. Make a copy of the existing Rational Method Composer skin directory.
2. Rename it, and start modifying it. For example, name the new skin directory MyCompany_Skin.

After you have made your modifications, you can use your MyCompany_Skin skin for publishing and browsing in Rational Method Composer:

3. Select Windows > Preferences and then drill into the Look and Feel section as shown in the screen capture in Figure 1.
4. In the dialog on the right side, use the drop-down menu for the list of skins available in the skins directory mentioned previously. In your case, select MyCompany_Skin.

Every time that you make more changes to your skin (for example, by following the steps in the next sections), reopen the library by selecting File > Open and preview the results in the Rational Method Composer Browsing perspective. You can also publish your sites using your skin by selecting MyCompany_Skin in the Publishing dialog shown in Figure 2.

The following sections walk you through examples of how to modify your skin in any of these ways:

• Customize colors
• Change the layout of content
• Modify the string resources for text displayed on the pages

Customize colors

In this example, you will change the default.css file by systematically adding a color attribute to several style definitions.

First, change the page title color by adding the color attribute and a HEX color value to the pageTitle class:

1. Open the default.css file from the Content_css directory in a text editor. You can use Notepad or a CSS style editor, if one is available, such as Pager Designer in IBM Rational Application Developer.
2. Search for .pageTitle.
3. Then modify the class as code Listing 1 shows.

                
.pageTitle {
             color: #8B2500;
             font-family: arial, helvetica, sans-serif;
	font-size: 14pt;
	font-weight: normal;
	font-color: #8B0000;
}

See Figure 3 for how the resulting skin would be published, using a task title as an example.

To change the section heading color, add the color attribute to the sectionHeading class as shown in Listing 2.

                
.sectionHeading {
             color: #8B2500;
	font-color: #00688B;
	font-family: arial, helvetica, sans-serif, kanji2;
	font-size: 10pt;
	font-weight: bold;
}

Figure 4 shows the results.

To change the color of the table heading section, add another color attribute to the sectionTableHeading class, as Listing 3 shows.

                
.sectionTableHeading {
            color: #8B2500;
	background: #f8f8f8;
	border-bottom: #e8e8e8 solid 1px;	
	border-left: #e8e8e8 solid 0px;
	border-right: #e8e8e8 solid 0px;
	border-top: #e8e8e8 solid 0px;	
	height: 20;
	text-align: left;
	width: 20%;	
}

Figure 5 shows the result.

To change the color of table cell headings section, add the color attribute shown in Listing for in the sectionTableCelHheading class.

                
.sectionTableCellHeading {
             color: #8B2500;
	font-family: arial, helvetica, sans-serif, kanji2;
	font-size: 8pt;
	font-weight: normal;
	font-color: #666666;
}
      

Finally, change the color of the step headings by changing the code in the color attribute of the stepHeading class, as Listing 5 shows.

                
.stepHeading {
background-color: #ffffff;
color: #8B2500; 
font-family: arial, helvetica, sans-serif, kanji2;
font-size: 10pt;
font-weight: bold;
padding-bottom: 2px;
padding-left: 2px;
padding-top: 2px;
text-decoration: none;
}

Figure 7 shows the result.

With all of these changes together, the resulting page will look like Figure 8.

Control the layout of your pages

By modifying the .xsl files in the content_xsl directory, you can control the layout of the content pages in the Rational Method Composer published Web sites. The XSL files in this directory are named so that you can identify which files you need to modify for which element type. However, there also are some files that define shared layout elements, such as common headers and title bars that are actually "included" by other files to optimize reuse of a standard layout across page types. Table 1 shows some of the files that are included in most of the .xsl files in the content_xsl folder.

Next, we'll cover examples for modifying the page layout for three different types of elements:

• Activities
• Tasks
• Company logos (adding an image link to a company's logo in a common area of all element pages

Modify the page layout for activities

In the Description tab of an Activity page, you normally find sections such as Relationships, Description, Properties, Usage, More Information, and so on. In the next example, you are going to remove the properties section from the page by editing the activity_desc.xsl file in the content_xsl directory.

Figure 9 shows how the Activity pages Description tab is published with the standard activity_desc.xsl file.

1. To remove the Properties section, open the activity_desc.xsl file in a text or XML editor, and search for the propertiesSection string (see Listing 6).

                
<xsl:call-template name="relationshipsSection"/>
<xsl:call-template name="generalTextFieldSection">
<xsl:with-param name="fieldLabel" select="$descriptionText"/>
<xsl:with-param name="fieldText" select=
"$contentDescription/attribute[@name='mainDescription']"/>
</xsl:call-template>
<xsl:call-template name="propertiesSection">
<xsl:with-param name="contentDescription" select=
"$contentDescription"/>
</xsl:call-template>
<xsl:call-template name="IllustrationsSection"/>
<xsl:call-template name="generalTextFieldSection">
<xsl:with-param name="fieldLabel" select="$staffingText"/>
<xsl:with-param name="fieldText" select=
"$contentDescription/attribute[@name='howtoStaff']"/>
</xsl:call-template>
<xsl:call-template name="usageSection">
<xsl:with-param name="contentDescription" select="$contentDescription"/>
</xsl:call-template>
<xsl:call-template name="generalTextFieldSection">
<xsl:with-param name="fieldLabel" select="$keyConsiderationsText"/>
<xsl:with-param name="fieldText" select=
"$contentDescription/attribute[@name='keyConsiderations']"/>
</xsl:call-template>

You can find the XSL code in Listing 6 (previously) between these tags:

<xsl:template match="/Element">
and
<xsl:template>
which is before
<xsl:template name="activityTabs">

2. Delete the call-template element from the code to remove the Properties section from the layout, as Listing 7 shows.

                
<xsl:call-template name="propertiesSection">
<xsl:with-param name="contentDescription" select="$contentDescription"/>
</xsl:call-template>

The resulting Activity page will be published as Figure 10 shows.

If you wanted to move the Properties section to another location, such as behind the Usage section, you could simply cut and paste this call-template element to the right position, just behind the call-template element with the name usageSection.

Modify the page layout for tasks

In the task page, you normally find sections presented in the order shown in Figure 11:

• Purpose
• Relationships
• Main Description
• Steps
• More Information

To change the order of these sections (for example, to move Relationships below Main Description), modify the task.xsl file:

1. Open this file in a text or XML editor and search for relationships. You will find it in the code shown in Listing 8.

                
<xsl:call-template name="purposeSection">
	<xsl:with-param name="description" select="$taskDescription"/>
</xsl:call-template>
<xsl:call-template name="relationshipsSection"/>
<xsl:call-template name="mainDescriptionSection">
	<xsl:with-param name="description" select="$taskDescription"/>
</xsl:call-template>
<xsl:call-template name="stepsSection">
	<xsl:with-param name="description" select="$taskDescription"/>
</xsl:call-template>
      

2. Move <xsl:call-template name=&quot;relationshipsSection&quot;/> from this code:

<xsl:call-template name="relationshipsSection"/>
	<xsl:call-template name="mainDescriptionSection">
	<xsl:with-param name="description" select="$taskDescription"/>
</xsl:call-template>
      

Now it will be as Listing 9 shows.

                
<xsl:call-template name="purposeSection">
	<xsl:with-param name="description" select="$taskDescription"/>
</xsl:call-template>
<xsl:call-template name="mainDescriptionSection">
	<xsl:with-param name="description" select="$taskDescription"/>
</xsl:call-template>
<xsl:call-template name="relationshipsSection"/>
<xsl:call-template name="stepsSection">
	<xsl:with-param name="description" select="$taskDescription"/>
</xsl:call-template>

The resulting task page will be published as Figure 12 shows.

Modify the page layout for delivery processes

A delivery process description page contains following sections (see Figure 13):

• Relationships
  • Context
  • Included Patterns
• Description
• Properties
• Usage

The Included Patterns section contains a list of all of the capability patterns that have been used to construct this particular Delivery Process. Sometimes, you might want to hide this modeling information from the Web site users. To delete this subsection in the Relationships section, edit the activity_desc.xsl file.

Find the element that is shown in Listing 10.

                
<xsl:call-template name="addReferences">
	<xsl:with-param name="refName" select="$includedPatternsText"/>
	<xsl:with-param name="refElement" select=
"referenceList[@name='includesPatterns']/Element"/>
</xsl:call-template>
      

It can be found in between the tags <xsl:template name="relationshipsSection"> and </xsl:template>.

To remove Included Patterns from the description, delete the following call-template element from the code in Listing 11.

                
<xsl:call-template name="addReferences">
	<xsl:with-param name="refName" select="$includedPatternsText"/>
	<xsl:with-param name="refElement" select="referenceList[@name=
'includesPatterns']/Element"/>
</xsl:call-template>

The resulting page will be published as Figure 14 shows.

Modify the header of all pages by adding a logo

All method element pages in a published Rational Method Composer site present a common header that comprises the element's type, name, icon, and a brief description, as well as a list of tool buttons in the top-right corner (see Figure 15).

In this example, you will learn how to add content, such as an image URL for your company's logo, to the right corner of every page. To do this, you must modify the overview.xsl file, which contains the definition of these common header elements that are included in all other pages.

1. Open the overview.xsl file in a text editor, and search for contentPageToolbar. You should see something like what Listing 12 shows.

                
<div align="right" id="contentPageToolbar"/>
</td>
<xsl:if test="$showTreeBrowser">
	<td width="100%" class="expandCollapseLink" align="right">
	      <a name="mainIndex" href="{$backPath}index.htm"/>
	      <script language="JavaScript" type="text/javascript"                 
src="{$backPath}scripts/treebrowser.js"/>
	</td>
</xsl:if>
Now add the following code above <div align="right" id="contentPageToolbar"/>. 
<td width="100%">
      <div align="right">
	<a href="http://www.ibm.com/">
	 <img src="http://www.ibm.com/i/v16/t/ibm-logo.gif" style="background:  black"/>
	</a>
     </div>
     <div align="right" id="contentPageToolbar"/>
</td>

This will add the image on the top-right corner of the page. The href link used here will take you to IBM.com Web site, but you can substitute your company's URL for this URL The final source code will look like Listing 13.

                
<td width="100%">
	<div align="right">
		<a href="http://www.ibm.com">
		<img src="http://www.ibm.com/i/v16/t/ibm-logo.gif"/>
		</a>
	</div>
<div align="right" id="contentPageToolbar"/>
</td>
<xsl:if test="$showTreeBrowser">
	<td width="100%" class="expandCollapseLink" align="right">
	      <a name="mainIndex" href="{$backPath}index.htm"/>
	      <script language="JavaScript" type="text/javascript"                 
src="{$backPath}scripts/treebrowser.js"/>
	</td>
</xsl:if>

The resultant published pages will look like Figure 16.

2. Click the logo to visit the Web site.

Back to top

Change the terminology of the user interface

In the next example, you will replace text strings in the published pages to change the terminology that Rational Method Composer uses to present information. In the example, you are going to change the Team Allocation text (Figure 17) to Roles to label the respective tab in the Activity page.

1. To change the string, open the resources.properties file in the content_xsl directory in a text editor, and search for the words Team Allocation.

You will find the following declaration:
tbsText=Team Allocation

2. Change it to tbsText=Roles.

When you publish or browse an Activity page after this change, the result will look like Figure 18.

Summary

This tutorial showed you how you can customize the look and feel of the Web site that you publish with IBM Rational Method Composer. All it takes is some knowledge of Web style sheets (CSS and XSL), where and which files to edit, and what sections to edit.

Many companies have corporate standards for Web site style and the look and feel. Give it a try and get your published Web pages to conform to those standards or, if you have more latitude, make your Web pages look unique.

Resources

Learn

• To learn more, read IBM Rational Method Composer: Part 1. Key concepts by Peter Haumer, the co-author of this article (IBM developerWorks, December 2005).
  
  
• Visit the W3C Web Style Sheets Home Page to learn more about CSS and XSL style sheets.
  
  
• Learn more about the Extensible Stylesheet Language (XSL).
  
  
• Go through the W3Schools online CSS tutorial to learn how to use CSS to control and customize the look and feel of your Web page.
  
  
• Visit the XML Master site for a useful reference on CSS Colors.
  
  
• Learn more about HTML elements on the Web Design Group site.
  
  
• Visit the Rational software area on developerWorks for technical resources and best practices for Rational Software Delivery Platform products.
  
  
• Explore Rational computer-based, Web-based, and instructor-led online courses. Hone your skills and learn more about Rational tools with these courses, which range from introductory to advanced. The courses on this catalog are available for purchase through computer-based training or Web-based training. Additionally, some "Getting Started" courses are available free of charge.
  
  
• Subscribe to the Rational Edge newsletter for articles on the concepts behind effective software development.
  
  
• Subscribe to the IBM developerWorks newsletter, a weekly update on the best of developerWorks tutorials, articles, downloads, community activities, webcasts and events.
  
  
• Browse the technology bookstore for books on these and other technical topics.
  
  

Get products and technologies

• Download trial versions of IBM Rational software.
  
  
• Download these IBM product evaluation versions and get your hands on application development tools and middleware products from DB2®, Lotus®, Tivoli®, and WebSphere®.
  
  

Discuss

• Check out developerWorks blogs and get involved in the developerWorks community.
  
  

About the authors

Tushara Gangavaram provides tech services to the Rational Unified Process content team and Rational Method Composer development team. She is also responsible for G11N, publishing and QA for Rational Unified Process content and libraries.

Peter Haumer is a solution architect for the IBM Rational Method Composer product platform. He is responsible for defining next-generation process engineering tools, and he represents IBM at the OMG in the SPEM 2.0 initiative. Before joining the Rational Unified Process team, he worked as a senior professional services consultant for the IBM Rational brand. He performed on-site consulting and training, and he assisted and coached customers to be successful with the Rational Unified Process and other Rational tools. His areas of interest include requirements management, object-oriented analysis and design for enterprise application architectures, and software process implementation. Before joining Rational, he worked in basic research in the areas of requirements engineering and flexible process-integrated CASE tool architectures. Peter received his doctorate in computer science from the Technical University Aachen, Germany.

Comments (Undergoing maintenance)

Back to top

Trademarks  |  My developerWorks terms and conditions

Table of contents

• Locations and purposes of essential files
• Create a skin
• Customize colors
• Control the layout of your pages
• Change the terminology of the user interface
• Summary
• Resources
• About the authors
• Comments

Next steps from IBM

• Try: Rational Method Composer
• Webcast: Streamline software delivery to gain market advantage: Series overview
• Briefing: Jazz and Rational Team Concert
• Buy: Rational Method Composer

My developerWorks community

Dig deeper into Rational on developerWorks

Rate a product. Write a review.

Write a review for Rational products today!

Special offers