Skip to main content

Cloning your Corporate UI with HTML DB - Part II (Re-Post)

The following is a re-post of the "Cloning your Corporate UI with HTML DB" series that I blogged about back in 2005 on the now-defunct Orablogs site. Most of the content and advise is still the same today, and has been reposted here exactly as it was on the old site.

June 8, 2005
Things look really good. The page rendered almost perfectly, it all mostly lines up, and there are only a couple of broken images. We're almost done, right?


There is still a lot of work to be done. Essentially, as it stands now, we have created a static Page Template that doesn't play well with the rest of HTML DB. Also, there are no navigational aids for HTML DB Studio left - they have been replaced by content from OTN. Which leads us to our next step - removing more OTN content.

Removing OTN Content
First of all, I don't need the content in the 3rd column at all on my pages (Resources For, Featured Downloads, Discussion Forums). However, I do want to retain that column and define an HTML DB Region Position there, so that I can put HTML DB dynamic content there.

To start , I copy the Body of my Page Template back into Dreamweaver, so that I can edit it in the WYSIWYG editor. I then remove all of the tables that make up the 3rd column content by simply selecting and deleting them. Finally, in the empty column that remains, I enter #REGION_POSITION_03#. This will allow me to position content in the 3rd column - such as the "Most Popular" and "Recently Added" boxes that I use on the home page of HTML DB Studio. With a little formatting and tweaking, I can right-align this content as well.

Next, I want to add a Region Position for the Application Menu. Just above the page where #BOX_BODY# appears is a table which has some static content in it. I can easily delete this content and replace it with my region position - #REGION_POSITION_02# - which will be the new home for my Menu.

Finally, I want to remove the content in the 1st column of the page (Product Centers, Technology Centers & Community). In all three sites, I use this region for a List of navigable sections. Just as I did before with the other two columns, I remove all of the content, all the while being careful not to alter the underlying table structure. In place of the content, I simply enter #REGION_POSITION_01#, which is my Region Position token.

Once all of the Region Positions are defined, we now have the page layout below:

Note that the images associated with the Menu and List Itema are broken. This is because the _base_href is set to, and our image lives on Since we are using a relative reference in the Menu Template, the image path resolves to - which is the wrong server.

If we look at the HTML from our template, we notice this line:

<base href="">

This line is causing all relative image, CSS & JavaScript references to use as the starting point, which in turn, is causing some images to not render. Removing this line will fix the HTML DB images, but will break the portion of the site which IS using as a source for its images. This presents us with a Catch-22: Removing it breaks stuff, and leaving it in breaks stuff.

Since I do not have any access to make changes to, and I do have access to make changes to, the only solution is to move all of the images, CSS files, and JavaScript libraries from to a place which I can reference on Only after transferring all of these files and updating the template will the site finally have no broken images.

Fixing the CSS References
Note that the buttons "Submit an Application" and "Application Submission Guide" are not rendering properly either. This is due to the fact the we have not yet referenced the previously used Cascading Style Sheet(s) in this new Page Template. Since all we did was copy HTML from OTN, there was no reference of any CSS used in our original HTML DB Page Templates.

In order to correct this, let's load the production version of HTML DB Studio, view the source, and search for the term "css". (Hint: Using Firefox, you can simply hit the "/" key, start typing, the it will highlight any matches. Hitting F3 will tab to the next match. Pretty cool!) My search yielded three hits:

  • <link rel="stylesheet" href="/i/orcl/otn_dyn.css" type="text/css">
  • <link rel="stylesheet" href="/i/orcl/otn_new.css" type="text/css">
  • <link rel="stylesheet" href="/i/css/core.css" type="text/css">

Upon copying & pasting these three lines into the new template, the buttons (and some other minor things) were back to normal. We're getting there - we now have a solid foundation for most of our Page Body in our Template.

Next, we'll tackle the Page Header & Footer, including how to make the Tabs work.


tony miller said…
Scott, do you have the rest of this article from your old posts?

I am in the midst of needing to build a custom theme that resembles an existing static website and would love to see how you finished things up..

Thank you,

Tony Miller
Webster, TX
Scott said…

If you look at the Blog Archive and expand April 2008, you will see links to all of the posts in this series.


- Scott -

Popular posts from this blog

Thanks, ODC (Oracle Developer Community)!

I owe a lot of thanks to the ODC - which stands for Oracle Developer Community.  What is ODC?  You may remember it as OTN, or the Oracle Technology Network.  Same people, different name.  Why they changed it I can't say.  People just liked it better that way... (love that song)

In any case, what am I thankful for?  A lot.  To start, the tools that I use day in and day out: SQL Developer, ORDS, Oracle Data Modeler, SQLcl and - of course - APEX.  Without these tools, I'm likely on a completely different career path, perhaps even one that aligns more closely with my degree in television management.

While the tools are great, it's really the people that make up the community that make ODC stand out. From the folks who run ODC and the Oracle ACE program to the developers and product managers who are behind the awesome tools, the ODC community is one of, if not the greatest asset of being involved with Oracle's products.

If you have yet to get more involved with this communi…

Spaced Out

A while back, I wrote about how to give the Universal Theme a face lift.  If you follow the steps in that post, the base font for an APEX application with the Universal Theme can easily be changed.

While that's all well and good, sometimes you only want to change the font for a report, not the entire page.  One of the applications that I'm building contains a number of IRs based mostly on log data.  Thus, having that data in a monospaced font would make it a whole lot easier to read.

You can search Google Fonts for monospaced fonts by selecting only that option on the right-side menubar.  You can also opt for the standard yet kinda boring Courier and achieve the same thing.

To implement this in your application, follow the steps in my other post, but stop shy of the final step.  Instead of pasting in the text that I specify, paste in the following to the Custom CSS field in Theme Roller, using the name of the font you selected for the font-family:

.a-IRR-table tr td { font-fam…

Logging APEX Report Downloads

A customer recently asked how APEX could track who clicked “download” from an Interactive Grid.  After some quick searching of the logs, I realized that APEX simply does not record this type of activity, aside from a simple page view type of “AJAX” entry.  This was not specific enough, and of course, led to the next question - can we prevent users from downloading data from a grid entirely?

I knew that any Javascript-based solution would fall short of their security requirements, since it is trivial to reconstruct the URL pattern required to initiate a download, even if the Javascript had removed the option from the menu.  Thus, I had to consider a PL/SQL-based approach - one that could not be bypassed by a malicious end user.

To solve this problem, I turned to APEX’s Initialization PL/SQL Code parameter.  Any PL/SQL code entered in this region will be executed before any other APEX-related process.  Thus, it is literally the first place that a developer can interact with an APEX page…