Namespaces

Variants
Actions

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.

Home Screen widget template CSS for VGA devices

From 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 07:59.
35 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.

×