How to use a custom image with the Elevator stack

The Elevator stack gives you an option to use a custom image. To do this, you will need to click on the box marked Custom Image?

When you check that box, the settings will change, and so will the look of the stack in RapidWeaver.

You will need to create your own, or find an image that has both an active and hover state. If you want to create your own, Jochen Abitz has created a nice blog post on how to do that with Affinity Designer. In fact, he has gone as far as creating an Elevator Template for Affinity Designer.

There is a setting in Elevator for using a custom image, called Image Size, you should set that to whatever width your image is. Something else to remember if you are making your own image, once you have your two images set, you need to save the images as one image, with the active image on top and the hover image on the bottom. So if your images are 45px by 45px, then your sprite image should be 45px wide by 90px high.

Once you have your images set, drag and drop them into the image well in the stack settings and you will see the page change with your new image.

Remember, the Image Size setting MUST be set to the image width. If it is not, it will look something like this:

Here is a set of sprites we quickly made up. They are in the Pixelmator template, so you can open them, change colors by using the bucket and set them to a color that matches your website. If you know a lot about Pixelmator, than you can do a lot more with these templates.
Pixelmator Elevator Sprite Templates

We hope this has helped you out.

Now go forth and make your websites great!