Enportal/old/laf example

This page provides a walkthrough example of configuring the enPortal Look and Feel. For additional information about configuring styles in enPortal/AppBoard, see Style Guide.

Objective

Create and customize the Edge Light Look and Feel (LAF) to branding for a new “COOL Portal” LAF. Update the company logo, background, tabs, and other attributes of the LAF.

Preparation

This exercise will create a new LAF from the “EdgeLight” LAF and then customize it.

Procedures

Perform the following steps to create and customize the Look and Feel of enPortal:

Step 1 - Create a new LAF and Assign it to the Portal Administrator

• Navigate to: PORTAL_HOME/server/webapps/enportal/framework/laf/
• Copy the Edge Light theme by copying the banner_edge_light directory.
• Paste it into the laf directory, and rename it "banner_cool_portal".
• Log in as an administrator and select Explore System under the Advanced tab.
• Under the Look And Feel folder, click on EdgeLight to display the LAF properties.
• Click Save As.
• Enter the name “CoolPortal”. Observe the new CoolPortal LAF.
• Click on CoolPortal to display the LAF properties.
• Change the following properties:
  • CSS File: /framework/laf/banner_cool_portal/css/portal.css
  • Image Base: /framework/laf/banner_cool_portal/images
• Click Save.
• Click the Roles tab to open the Role explorer.
• Click on the portalAdministration Role.
• Click LAF in the right panel.
• Click Assign.
• In the assignable LAFs dialog, select CoolPortal and click Ok.

Step 2 - Open portal.css

• Navigate to: PORTAL_HOME/server/webapps/enportal/framework/laf/banner_cool_portal/css/portal.css
• Open portal.css in a text editor of your choice

Step 3 - Change the Look and Feel of the Banner

• Scroll down to the ‘.headerForeground’ CSS class.
• Comment out the ‘background-image’ attribute (as shown below)
• This will allow the background-color to show through, which in this case is set to black (#000000)

.headerForeground {
   background-color: #000000;
   /* background-image: url("../images/bkg_header_texture.png"); */
   background-position: right top;
   background-repeat: repeat-x;
   height: 55px;
   left: 0;
   position: absolute;
   top: 0;
   white-space: nowrap;
   width: 100%;
}

Step 4 - Refresh the LAF to Validate Changes

• Refresh the browser to re-load the LAF
• You should see the black banner shown below.

Before:

After:

Step 5 - Alter the Background Color of the Banner

• Switch back to your text editor,
• Change the background-color in the .headerForeground CSS class to a different hex value.

.headerForeground {
   background-color: #494b4d0;
   /* background-image: url("../images/bkg_header_texture.png"); */
   background-position: right top;
   background-repeat: repeat-x;
   height: 55px;
   left: 0;
   position: absolute;
   top: 0;
   white-space: nowrap;
   width: 100%;
}

• Switch back to your browser and refresh.
• You should now see a different colored background

Example:

Step 6 - Change the Background Image of the Banner

• Switch back to your text editor.
• Go to http://www.edge-technologies.com/downloads/training/bkg_header_texture02.png and save the photo to the PORTAL_HOME/server/webapps/enportal/framework/laf/banner_cool_portal/images/ folder.
• Back in the text editor, uncomment the background-image attribute in the .headerForeground CSS class.
• Point the URL ‘bkg_header_texture02.png’ (shown below)

.headerForeground {
   background-color: #494b4d0;
   background-image: url("../images/bkg_header_texture02.png");
   background-position: right top;
   background-repeat: repeat-x;
   height: 55px;
   left: 0;
   position: absolute;
   top: 0;
   white-space: nowrap;
   width: 100%;
}

• Switch back to your browser and refresh.
• You should now see a different textured background image tiled across the banner

Example:

Step 7 - Change the Logo in the Banner

• To change the logo, we’ll need to navigate to the location of the current logo.
• Navigate to: PORTAL_HOME/webapps/enportal/framework/laf/banner_cool_portal/images/EdgeLogo_48x.png
• Make a backup copy of the EdgeLogo_48x.png file called EdgeLogo_48x_bak.png.
• Note the image dimensions of the image are 120x48.
• Go to http://www.edge-technologies.com/downloads/training/EdgeLogo_48x.png.
• Save this image, overwriting the existing EdgeLogo_48x.png file.
• Refresh the browser and observe the new logo displayed for “COOL Portal”.

Step 8 - Alter the Image Offsets

• This step is optional.
• If you find your image isn’t aligned correctly, you can change the offset values in the .upperLeftImageStyle CSS class.

.upperLeftImageStyle {
   background-color: transparent;
   left: 0;
   position: absolute;
   top: 3px;
   z-index: 1;
}

Step 9 - Alter the LAF of enPortal Tabs

• Navigate to:

PORTAL_HOME/webapps/enportal/framework/laf/banner_cool_portal/images/

• You can alter the tab images in this directory to change the look and feel of the enPortal tabs.
• enPortal tabs are divided into three sections, and there are images for each corresponding section.
• The images combine so that the tabs in the middle section will tile horizontally:

• Each section of the tab has separate images for unselected state (leftU, middleU, rightU), selected state (leftS, middleS, rightS), and various join combinations.
• You can simply alter these graphics to achieve the desired effect. Download the sample tabs from your training class files or directly from the file: http://www.edge-technologies.com/training/tabs.zip and extract them to replace the image files in the /banner_cool_portal/ directory.
• Refresh the browser and observe the changes made to the tabs.

Example:

Step 10 - Modify User Info Font Settings

• Locate the userInfoStyle class, and modify the following properties one at a time. After each change, refresh the browser to see the effect on the text in the header.

.userInfoStyle {

position: absolute;

        top: 34px; 
        font-family: Arial; 
        font-size: 11pt; 
        color: #black; 
    /*	 text-shadow:#14181a 1px 1px 2px; */ 
        right: 50px; 
}

Example:

Step 11 - Modify Role Chooser Settings

• Check what user name you are currently using to administer the portal. Assign multiple roles to this user and refresh the browser, so that the role chooser is displayed in the upper-right section of the LAF.
• Modify the settings for the role chooser, by editing attributes one at a time in the roleLabelStyle class in the CSS file:

.roleLabelStyle { 
        position: absolute; 
        top: 10px;  
        font-family: Arial; 
        font-size: 12pt;  
        color: #CCCCCC; 
        text-shadow:#14181a 1px 1px 2px; 
        right: 20px; 
}

Example: