The Image Bar

The Image Bar is much like The Logo Bar, but uses background images within it.

You can certainly use both bars at the same time, but you should consider not duplicating information on them. For example, you might want to avoid placing your logo, blog title, etc. on both bars at the same time.

If you wanted interesting quotes to be displayed randomly on your pages, you could make thin images of the quotes, dump them all into the proper directory, and place this bar somewhere in your header. That would cause quotes from those you created images for to be displayed randomly on each page view.

The Image Bar can display everything that the Logo Bar can, so you can use it as a replacement if you are so inclined.

Setting Up Images

The Image Bar displays an image at random from the /themes/privateer/images/header folder on your server.

Note:
Be sure that your images are wide enough to fill the maximum width of your display. You can use the alignment and height options noted below to make sure that the main portion of your images is displayed on smaller displays.

If you want only one image to be displayed, place only one image in that folder.

If you want a random image to be displayed, place multiple images in that folder.

If you want, you can enable one or both overlays and display any or all of the items from the Logo Bar on top of the Image Bar.

Some possible ways to make use of the image bar:

Display random images related to your site

Simply have a random image shown each time someone visits a page.

Display random information related to your site

Make images with text on them to provide visitors with information.

These could consist of tips related to something, random quotes, or just about anything you can think of.

Use the Image Bar as a Logo Bar replacement

Enable both overlays and the items you want shown on them to have the Image Bar do everything that the Logo Bar can do, while having randomly displayed images as backgrounds.

Doing this can save some space above the fold on your pages, letting viewers see more of your content immediately.

General Image Bar Settings

Use the following options to take care of basic settings beyond image selection:

Make header image clickable?

If set to Yes, the header image will link to your home page.

Header Image Height

This sets the visible height of the header image in pixels.

This value does not need to match the height of your images. As long as your images are all at least as tall as the height you specify here, things will be fine. Only the height you set here of each image will be displayed. The rest of the image will be hidden.

With that said, it is more efficient ( your pages will be served more quickly ) if you use images that are not larger than the height noted here.

Header Image: Alignment

This specifies how your images will be aligned on the Image Bar.

Images shown will be cut off from the opposite edge if they are too large to be completely shown to a particular user.

Opacity and the Image Bar

You can have have opaque sections on both the right and left side of the Image Bar.

Using the below options you can set the width, opacity, and color of each overlay.

Opacity Left: Value

This specifies how opaque the left side of the Image Logo will be when displayed.

Set this to zero to have no opaque overlay.

Set this to a number from 1 to 100 in order to have a less opaque overlay.

Opacity Left: Width

Use this option to specify the width of the opaque area on the left side of the Image Bar.

The unit for this option is pixels.

Opacity Left: Color

Use this option to specify the color of the left overlay in RRGGBB notation ( without the # or ; )

Click inside of the box to bring up a javascript color selector or set the value by typing it in.

Opacity Right: Value

Just like the opacity left value option, but for the right hand side of the Image Bar.

Opacity Right: Width

Just like the opacity left width option, but for the right hand side of the Image Bar.

Opacity Right: Color

Just like the opacity right color option, but for the right hand side of the Image Bar.

Showing the Logo, Title, and Tagline

With the following options, you can choose to show any logo, title, or tagline on top of the Image Bar.

All three will be placed within a single container, which can be positioned or styled.

Overlay Logo over Header Image?

Set this to Yes to have your logo displayed on the Image Bar.

Overlay Blog Title over Header Image?

Set this to Yes to have the blog title displayed on the Image Bar.

Overlay Blog Tagline over Header Image?

Set this to Yes to have the blog tagline displayed on the Image Bar.

Overlayed Blog Title/Tagline Style

Use this to style the container that holds the above three items if they are shown.

You can set borders, opacity, margins, float, etc. via standard css style declarations.

The header of this site uses the Image Bar with a single image to pick from and both overlays enabled.

Showing the RSS Icons and Search Box

If you would like to have RSS links and/or the search bar displayed on top of the Header Image, you can do that with the following options. All of them will be displayed within a container which you can style as you see fit.

Overlay RSS over Header Image?

Set this to Yes to have the Post RSS information you have set up in the "Privateer" » "General Display" » "RSS" settings menu.

Overlay RSS comments over Header Image?

Set this to Yes to have the Comments RSS image and/or text displayed.

Overlay Search Box over Header Image?

Set this to Yes to have the Search Box displayed on the Image Bar.

Overlayed RSS Style

Use this to style the div that contains any of the above three options you have set to be displayed.

You can position the box via float and/or margin, give it borders, opacity, etc.