WebCenter Custom Header Headache Healed

I know that inline styles are generally a last resort, but I was trying to get something quick and clean up with the customer’s logo where it belonged and just could not get it to work. My inline attempt was to do the following:

<af:image source="/images/logo.png" 
          shortDesc="[customer] logo" id="pt_i1""/>

But that resulted in the image being stretched across the whole panel. Then I figured I would just add the size like this:

<af:image source="/images/logo.png" 
          shortDesc="[customer] logo" id="pt_i1"
          inlineStyle="width:159px; height:85px;"/>

But same result. While trying to figure things out, I added a space thus:

<af:image source="/images/logo.png" 
    shortDesc="[customer] logo" id="pt_i1"
    inlineStyle="width:159px; height:85px;"/>&nbsp;

And it worked! But, I did not want to rely on such a hack, so I looked and looked and looked and finally figured out how to had a simple custom class:

af|panelGroupLayout.pageTemplate_custDefaultPageHeader 
{
background-image:url('/oracle/webcenter/portalapp/shared/cust_Logo.png');
background-repeat: no-repeat;
}

Where af|panelGroupLayout is an existing ADF Faces selector, and applied it:

<af:panelGroupLayout layout="vertical"
   xmlns:af="http://xmlns.oracle.com/adf/faces/rich"
   id="customDefaultBannerDiv" 
   styleClass="pageTemplate_custDefaultPageHeader"
   inlineStyle="margin-top:10px; min-height:98px; text-align:right;">

And everything was good. For now.

If you found this interesting, please share.

© Scott S. Nelson

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.