Modifying global style elements
Although JSPs can use HTML to set colors, fonts, and other stylistic elements directly, the JSPs also use cascading style sheets (CSS), templates, and shared images to control the global styles of an Java Components web application. To modify the appearance of the entire Java Components web application, change global style elements.
Global style definitions are located in the <context root>\common\jslib\themes
\default\yggdrasil.css file. To change the company logo displayed in the banner, modify the background:url property of the .ac .navbar .actuate class definition. This class definition in yggdrassil.css includes other properties, which is shown in the following code:
.ac .navbar .actuate {
text-indent: -9876px;
outline: none;
float: left;
display: block;
margin: 12px 0px 0px 0px;
padding-right: 11px;
background: url(../img/actuate_logo_navbar.png) no-repeat;
width: 98px;
height: 25px;
border-right: #555 1px solid;
}
To change the logo, replace the default value of actuate_logo_navbar.png with a custom logo file name, either as an absolute path, or as the same relative path as the default image by saving the image file in the <context root>\common\jslib
\themes\img directory.
To change the background color or height of the top navigation bar, modify the value of the .ac .navbar-inner class definition.This class definition in yggdrassil.css includes other properties, which is shown in the following code:
.ac .navbar-inner {
position: relative;
height: 43px;
padding-left: 15px;
padding-right: 0px;
background: #363636;
-webkit-box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.125);
-moz-box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.125);
box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.125);
border-bottom: #222222 1px solid;
z-index: 100;
*zoom: 1;
}
Replace the default value of the height parameter to change the height of the top navigation bar and change the value of the background parameter to change the color of the top navigation bar.
How to customize the company logo for Java Components
1 Copy your custom logo image file to the following directory:
<context root>\common\jslib\themes\img
2 Open the yggdrassil.css file for editing.
3 Navigate to the following lines:
background: url(../img/actuate_logo_navbar.png) no-repeat;
width: 98px;
height: 25px;
4 Change the filename of the background image to the name of custom logo image file and change the width and height dimensions to match the custom image dimensions. For example, if the custom image file was called examplecorp_logo.gif and it had a height of 153 pixels and a width of 37 pixels, you would use the following entry:
background: url(../img/ExampleCorp_logo.gif) no-repeat;
width: 153px;
height: 37px;
5 Navigate to the following lines:
.ac .navbar-inner {
position: relative;
height: 43px;
padding-left: 15px;
padding-right: 0px;
background: #363636;
6 Change the value of the height and the background to compliment the custom logo. For example, if the custom logo has a yellow background and requires 60 pixels of height with its padding to be centered vertically on the navigation bar, you would use the following entry:
.ac .navbar-inner {
position: relative;
height: 60px;
padding-left: 15px;
padding-right: 0px;
background: #FFFF00;
7 Save web.xml. Then, restart the Web Server to apply the changes.
8 Open the Java Components application in a web browser to view the new custom navigation bar. For example, if you followed the above steps for examplecorp_logo.png image, your landing page would appear as shown in Figure 3‑2.
Figure 3‑2 Viewing a custom logo and banner in Java Components