Quick ReferenceStyle Guide - Palm webOS

Mojo’s styling is automatically provided when you select the Mojo
class names within your HTML, or use Mojo widgets. This appendix will help you determine the selectors or
properties to change when you want to override the automatic styling. It’s
best to use this style guide along with the
StyleMatters sample application provided with the
SDK.

This excerpt is from Palm webOS.
This is the official guide to building native JavaScript applications for Palm's new mobile operating system, Palm® webOS™. Written by Palm's software chief technology officer along with the Palm webOS development team, Palm webOS offers you a complete tutorial on the design principles, architecture, UI, tools, and services necessary to develop webOS applications. If you're familiar with HTML, CSS, and Javascript, you're ready to build applications for webOS-based devices, including the Palm Pre.

Mojo’s styling is automatically provided when you select the Mojo
class names within your HTML, or use Mojo widgets. This appendix will help you determine the selectors or
properties to change when you want to override the automatic styling. It’s
best to use this style guide along with the
StyleMatters sample application provided with the
SDK.

The guide is organized into several categories, including:

Scene Basics

List Basics

Containers

Dividers

Panels

Text

Widgets

Each category is presented in a table with:

A brief description

The filename of the CSS style sheet where the style category is
defined

An HTML code sample using the style

A list of the base selectors that you can use in your CSS to
override the framework’s styling

A list of optional selectors

Required child selectors, which must be embedded with the base
selector for the style to be used effectively

These styles may be updated from time to time by Palm as part of an
SDK update—you should check the SDK documentation to get the latest
information.

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.

When touched, rows using x-mojo-touch-feedback will display a
selection graphic implemented using -webkit-border-image with a 9-tile image
(41 × 49 pixels).

For items within scrollable content, use delayed feedback. For fixed elements that
don’t scroll, immediate feedback
is an option. Use immediatePersistent or
delayedPersistent only if you require exacting
control of when feedback is removed (which must be done
manually).

Touch Feedback with Groups

global-lists.css

Displaying alternate background images and content styling in
response to user interaction with rows within in a palm-group.