Palm webOS

Scene Basics

Backdrop

global-base.css

Change the background of an individual scene or every scene within the application.

Scene HTML
<div class="my-backdrop"></div>

Base selector	Optional selectors	Required child
my-backdrop	Â	Â
body	Â	Â

Notes:

• my-backdrop is a developer-defined selector (you can define any selector name); this technique allows each individual scene to have a unique background.

• Use the body selector to style the body element; a simple solution to style all of the scenes in your application.

Fixed Header

global-lists.css

Floating header atop your scene; visually identical to the View Menu.

Scene HTML
<div class="palm-header"></div> <div class="palm-header-spacer"></div>

Base selector	Optional selectors	Required child
.palm-header	.left .right	Â
.palm-header-spacer	Â	Â

Page Header

global-lists.css

The topmost element of the scrollable content; commonly used atop preference scenes.

Scene HTML
<div class="palm-page-header multi-line"> <div class="palm-page-header-wrapper"> <div class="icon"></div> <div class="title"> My title </div> </div> </div>

Base selector	Optional selectors	Required child
.palm-page-header	.multi-line .icon	.palm-page-header-wrapper
.palm-page-header-wrapper	Â	Â
.palm-page-header-wrapper > .icon	Â	Â
.palm-page-header-wrapper > .title	.left .center .right .truncating-text	Â

Notes:

• palm-page-header-wrapper is a child element with a specified margin to compensate for the padding effect of -webkit-border-image.

• palm-page-header-wrapper > .icon should be a 32 × 32px PNG centered on the div. ...