Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries over the next few weeks. Thanks for all your past and future contributions.

Revision as of 06:19, 5 October 2012 by hamishwillee (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

Customising a Guarana UI checkbox

From Wiki
Jump to: navigation, search

This code example demonstrates how to customise a Guarana UI checkbox.

Article Metadata
Code ExampleTested with
Devices(s): Nokia 5800 XpressMusic
Created: tapla (27 Nov 2009)
Last edited: hamishwillee (05 Oct 2012)



This snippet assumes that you are familiar with adding the checkbox component on a web page. For more information about this, read the snippet Adding a Guarana UI checkbox on a web page. You can download the component library from Guarana UI: a jQuery-Based UI Library for Nokia WRT.

To replace the checkbox with your own version, first create the graphics that you want to use. After that, replace the file themes/nokia/base/images/checkbox.png with your own image file. The original image file contains pictures of the checkbox in four different states: checked and not pushed, checked and pushed, unchecked and not pushed, and unchecked and pushed:

Guarana checkbox default img.png

To switch between these states when the checkbox is clicked, adjust the background picture with CSS classes as shown here:

.nokia-checkbox-unchecked {
background-position: 0 -74px;

This means that you must customise the CSS file themes/nokia/base/images/checkbox.css so that it corresponds to your own image file. For example, if you have created this file:
Guarana checkbox custom img.png
where the checkbox icon is 34 x 34 pixels, and there are only two states (checked and unchecked) represented, then the customised CSS classes would look like this:

.nokia-checkbox-icon {
background-image: url(images/checkbox.png);
height: 34px;
width: 34px;
float: left;
.nokia-checkbox-checked {
background-position: 0px 0;
.nokia-checkbox-unchecked {
background-position: 0 -34px;
.nokia-checkbox-pushed .nokia-checkbox-checked {
background-position: 0 0px;
.nokia-checkbox-pushed .nokia-checkbox-unchecked {
background-position: 0 -34px;


The default graphics of a checkbox component are replaced with your own graphics and the necessary changes are made to the CSS file.

See also

Supplementary material

This code snippet is part of the stub concept, which means that it has been patched on top of a template application in order to be more useful for developers. The version of the WRT stub application used as a template in this snippet is v1.2.

This page was last modified on 5 October 2012, at 06:19.
75 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.


Thank you!

We appreciate your feedback.