Change a Logo in a Page Template

Date: 28-Oct-2003

After completing this How-To, you should be able to understand: 

• Upload an image from your filesystem to Oracle Application Express (formerly called HTML DB) 
  
• Use the uploaded image in a page template 
  

• Oracle HTML DB 
  
• Web browser such Netscape 7+ or Interner Explorer 5.5+

• navigate to the Application Builder for your application.
• click on the Shared Components icon
• click the Images icon
• click Create to upload a new image
• click Browse... to locate an image on your local filesystem
• make sure you remember the name of the image, for example:  my_logo.gif 
  

Now that the image is uploaded, it's stored in the database and we can use it in a page template to modify the look and feel of an application.  To reference an image you have uploaded in a page template, follow these steps: 

• navigate to the Application Builder for your application
• click on the Shared Components icon
• click the Templates link
• click on the name of the page template listed with a checkmark in the Default column, this is the application's default template
• find the section of html that references the logo in the page template, typically in the Body section of the template (see sample HTML below, with image reference highlighted in red)

<table width="100%">
                                      

  <tr>
                                      

    <td style="vertical-align:top;text-align:left;width:170px;padding-left=5px;padding-top=5px;">
                                                                                
        <img src="#IMAGE_PREFIX#oracle_bw.gif" alt="Oracle" />                                         
                                            </td>
                                      

    <td style="vertical-align:top;text-align:right;font-size:10pt;">
                                      

      #NAVIGATION_BAR#&nbsp;
                                      

    </td>
                                      

  </tr>
                                      

</table>
                                      

                                       

     
                                    

<table width="100%">
                                      

  <tr>
                                      

    <td style="vertical-align:top;text-align:left;width:170px;padding-left=5px;padding-top=5px;">
                                                                                
        <img src="#WORKSPACE_IMAGES#my_logo.gif" alt="My Logo" />                                         
                                            </td>
                                      

    <td style="vertical-align:top;text-align:right;font-size:10pt;">
                                      

      #NAVIGATION_BAR#&nbsp;
                                      

    </td>
                                      

  </tr>
                                      

</table>
                                      

     
                                    

Changing the logo in a page template: A viewlet 
Customizing HTML DB Templates: A Technical Whitepaper (PDF) 

Discuss this how-to in the OTN HTML DB Forum.