Custom Button Images

 Top  Previous  Next

You can replace any of the images used for the Control  Pad buttons with your custom image files. Before doing this, we strongly recommend creating a backup copy of the original Control Pad files.

 

All the image files used for buttons are located in the media/btn_large and media/btn_small folders. You can browse these folders to find a button with the icon you prefer. If you create custom button image files, we suggest you place them in these folders to keep the references in HTML and CSS consistent for all buttons.

 

Blank Images

Blank image files are included to help you create your custom button images.

•/media/btn_large/_btn_large_blank.png
•/media/btn_small/_btn_small_blank.png

 

These .PNG files were created in Adobe Fireworks CS4, but can be imported and edited in many other graphics editing applications. These images are in vector format and contain layers so you can modify each element independently from the other elements.

 

Notes:

•The included buttons are in .PNG format.
•Each button has an up and over state.
•Large buttons are 50 x 50 in size
•Small buttons are 40 x 40 in size.
•The included buttons are named using this syntax: <color>_<action>_<up,over>.png.
•The filenames for each button are referenced in the CSS files. The easiest way to add your custom images is to use the same filenames as the originals. If you change the filename for a button, the references to the image with the CSS files will need to be changed.
•.GIF or .JPG files can also be used for button images. To use .gif of .jpg images, copy the image files to either /media/btn_large/ or /media/btn_small/ subfolders. Then edit the references to the button images within the CSS files. If you have many custom buttons, you might consider performing a find/replace in your HTML editor.

 

 

Changing Images used for a Button

You can easily change the images used for any of the Control Pad buttons.

 

You should not change the id or class name for any button.
The ID and CLASS are referenced in the JavaScript – and changing their values will interfere with the commands being executed by JavaScript. If you do change the ID or CLASS, you’ll have to change it in the HTML, CSS, and JavaScript files.

 

To edit the images used for a button, first note the class name in the HTML file. For example, the Back button is listed like this in the index_btnlarge.html page:

 

<li id="back_button" class="button_back"><a href="#" …

 

Now that you know the class name for the button (i.e. “button_back”) you can now find that class name in the CSS files (i.e. /media/controlpad_buttons_large.css).

 

You can specify the images to be used in the line: background-image: url(path/filename)…

 

.button_back a {

 background-image: url(btn_large/black_back_up.png);

 background-repeat:no-repeat;

}

.button_back a:hover {

 background-image: url(btn_large/black_back_over.png);

}

 

•.classname a is used for the “up” state.
•.classname a:hover is used for the “over” state.