Portal Tutorial - Configuring the Banner

Introduction

If you've completed the first tutorial, you will have a page something like this:

You will also have created a new schema (DEMO) and database provider (Demo), and granted piviliges on the EMP and DEPT tables in the SCOTT schema to the DEMO user.

The page looks like an Oracle page, and unless you happen to work for Oracle, then I imagine that you wish to put your own identity on it. Here's how you do it.

First of all you'll need a logo. Here's one I made earlier:

I've given it a yellow background deliberately so you can see how Portal positions it. I recommend that you colour the background of your logo the same as the background on your page to give you some flexibility in positioning.

Finding the Banner

When you create a new Page Group, Portal very kindly creates a default banner for us. To edit this, switch to the navigator and click on the Page Groups tab. Find the Demo Page Group and click on the title. You should see the following:

If you click on the Navigation Pages link you will find the link to the banner:

Avoid the temptation to click on tbe Demo:Banner title (if you do, use the back key) and instead click on the Edit link just to the right.

Editing the Banner

The default banner looks something like this:

First of all, create a new region below the bottom one (which looks empty but isn't) by clicking on the icon with a down arrow (). We're going to delete a few of the regions, and it's handy to keep a full-width region for later.

Let's get rid of the surplas regions. Use the delete icon () to remove the four regions marked below (but not the one you've just created). When prompted, delete the region contents too.

Now we can change the Oracle logo for our own. Oracle use a pencil image () for their edit icon, so click on the edit icon just above the word "Server" on the Oracle logo. Click on the browse button beside the image and select your lovely logo (I'm sure you can do much better than me).

You can change the properties of a region using the region's edit tool (). Use this on your newly created region, choose the Items option and click apply. Scroll down a bit and change the default settings, setting Display Name to "Stylesheet goes here", Space Between Items to "0" and Space Around Items also to "0":

You will have guessed that we are going to use this region to add our own stylesheet to our application. We'll do that another time though, so for now it'll remain empty.

To tidy it up, you'll have to edit the logo and page title regions. Set the width of the Logo region to 30%, and the alignment to left. In the page title region set the width to 70%. You may have to adjust the Space Around Items setting to get the text to align nicely with the logo: my logo was 70 pixels high and I found that increasing the Space Around from 12 to 20 pixels worked out about right.

The completed banner should look something like this:

If you click on the navigator link on the top right you should be able to work your way back up to the list of Page Groups. Click on the View Root Page link beside our Demo Page Group to look at our handywork (click back to return):

Next, adding a list of employees by creating a simple dynamic page