today:
16
yesterday:
237
Total:
1,004,598

General How-To Document / Change a Logo in a Page Template

admin 2016.04.16 15:55 Views : 226

How-To Document

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 
Introduction 
Application Express (formerly called HTML DB) uses template that are fully customizable.  These templates may reference images and cascading style sheets (CSS). Using only a web browser, you can create and modify these HTML based templates to get exactly the look and feel you desire.  In this How To, we will  decribe  how you can modify the template supplied with the sample application to change the logo. 

Software RequirementsUploading an Image 
To upload an image, follow the following steps: 

  • 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 

Modifying a page template 

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)


Listing 1 - Sample HTML referencing logo in page template, before change 
<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>
The body section of the page template is currently referencing a default image that ships with HTML DB.   To reference the image we just uploaded, my_logo.gif, we need to change this section of HTML. First, we need to include the substitution string #WORKSPACE_IMAGES# referring to the location of images we uploaded.  Secondly, we need to reference the correct image name, in this case: my_logo.gif.  See sample HTML below. 

Listing 2 - HTML referencing logo in page template, after change 
<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>
After applying the change to the template, your application should now use a new logo on each page that uses the default page template. 

Additional Resources

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.

I want to
Update Delete List
No. Subject Author Date Views
106 DBMS_NETWORK_ACL_ADMIN admin 2016.06.07 354
105 ADD_PRIVILEGE (2nd STEP) admin 2016.06.07 348
104 DBMS_NETWORK_ACL_ADMIN admin 2016.06.07 343
103 Access Control List (ACL) admin 2016.06.07 343
102 function get area admin 2016.06.08 324
101 How to set a proxy in UTL_HTTP admin 2016.06.07 320
100 CREATE_ACL (1st STEP) admin 2016.06.07 314
99 ACL 보기 admin 2016.06.07 309
98 Oracle 11g Access Control List for External Network Services admin 2016.06.07 302
97 CAPTCHA PLUG-IN admin 2016.05.27 299
96 Assign a network host to Access Control List admin 2016.06.07 295
95 SUBSTR admin 2016.05.26 272
94 FOR LOOP admin 2016.05.20 269
93 영수증 2023 file admin 2024.01.04 246
92 Validation to detect text in numeric field admin 2018.05.19 241
91 ROWNUM admin 2016.05.19 240
90 Group by, Order by (두개의 Table을 활용한 Sub Total / 최고값 ) admin 2016.05.06 234
89 Change Admin PASSWORD admin 2018.07.31 232
88 VERY IMPORTANT admin 2018.06.26 226
» How-To Document / Change a Logo in a Page Template admin 2016.04.16 226
Write Tag