Performing Local Branding for Banner XE applications

NOTE: Now that Banner 9 applications use the Theme Editor, THIS DOCUMENT IS OBSOLETE! However, it gives some insight into the methodology I used for branding the Banner 8 Flexible Registration application, as well as the early Banner 9 ZK applications, and may be a starting point for branding applications that do not support the Banner Theme Editor.

Banner applications as delivered usually comes in various shades of "SunGard Blue", which is a kind of greyish blue (I guess, I'm not very good at describing colors). Banner XE is no different. These applications contain a lot of pieces, so branding the application to make it look like Oakland University means changing a lot of objects. Fortunately, the process I've used for changing these objects is easy to repeat.

The goal I've tried to accomplish with local branding is to replace "SunGard Blue" with "Grizzly Gold" wherever possible and practical. Items that are displayed in other colors (for example, gray, red or green) should be left alone.

NOTE: I have not tried this on "Ellucian Purple" yet, the procedure may require some adjustment when we get to that point.

The Banner XE source files are kept in a Git repository on code.oakland.edu. We want to work on the oakland/test branch.

Graphics Files

To modify the colors of a picture (usually PNG, but sometimes GIF or JPEG), I use the Gimp (http://www.gimp.org/), which is available for any common computing platform (Windows, Mac, Linux). It is fairly easy to do this. Gimp remembers your last settings, so your various toolbox windows may already be open when you start the program.

To modify the image:

  1. Open the file using Gimp.
  2. Use View | Zoom to increase the viewing size of the file, if necessary.
  3. If it is not already open, use Tools | Toolbox to open the Toolbox window.
  4. Click on the black box in the Toolbox window to change the foreground color.
  5. If "Grizzly Gold" is in your color history, select it; otherwise:

    1. Enter the HTML code for "Grizzly Gold" (B59A57) in the HTML notation box, and press enter.

    2. Click the right-arrow button to add "Grizzly Gold" to your color history.
  6. Click the Bucket Fill tool in the Toolbox.
  7. If it is not already open, use Windows | Dockable Dialogs | Tool Options to open the Tool Options window.
  8. Select "Hue" from the Bucket Fill Mode option drop-down list.
  9. Select "Fill whole selection" from the Affected Area radio buttons.
  10. If the title bar of your image says that it is "indexed", use Image | Mode | RGB to change your image to an RGB image.
  11. Click on your picture to change the colors.
  12. If your image was originally indexed, use Image | Mode | Indexed to change your image back to an indexed image.
    1. The Convert Image dialog will have "Generate optimum palette" and "Color dithering: none" already selected.
    2. Click the Convert button.
  13. Use File | Overwrite filename to save your change.
  14. Use File | Close View to close the image. You will be warned that you are losing your changes, but you actually saved them in the previous step. Click "Discard Changes" to continue.

CSS files

These files may have a ".css" extension, but if they were created using ZK, they will likely have a ".css.dsp" extension.

I use a browser, a text editor AND Gimp to update these files. Any standard text editor (NOT Microsoft Word!!!) will do. For a browser, I prefer Firefox with the Firebug plugin, but you can use any browser with a similar tool. The following instructions will assume you are using Firefox and Firebug.

To identify the CSS file:

  1. In your browser, open the application you are branding.
  2. Open Firebug to inspect the page.
  3. Use the browser tool's element selection to isolate a page element.
  4. Click on the CSS tab to open the CSS file associated with the page element. You also may be able to open it by selecting the link to the CSS file in the Style window.
  5. If you hover over the HTML color value, Firebug will open a tooltip box displaying the color.
  6. In Gimp, use File | New to open a new, blank image.
  7. Click the foreground color (by default, it is black) to open the Change Foreground Color dialog.
  8. In the HTML notation box, type the code you saw in the Firebug CSS window, and press Enter. You do not need to save this in your color history.
  9. Select the Bucket Fill tool.
  10. In the Tool Options box, select "Normal" from the Bucket Fill Mode drop-down list.
  11. Click in your empty image to fill it with the color from the application web page.
  12. In the Change Foreground Color dialog, select "Grizzly Gold" from your color history (if necessary, see the above section to get "Grizzly Gold" saved in the color history).
  13. In the Tool Options box, select "Hue" from the Bucket Fill Mode drop-down list.
  14. Click the image to tint the color. The result won't exactly be "Grizzly Gold", but it will blend well with it.
  15. From the Toolbox, select the Color Picker Tool (the eye dropper).
  16. Click on the image to grab its new color as the foreground color.
  17. Click on the foreground color to get the new color's HTML code in the Change Foreground Color dialog. As a check, the R and B portions of the RGB HTML code are usually exchanged by this process; for example, if your original code was 0989d7, the changed code would be d79d09.
  18. Copy the new color's HTML code, and paste it into the CSS dialog in Firebug to see what it looks like. You can do this without changing the original file.
  19. Use AXE or another tool to verify that the colors meet the appropriate ADA standards.
  20. If you like the result, open the referenced CSS file in your text editor, find the line that you were looking at in Firebug, and change it in the real file.
  21. Repeat the above for as many colors as you need to change. Save the CSS file when you are done.

Commiting your work

When you have modified all of the image files and CSS files you need, and you are satisfited with the result, commit your changes back to the oakland/test branch.

DataAdminHowTo

DB_Administration