×
Namespaces

Variants
Actions

Home Screen widget template CSS for VGA devices

From Nokia Developer Wiki
Jump to: navigation, search
Article Metadata
Compatibility
Platform(s):
Symbian
Article
Created: ltomuta (12 Apr 2011)
Last edited: hamishwillee (23 Jul 2012)

The code snippets below illustrate the layouts applied to the widget templates supported by Nokia N97's Home Screen Publishing API when rendered on a smartphone with VGA display resolution. The CSS code for nHD resolution can be found in the Appendices of the published API reference.

Contents

Widget

plugin.plugins
{
height: 115px;
width: 436px;
 
margin-top: 9px;
margin-left: 10px;
 
_s60-longtap: true;
 
nav-index: appearance;
}

Template: onerow

widget#onerow_template
{
block-progression:rl;
 
}
 
image#image_container
{
height: 95px;
width: 95px;
margin-top:5px;
margin-bottom:5px;
margin-left:5px;
margin-right:4px;
padding-top:5px;
padding-bottom:5px;
padding-left:5px;
padding-right:5px;
nav-index:appearance;
_s60-aspect-ratio:preserve;
}
 
text
{
font-size:3.5u;
margin-left:3px;
margin-right:5px;
margin-top:5px;
margin-bottom:5px;
padding-top:5px;
padding-bottom:5px;
padding-left:5px;
padding-right:5px;
text-align:center;
text-overflow-mode: wrap;
max-line-amount: 2;
font-family: EAknLogicalFontSecondaryFont;
color: "SKIN(268458534 13056 74)";
nav-index:appearance;
}

Template: tworows

widget#tworows_template
{
block-progression:rl;
}
 
image#image_container
{
height: 95px;
width: 95px;
margin-top:5px;
margin-bottom:5px;
margin-left:5px;
margin-right:4px;
padding-top:5px;
padding-bottom:5px;
padding-left:5px;
padding-right:5px;
nav-index:appearance;
_s60-aspect-ratio:preserve;
}
 
box#text_container
{
direction: ltr;
block-progression:tb;
margin-left:3px;
margin-right:5px;
margin-top:14px;
}
 
text.text_box
{
padding-right:5px;
padding-left:5px;
padding-top:5px;
padding-bottom:5px;
font-family: EAknLogicalFontSecondaryFont;
font-size: 3.5u;
height:30px;
color:"SKIN(268458534 13056 74)";
nav-index:appearance;
_s60-text-valign: top;
}

Template: threerows

widget#threerows_template
{
block-progression:rl;
}
 
image#image_container
{
height: 95px;
width: 95px;
margin-top:5px;
margin-bottom:5px;
margin-left:5px;
margin-right:4px;
padding-top:5px;
padding-bottom:5px;
padding-left:5px;
padding-right:5px;
nav-index:appearance;
_s60-aspect-ratio:preserve;
}
 
box#text_container
{
direction: ltr;
block-progression:tb;
margin-left:3px;
margin-right:5px;
}
 
text.text_box
{
padding-right:5px;
padding-left:5px;
padding-top:2px;
padding-bottom:2px;
font-family: EAknLogicalFontSecondaryFont;
font-size: 3.5u;
height:35px;
color:"SKIN(268458534 13056 74)";
nav-index:appearance;
_s60-text-valign: top;
}

Template: threerowstext

text.text_box
{
padding-left:11px;
padding-right:11px;
text-align:left;
font-family: EAknLogicalFontSecondaryFont;
font-size: 30px;
color: "SKIN(268458534 13056 74)";
nav-index:appearance;
_s60-text-valign: top;
}

Template: wideimage

widget#wideimage_template
{
nav-index: appearance;
}
This page was last modified on 23 July 2012, at 10:59.
33 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.

×