Customize existing skins or create your own
(and share it, if you like)
Basic HTML and CSS knowledge is all you need to:
How to customize an existing skin
Suppose you have chosen a skin that serves your needs, but has the wrong colors attached to it. See how you can tailor it to fit your corporate identity or your blog's appearance:
Step by step guide
- Use the Tour Wizard to create a working tour
- Browse the existing skins and remember your favorite's id (assuming model_t here)
-
Create a file named myTourStyle.css, somewhere on your server.
Note: Our aim is to override style definitions in model_t's style sheet - Add and adjust the highlighted line to the Wizard's output:
Amberjack.ADD_STYLE = 'http://my.com/path/to/myTourStyle.css';
Amberjack.open();
...
- Edit myTourStyle.css and adjust the skin's style like this:
- Check by opening your tour: http://my.com/?tourId=MyTour&skinId=model_t
It should show the model_t skin with green borders. Click the Files link below the skin of your choice to examine the skin's template and stylesheet file. This helps you understand what else can be changed through CSS rules.
Create your own skin
Step by step guide
- Use the Tour Wizard to create a working tour
- Create a folder called skin somewhere in your document root (/path/to/skin)
- Create a folder called mySkinName in the previously created skin folder (/path/to/skin/mySkinName)
- Add and adjust the highlighted line to the Wizard's output:
Amberjack.BASE_URL = 'http://my.com/path/to/'; // 1. don't add "skin" - 2. trailing slash needed
Amberjack.open();
...
- Choose an existing skin as the base of your work and download it's files to /path/to/skin/mySkinName
- Adjust the HTML (control.tpl.js) and CSS (style.css) of your skin as needed
- Check by opening your tour with your own skin: http://my.com/?tourId=MyTour&skinId=mySkinName
Placeholders
The following self explaining placeholders should be part of your skin's template (control.tpl.js) file:
{prevClass}, {prevClick}, {textPrev}, {nextClass}, {nextClick}, {nextPrev}, {currPage} {textOf} {pageCount}, {textClose}, {body}, {skinId}
(At least if you are planning to share it with others (see below))
Share your skin with others
Having created your own skin, you might want to share it with a broader audience:
- Create a ZIP file <mySkinName>.zip, containing:
- control.tpl.js
- style.css
- Image files (if your skin needs them)
- Send the ZIP to support@amberjack.org
I will upload it to the skins section where everyone else can test drive and use it.