Monday, July 02, 2007

Getting icons to work in Apex Navigation Bar (navbar)

If you are wondering why the icon(s) you specified do not show up in the Navigation Bar of your Apex application, then you can check if the page template, at the height of the Subtemplate, Navigation Bar Entry, contains a definition like this:

<a href="#LINK#" class="txxNavLink">#TEXT#</a>

if that is the case, then you should change it to:

<a href="#LINK#" class="txxNavLink">
<img src="#IMAGE#" alt="#ALT#" height="#HEIGHT#" width="#WIDTH#" />#TEXT#</a>

where txxNavLink can be t1NavLink...t18NavLink or something else depending on which Apex theme you picked initially.

Now you are ready for setting the image (icon) URL to the desired value:

I use a custom application substitution string called "HOME" because i prefer to store the images on the webserver rather than in the Apex repository for better performance, but as i am not the owner of the webserver, i cannot create my own Apache aliases, so this is a sort of workaround.
In your case it can be sufficient to include either #WORKSPACE_IMAGE# or #APP_IMAGES# built-in substitution strings.

Once you have successfully tweaked the template, it's very likely that you'll have to tackle another little layout problem, because this navbar entry template definition now requires an icon for *every* navbar entry.
If in your navigation bar entries there is some text-only link, like the default Logout URL typically, you'll have to choose between one of two possibilities:

  1. keep the text only entry and tweak a couple of its attributes;
  2. find a suitable icon and use that instead of the text only link.
In my case i picked the first option, then i set the image width and height attributes of the navbar entry to zero. This prevents the browser from displaying an empty image placeholder (32 by 32 pixels typically) for the missing image and will display just the icon subtext.

Hopefully i didn't forget anything else...


Anonymous said...

Kudos on figuring this out

I would like to suggest a correction: <img="#IMAGE#"... needs to be <img src="#IMAGE#"...

Byte64 said...

I've already updated the original post!

Thank you very much.

Keith Jamieson said...

I noticed that the iamges don't display in Internet Explorer unless you specify the height and width as well. They are ok in firefox

Byte64 said...

although i can't double check this right now, i am not surprised, there is a long list of cross-browser issues and when it comes to M$, even cross-version...
That's why one should always try out a page on several browsers before shouting "hurray!", unless you are 100% sure that final users are using a specific browser.
You may find particularly useful to carry out cross browser tests.


Tobias Arnhold said...

Great. That was exactly what I was looking for.

yes you can!

Two great ways to help us out with a minimal effort. Click on the Google Plus +1 button above or...
We appreciate your support!

latest articles