Exercise 9.3: Editing the style sheet and PageBuilder.jsp

Before you begin, you must complete Exercise 9.2: Importing the company logo.

You must now edit the style sheet to configure the header to include the company logo that you just imported. Then you edit PageBuilder.jsp to resize the table to add the new company logo. Finally you make further changes to the style sheet to remove existing images (side_curve.gif and side.gif) and to change the color of these areas of your application.

To edit the style sheet and then PageBuilder.jsp

  1. Expand wflabxx > Style > gradient > chrome in the WebFacing Projects view, right-click gradient.css and click Open from the pop-up menu.
  2. In the Styles view, double-click .headc to edit that style.
    Styles view with .headc selected
  3. Select *Background.
  4. Update the Image field to sample_header.gif and change the Repeat field to No repeat as shown.
    .headc style
  5. Click OK.
  6. Save gradient.css by pressing CTRL-S.
  7. Now you must edit PageBuilder.jsp.
  8. Click the PageBuilder.jsp tab. Then go to the Source tab.
  9. Change the table height to 100 and width to 1024.
  10. Delete the first <td>...</td>.
  11. Change:
    <td class=headc colspan=4 rowspan=1 width="441" height="33">
    

    to:

    <td class=headc colspan=6 rowspan=1 width="100%" height="100">
    
  12. Delete the next <td>...</td>.

    This removes the extra fields in the table and resizes the remaining ones for your logo.

    Your code should now look like this:

    <table id="<%=(String)session.getAttribute("UniqueId")%>_Table"
     border="0" cellspacing="0"
     cellpadding="0" frame="box" height="100" width="1024">
      <tbody>
      <tr>
        <td class=headc colspan=6 rowspan=1 width="100%" height="100">
          <%=request.getAttribute("ApplicationTitle")%>
        </td>
    
  13. Save PageBuilder.jsp.
  14. Click the Design tab.

    It should look as shown below:
    PageBuilder.jsp

  15. Now update the color of the side by selecting the gradient.css tab again.
  16. In the Styles view, double-click .thesidecurve.
  17. Select *Background.
  18. Remove side_curve.gif from the Image field, leaving it blank.
  19. From the drop-down list next to the Color field, select the color gray.
  20. Click OK again to update the Style property.
  21. Open .theside style from the Styles view.
  22. Remove side.gif from the Image field, leaving it blank.
  23. From the drop-down list next to the Color field, select the color blue.
  24. Click OK again to update the property.
  25. Save gradient.css by pressing CTRL-S .
  26. Run the wflabxx application on the test server to see the new style, shown below:
    New style

    You will now update another style sheet to make changes to the buttons and text.

You have edited the style sheet to include the company logo and edited PageBuilder.jsp to remove and resize fields for your logo.

Module recap

You have completed Module 9. Customizing the default style. You have learned how to:

You have customized the default style to update the look and feel for a fictional company. Now you need to move the application into production and you need the WebFacing application to prompt the users for signon information when it starts. Continue to Module 10. Adding authentication.