Any Guide for Modifying Templates/Adding Custom CSS???

Question

I have purchased (and, yes, read...smarty pants) all of the APress, Oracle Application Express 4 books. I have searched The Google.
We need just one, step-by-step, excruciatingly detailed example of modifying a template, for example to add in a custom header. Also, we need to add additional css files and static javascript files. To be clear, we do not want to have to reference the javascript in the page header of every page. We want to build all of this all in to a single template.
Does anyone know of a site, or even a book, or even a reasonably priced, personally authored example that would contain this information?
I see people everywhere who refer to changes they've made to their templates. People reply to my posts routinely suggesting that, rather than the Page 0/Page Header shenanigans that I have to engage in, it would be "much simpler" to edit the template.
How can I enter the secret cabal of those who know how this is to be done? How I ask you? How?
-Joe

Answer 1

Scott,
Thanks for responding. I use your blog a lot and appreciate your taking the time to share.
The frustrating thing is that I am certain that the process is probably simple. As you say, "the trick is knowing what to cut and where to paste it," Why is there no documentation for this important part of the product?
It's one thing to request to expense books (or even to pay a couple of hours of consulting time) but, a completely different (and most probably unobtainable) level to request to spend 3 grand and a week out of the office to attend a class.
Actually, what we are trying to accomplish is much less ambitions than mimicking a whole, corporate UI. Here's all we are trying to do:
1. Swap out the header image (I am doing this now with a dynamic action on Page 0...ugly).
// Put in the ICE Header
var headerCollection = document.getElementsByTagName("hgroup");
findMeText1 = '<div id="jive-global-header"><div id="jive-global-header-texture" class="minwidth"><div style="background: none repeat scroll 0% 0% rgb(20, 39, 69); width: 100%; height: 90px; float: left;"><a href="/" style="float:left;"><img src="/i/ice/header_left.jpg" alt="" class="ie6png" display="inline-block" height="90px"></a><a href="/" style="float:right;"><img src="/i/ice/header_right.jpg" alt="" class="ie6png ice-fr" display="inline-block" height="90px"></a></div></div></div><div class="uAPEXNavBar"><ul><li><last_refresh></last_refresh></li><li><a href="apex_authentication.logout?p_app_id=101&amp;p_session_id=674943730496401">Logout</a><a class="eLink" title="Edit" href="javascript:popupURL(' + 'f?p=4000:329:695373120008301::::P329_ID,FB_FLOW_ID,FB_FLOW_PAGE_ID:7048743088564074,101,1' + ');" tabindex="999"><img src="/i/e.gif" alt="Edit" class="eLink"></a></li></ul></div>';
headerCollection[0].innerHTML = findMeText1;2. Create a new report template called "squashed" or the like where we pack in as much data as possible (think of Access)...no padding, smaller fonts, etc. We want to be able to pick this style for a report region and have it apply these format changes. (I am doing this now in the region header of every page where this is needed...ugly)
Region Header:
<style type="text/css">
#apexir_DATA_PANEL > table .apexir_WORKSHEET_DATA th {padding:0px 1px 0px 1px; margin:0px; font-size:12px; font-weight:bold; vertical-align: bottom;}
#apexir_DATA_PANEL > table .apexir_WORKSHEET_DATA th div {padding:0px 1px 0px 1px; margin:0px; font-size:12px; font-weight:bold;}
#apexir_DATA_PANEL > table .apexir_WORKSHEET_DATA td { padding:0px 1px 0px 1px; BORDER-LEFT: #ddd 1px solid; white-space: nowrap;  font-size:10px; }
#apexir_DATA_PANEL > table .apexir_WORKSHEET_DATA a { text-decoration: none; border-bottom:1px dashed; }
.look1 {padding:0px 1px 0px 1px;}
.look2 {padding:0px 1px 0px 1px;}
</style>3. Conglomeration of common JavaScript into a resource file. (I am doing this now by, uploading the static files and then including a "<script>" tag set in the Page Header on every page...very ugly)
<script src="#APP_IMAGES#commonRisk.js" type="text/javascript"></script>4. The addition of a drop down menu. We have the css and JavaScript needed to do this. Haven't got this working yet. We just want the css and JavaScript already as part of the template rather having to reference them mnanually on every page.
-Joe