Version 2: Creating a Static Banner
Please note: this is a version 2 guide page. Looking for version 3? Click here. Not sure which version you're running? Click here.
A static banner looks similar to a rotating banner but is just a single image and requires no banner pool file. This snippet is often used when you want to have a large header banner style that contains just one image. The static banner has an option to include a caption. The static banner snippet is used on this page.
Add the Static Banner Snippet
- Choose the Static Banner snippet either from the snippet tool (
) or the snippet list under gadgets and insert the snippet. Keep in mind the banner
will fill the full width of the container in which it is placed. If you'd like this
to be a header banner, place the snippet as the first item in the top content area.
- If your page has a page title, follow the placement information for that title (see Page Title Placement).
- Replace the default image with your banner image.
- Update the caption text. If you are not using a caption, delete the default caption text that appears to the right of the banner image.
- If your image has a link, you can apply it here as well.
- Save the file.
Banner Options
There are three banner options to choose from, the standard banner, full-width banner, and header banner. Both the full-width and header banner have an addtional poster style.
If you have chosen the full-width or header options, you will need to add one or more body classes that are specific for that option.
In the OU Editor find the Properties tab that is next to the Edit tab. Note whether
or not the light bulb near it is yellow. This means the page is checked out to you.
The content of the properties tab is different if you do not have the page checked
out. If the light build is yellow, go to the next step. If not, click on the light
bulb to check the page out.
Inside the properties window, you'll see "Custom Settings" and below that, a box where
you can enter a body class. Enter the required body class for the banner style you
have chosen.
- There are some optional body classes you may choose to use.
- Save the changes within the Properties tab. Publish the page.
Banner Specifications
| Banner Option | Width | Height | Height Adjustments |
|---|---|---|---|
| Standard Banner | 1030 px | 300 px | You can adjust your image's height for a taller or shorter banner. The dimensions for all banners need to be identical. |
| Full-Width Banner | 1500 px | 400 px | You can adjust your image's height for a taller or shorter banner. The dimensions for all banners need to be identical. |
| Full-Width Banner (poster style) |
1500 px | 700 px | Example image has a height of 700 px. You can adjust your image's height for a taller or shorter banner. The dimensions for all banners need to be identical. |
| Header Banner | 1500 px | 500 px | 500 pixel height is the standard. Request code adjustment for other heights. |
| Header Banner (poster style |
1500 px | 700 px | Example image has a height of 700 px. 500 pixel height is the standard. Request code adjustment for other heights. |
Compare banner options descriptions and recommendations.
Banner Classes
| Banners | Required Body Classes | Optional Body Classes | Optional Class Descriptions |
|---|---|---|---|
| All Banners | static-caption-animate | If caption text is used with a banner, the static-caption-animate class animates the caption so that it moves in from the left edge of the screen. | |
| Standard Banner | No body classes required | ||
| Full-Width Banner | static-full-width | no-breadcrumb | The no-breadcrumb body class is required for both header and full-width poster styles. You may want to use it for the full-width banner option. It will eliminate the breadcrumb and close the gap between the header and banner. |
| Full-Width Banner (poster style) |
static-full-width static-poster no-breadcrumb |
||
| Header Banner | static-header | header-shade | The header-shade class creates a background shade behind the header title text. This can help make the header title more readable if the image is too light or too complex to allow the text to stand out clearly. |
| Header Banner (poster style) |
static-header static-poster no-breadcrumb |
header-shade | The header-shade class creates a background shade behind the header title text. This can help make the header title more readable if the image is too light or too complex to allow the text to stand out clearly. |
| (If you use multiple body classes, separate each body class with a single space.) | |||
Page Title Placement
Generally a page title is not included on your site's home page. This is because the department or organization name in the header acts as the page title. If you place a static banner on another page, that page will need a page title. The placement of the page title differs with the banner option chosen.
- Standard Banner - Place the page title above the Static Banner snippet. No page title is needed for the home page.
- Full-Width Banner - Place the page title below the Static Banner snippet. No page title is needed for the home page.
- Header Banner - Place the page title below the snippet.
- Header and Full-Width Poster Styles - Do not add a page title.