Banner
Some designs feature a banner; a large image across the top of the page. For example, the Crimson Royale design:
Sandvox designs fall into one of three categories:
- Those with a rectangular "banner" image, which you can replace;
- Those without a banner image, initially, but that allow you to add your own;
- Those that do not support banners.
(If a design does not support a banner image, there is no way to add one. And if the design initially comes with a banner design, there is no way to completely remove it.
Replacing the initial Banner
Sandvox allows you to replace the banner with one of your own choosing.
To set the banner image of a site:
- Open the Document Inspector.
- Go to the Appearance tab.
- From the "Banner" popup, select "Image Fill".
- Click the "Choose…" button to navigate to the file you wish to set as your banner.
Reverting or removing your custom banner
To set the banner image of a site to its default image (or remove it, if applicable):
- Open the Document Inspector.
- Go to the Appearance tab. Under "Banner" and choose "Design-Supplied".
Sizing
Banner images can be a maximum of 800* pixels wide and 300 pixels high.
- If you try to use an image wider than the maximum width for the specific design, Sandvox will shrink it to that width.
- If the image is taller than the maximum height (even after shrinking), Sandvox will crop it.
However, the actual space available for the banner varies from design to design (Stock designs not mentioned here do not support banners):
| Design | Banner Width | Banner Height |
|---|---|---|
| Appleseed | 770 | 200 |
| Aqua | 730 | 170 |
| Aurora Palace | 730 | 194 |
| Black and White* | 800 | 200 |
| Brown and Green | 771 | 180 |
| Cathedral | 750 | 205** |
| Cirrus | 745 | 185 |
| Clean Sheets | 800 | 160 |
| Clockwork | 760 | 200 |
| Crimson Royale | 740 | 205 |
| Diagonals | 775 | 195 |
| Distinction | 770 | 130 |
| Dolphin Dance | 760 | 200 |
| Earth and Sky | 770 | 160 |
| Expansion* | 800 | 150 |
| Galaxy | 760 | 205 |
| Glass Box | 750 | 205** |
| Hydrogen | 960 | 180 |
| Imagine | 765 | 200 |
| Into the Blue | 730 | 120 |
| Kryptonite | 960 | 280 |
| Mezzanotte | 740 | 130 |
| Minimalist | 730 | 190 |
| Minty Fresh | 773 | 235 |
| Neo News | 745 | 185 |
| Night Breeze | 765 | 205 |
| No Parking Anytime | 750 | 205 |
| Outside the Lines | 760 | 195 |
| Pacific Sky | 755 | 155 |
| Reflections | 760 | 190 |
| Serengeti | 760 | 200 |
| Simply | 770 | 205 |
| Skyline | 710 | 150 |
| Slate Manifest | 730 | 200 |
| Smooth Dark | 730 | 155 |
| Something Borrowed | 750 | 160 |
| Square Perch | 750 | 185 |
| Stars* | 800 | 125 |
| Sunburst | 745 | 200 |
| Telegraph Office | 785 | 205 |
| Wall | 775 | 200 |
* The banner for these designs can stretch up to the width of the browser.
** Banner height for the home page only. The banner is vertically cropped for the rest of site.
Sandvox will attempt to fit your supplied banner image to this size as well as it can. The image will be centered horizontally, and then aligned at the top; the excess is cropped. If the result isn't satisfactory, try cropping the image (using an application such as Preview) to a more appropriate size before inserting it.
Banner Image Sources
- freewebpageheaders.com has a large number of images available for free, as long as your site is for non-commercial use and they are credited.
- Flickr has a large number of images available. However, most images on flickr are either copyrighted, meaning you must get permission before using, or restricted via Creative Commons meaning that you should check the image to make sure it is OK for you to use it; you probably have to give credit to the originator of the image.
Of course, you can also use photos of your own. Just be sure to crop them appropriately first.
Keywords: banner, banners, image, images, graphic, graphics, picture, pictures, photo, photos, top, across, page, pages. masthead, mast, head, mast-head, header, background, height, heights, size, sizes, sizing, sized, personalise, personalize, personalised, personalized
