How to use gradients in your Sandvox Design

Level: Easy

Many Sandvox Designs come with a set of ready-made gradients to be used in your header to further tweak the appearance of your website. You can add horizontal stripes to the original gradient of Carbone Blue, or even change it with a red gradient, for example. With some basic graphic skills you can create your own gradients and use them for your website too.

In this tutorial we will add a “diagonal” texture to Grafite using one of the provided files.

Open Grafite’s folder and look for a “Gradients” folder (click on pictures to see them full-size):

You will find there some files: “diagonal.png” is the one we are looking for. To be sure, double-click to open it with Preview (or your default application for PNGs, whatever it is) or just hit the space bar to use QuickLook and have just a sneak peek:

As you can see, this image is quite narrow, just 95 pixels: how could it ever fit inside a 900+ pixels wide header? Well, each Rabbit’s design that comes with gradients supports this feature and automatically “repeats” the image horizontally to fill the whole width of the header. It’s like putting one after the other one a series of identical tiles (for advanced users: in CSS it’s background-repeat:repeat-x;).

To use this file as a banner, open your website in Sandvox. From the Inspector, choose Document > Appearance and look for the Banner drop-down menu. Select “Image Fill”:

Locate “diagonal.png” and select it. As you can see the original background:

has now changed to the new one, with the “diagonal” texture:

Just it!

You can create your own texture using your favorite graphic application (Pixelmator, Photoshop…), just remind:

  • This applies only to BehindTheRabbit’s designs which come with a set of complimentary gradients or textures. You can try it with any other design but some code may be needed to make it work: in this case it’s easier to create just a regular image, which width and height match exactly the header’s size.
  • Textures will be automatically repeated horizontally, so they may be as wide as you want (3 pixels as well as 100 pixels, there’s no difference, the image will be tiled).
  • If you want your image not to be tiled, create an image as wide as the header itself. To know the exact size, read the design’s specs on its page. For example, Carbone works with a 900×150 pixels image: make it 900 pixels wide (not less, or it will be repeated; not more, or it will be truncated).
  • Images are not tiled vertically, so make them at least as tall as written on that same page. For example, for Carbone use or create a 150 pixels tall image: if it’s shorter you will see the original background appearing below it; if it’s taller it will be truncated (which may be not relevant, when using gradients though, so if you need some approximation more is better than less).