Custom banner

What, what, what?!

How come this page has a different banner to the others in this site?

Well, although it is not a built-in feature of Sandvox, it is, thanks to Code Injection, very easy to provide custom banners to each and every one of your pages, should you wish to do so (the standard in Sandvox is that each page has the same banner, of course).

Thanks must go to Charlie of BlueBall Designs, who described this way to achieve custom banners in the excellent Karelia Sandvox Forum.

You start off by making a banner image that matches the dimensions of the banner images of the design you are going to be working with (you can find the sizes of standard designs in Sandvox Help; for third-party designs the dimensions are usually found in the documentation). Save the image as a jpeg with any name you choose, such as mybanner.jpg.

Upload this image to your server, placing it in a location for which you are able to create a URL. For example, in a folder called pics.

Back in Sandvox, go to the page in which you wish to place your custom banner and use Page Code Injection to add the following code:

<style type="text/css”>
#title {background: url(http://yourdomainname.eu/pics/mybanner.jpg) top center no-repeat;}
</style>

You will, of course, have to substitute the URL (shown in red) for one that points to your own host and image file. Also, you might need to change the #title div name to correspond to the name used in your chosen design (but try this first).

If you use an absolute pathname in the URL (as in the code above), then refresh the Sandvox page and you should see your banner (if you dont, either the URL is incorrect, or you have not yet uploaded the image). If, on the other hand, you choose to use a relative URL, then you will need to publish your site in order to see the banner. (If you are unsure about the use of absolute and relative pathnames, take a look here.)

© David Neale 2011