Home Screen widget template CSS for VGA devices

Comments

(no comments yet)

Log in or Join to leave comments.

Article Metadata

---

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.

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