Before I continue with my three-part series “Recuring Tasks with Rational Team Concert” here is a small hint how you can easily “personalize” your RTC Installation. Within our example we will customize the login screen and the header and footer of the RTC user Interface.
There´s a feature within RTC which is called “Web UI Theming”. This feature gives us the ability to modify the look and feel of the Web UI for all users of RTC.
Within our example we will use custom CSS and all possible HTML based “entry points”.
We will create a new theme that we will call “IBMChampions”. In order to do this we need to create the following directory structure:
- css – this directory will contain the neccesary custom css files
- html – this directory will contain the changes for the header and the footer of the Web UI
- Images – this directory will contain the Images
For the HTML changes we have the following entry points available:
- aboveBanner.html – located avove the main banner of the Web UI
- footerLeft.html – left side of the page footer
- footerCenter.html – the center of the page footer
- footerRight.html – the right side of the page footer
- loginFooter.html – a footer at the bottom of the Login Dialog
After you have created the necessary files and Inputs you need to pack the three folders into a ZIP file. You can download an example of such a file here.
Now we need to upload the theme to RTC. In order to do this you navigate to the admin page of RTC (https://<PublicURI>/admin – e. g. https://rtc.mycompany.com:9443/ccm/admin). There you will find within “Configuration” on the left side the “Themes” menu point. There you can upload the ZIP file, give a name to the theme (in our case “IBMChampions”). Afterward you can activiate the new theme.
Now you can log out and you will see the customized login screen:
You can see the new logo (which is defined within the custom CSS) and the new footer entry (which is created with the file “loginFooter.html”).
After the login you will see the customized Web UI:
Here you can see the customized Header (“aboveBanner.html”) and the customized footer (“footerLeft.html”, footerCenter.html” and “footerRight.html”).