×
Namespaces

Variants
Actions
(Difference between revisions)

Customising a Guarana UI checkbox

From Nokia Developer Wiki
Jump to: navigation, search
Forum Nokia KB (Talk | contribs)
m (Protected "CS001551 - Customising a Guarana UI checkbox" ([edit=sysop] (indefinite) [move=sysop] (indefinite)))
Forum Nokia KB (Talk | contribs)
Line 1: Line 1:
 
__NOTOC__
 
__NOTOC__
 
__NOEDITSECTION__
 
__NOEDITSECTION__
 +
{{KBCS}}
 
{{CodeSnippet
 
{{CodeSnippet
|id= 
+
|id=CS001551
 
|platform=
 
|platform=
 
|devices=Nokia 5800 XpressMusic
 
|devices=Nokia 5800 XpressMusic
 
|category=Web Runtime (WRT)
 
|category=Web Runtime (WRT)
 
|subcategory=Guarana UI, UI
 
|subcategory=Guarana UI, UI
|creationdate=November 27, 2009
+
|creationdate=December 30, 2009
 
|keywords=
 
|keywords=
 
}}
 
}}
Line 13: Line 14:
 
==Overview==
 
==Overview==
  
This code snippet demonstrates how to customize a Guarana UI checkbox. You can download the component library from [http://wiki.forum.nokia.com/index.php/Guarana_UI:_a_jQuery-Based_UI_Library_for_Nokia_WRT Forum Nokia]. 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]].
+
This code snippet demonstrates how to customise a Guarana UI checkbox. You can download the component library from [http://wiki.forum.nokia.com/index.php/Guarana_UI:_a_jQuery-Based_UI_Library_for_Nokia_WRT Forum Nokia]. This snippet assumes that you are familiar with adding the checkbox component on a web page. For more information about this, read the snippet [[CS001548 - Adding a Guarana UI checkbox on a web page]].
  
To replace the checkbox with your own version, first create the graphics that you want to use. After that, replace the <tt>themes/nokia/base/images/checkbox.png</tt> 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:<br />
+
To replace the checkbox with your own version, first create the graphics that you want to use. After that, replace the file <tt>themes/nokia/base/images/checkbox.png</tt> 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:<br />
 
[[File:Guarana_checkbox_default_img.png]]<br />
 
[[File:Guarana_checkbox_default_img.png]]<br />
The technique used for switching between these states when the checkbox is clicked is to adjust the background picture with the CSS classes. Like this:
+
To switch between these states when the checkbox is clicked, adjust the background picture with CSS classes as shown here:
  
 
<code css>
 
<code css>
Line 25: Line 26:
 
</code>
 
</code>
  
This means that you must customize the CSS file <tt>themes/nokia/base/images/checkbox.css</tt> so that it corresponds to your own image file. For example, if you have created this kind of file:<br />
+
This means that you must customise the CSS file <tt>themes/nokia/base/images/checkbox.css</tt> so that it corresponds to your own image file. For example, if you have created this file:<br />
 
[[File:Guarana_checkbox_custom_img.png]]<br />
 
[[File:Guarana_checkbox_custom_img.png]]<br />
where the checkbox icon is 34 x 34 pixels, and there are only two states (checked and unchecked) represented, then the customized CSS classes would look like this:
+
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:
  
 
<code css>
 
<code css>
Line 56: Line 57:
 
==Postconditions==
 
==Postconditions==
  
The default graphics of a checkbox component are replaced with own graphics and the necessary changes are made to the CSS file.
+
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==
 
==See also==
  
* [[Adding a Guarana UI checkbox on a web page]]
+
* [[CS001548 - Adding a Guarana UI checkbox on a web page]]
  
 
==Supplementary material==
 
==Supplementary material==

Revision as of 15:58, 30 December 2009


Template:KBCS

Article Metadata
Tested with
Devices(s): Nokia 5800 XpressMusic
Article
Created: (30 Dec 2009)
Last edited: Forum Nokia KB (30 Dec 2009)

Overview

This code snippet demonstrates how to customise a Guarana UI checkbox. You can download the component library from Forum Nokia. This snippet assumes that you are familiar with adding the checkbox component on a web page. For more information about this, read the snippet CS001548 - Adding a Guarana UI checkbox on a web page.

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;
}

Postconditions

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.

116 page views in the last 30 days.
×