Home · All Classes · Main Classes · Deprecated

Styling with style sheets

The application developer adds the style to the system (for instance, for a widget) and a set of attributes are defined for the style. These attributes are defined by UI designers, and they can be customised with style sheets. Style sheets provide an easier way to customise the look and feel of the system, without a need to re-compile the system all over again if something needs to be changed. Style sheets are also intuitive and simple to use. When the system starts up, style sheets are loaded and the styles are automatically initialised according to the values defined in the style sheets.

Syntax reference

This section describes the syntax for style sheet files. The following sections describe the building blocks for the style sheet definition from top to bottom. Most of the syntax follows the basic CSS rules, but there are also some MeeGo-specific additions.

Import

Syntax: @import ""; or @import url("");

Description: Imports additional style sheet files and, in this way, combines multiple style sheets into one.

Details: All the import statements must reside at the top of the CSS file, before any selectors are defined.

            @import "commonstylesheet.css";
            @import "otherstylesheet.css";

            // .. write other selectors here
             MySelector#MySelectorName
            {
                // write attributes here...
            }

Selectors

Syntax: styleclassname { }

Full syntax: styleclassname[type]#name.orientation:mode (all the parameters are optional but their order needs to be correct)

Description: Groups attributes for a defined style

Details: Selectors group attributes of the same category together. In MeeGo Touch style sheets, it basically means that there is one selector for each style class. Selector attributes follow the general inheritance rules, so if you declare base class selectors, their contents inherit to the subclasses by default. If you want to break this inheritance chain, you can add a dot character (.) in front of the class name, meaning that those attributes are not derived to the subclasses but used only for that class. As a general rule, most of the attributes should derive. Therefore, you should consider before using the dot in front of the class name.

            // these attributes will inherit to all subclasses of MyMWidgetStyle
            MyMWidgetStyle
            {
                // my own font definition and text color
                my-font: "sans" 15;
                my-text-color: \#FFFFFF;
            }

            // these attributes won't inherit to subclasses because of the dot in front of the styleclassname
            .MyMWidgetStyle
            {
                attribute-that-does-not-derive: "this does not derive";
            }

Attributes

Syntax: attributename: <attribute value>;

Description: Sets value to attribute

Details: Attributes and their values can be considered the actual data of the stylesheet. Application developers define them in the style header file, according to instructions from the UI designer.

The attribute naming between C++ code and style sheets follows the pattern where camelcase names are converted into lower-case strings with hyphens. See the example below.

C++ name Attribute name in stylesheet
backgroundColor background-color
underlineTextColor underline-text-color


Datatype Syntax Example
bool true, false visible: false;
int numeric value age: 42;
QColor Color name. See QColor::setNamedColor for possible parameters color: #ffffff;
qreal decimal value distance: 31.5;
const QPixmap* image-id [width height] background: image_id;
background: image_id 128 128;
const MScalableImage* image-id [left right top bottom] background: image_id;
background: image_id 0 128 0 128;
QSize width height size: 25 25;
QSizeF width height size: 25.2 25.6;
QPoint x y position: 10 10;
QPointF x y position: 10.6 10.6;
QFont family [weight] [italic] [capitalization] size

[weight] = light | normal | demibold | bold | black
[capitalization] = mixedcase | uppercase | lowercase | smallcaps | capitalize
font: arial 20;
font: arial italic 20;
font: arial bold 20;
font: arial uppercase 20;
font: arial bold uppercase 20;
font: arial italic uppercase 20;
QString text name: "john";
Qt::Alignment left, right, hcenter, justify, top, bottom, vcenter, center, absolute align: center;
Qt::Orientation vertical, horizontal orientation: vertical;
QTextCharFormat::UnderlineStyle nounderline, singleunderline, dashunderline, dotline, dashdotline, dashdotdotline, waveunderline underlinetype: nounderline;
Qt::PenStyle nopen, solidline, dashline, dotline, dashdotline, dashdotdotline pen-type: solidline;
Qt::Axis x, y, z rotation-axis: x;
const MFeedback* feedback-effect-name press-feedback: press;
QEasingCurve type [amplitude] [overshoot] [period] easing-curve: linear;
QFont::Weight light, normal, demibold, bold, black weight: demibold;
QFont::Capitalization mixedcase, uppercase, lowercase, smallcaps, capitalize capitalization: uppercase;


Dimension type Suffix Example
Relative % size: 25% 25%;
Absolute (pixels) size: 25 25;
Pixels pxsize: 25px 25px;
Millimeters mmsize: 25mm 25mm;

Constants

Syntax: @const constant-name: constant-value;

Description: Defines constant values in a style sheet, so you do not need to maintain duplicated data that is spread around the style sheet.

Details: Constant variables are defined using a syntax similar to attributes. Constant definitions support the same types and suffixes as attributes. Constants are assigned to attributes using the '$' character as prefix.

            @const DEFAULT_FONT: "arial" 12;
            @const DEFAULT_FONT_COLOR: #ff0000;
            .
            .
            .
            Object
            {
                font: $DEFAULT_FONT;
                color: $DEFAULT_FONT_COLOR;
            }

Advanced styling with style sheets

Parent-child relationship in style sheets

Syntax: parentclassname styleclassname { }

Description: Defines a set of attributes for a widget that has a certain widget as a parent.

Details: The parent is defined using the name of the widget class, not a style class. This is because the look and feel of the parent is not important. It is not possible to add any other parameters to the parent. Note that when styling from libraries, specifying a custom parent class is the only way to affect the styling of widgets external to the library, in other words, common widgets. See Providing view configuration & stylesheets for the widgets for details.

            MyParentWidget MyWidgetStyle
            {
               font: "sans" 10;
            }

            // the selector can also contain other parameters
            MyParentWidget MyWidgetStyle#Name.Orientation:selected
            {
               font: "sans" 20;
            }

Mode in style sheets

Syntax: styleclassname:mode { }

Description: Defines a set of attributes for a certain mode.

Details: The mode parameter is separated by a colon and it must be the last one in the selector definition.

            MyWidgetStyle:selected
            {
               font: "sans" 10;
               whatever-overridden-attribute: "overridden value"; 
            }

            // the selector can also contain other parameters
            MyWidgetStyle#Name.Orientation:selected
            {
               font: "sans" 20;
            }

Object names in style sheets

Syntax: styleclassname::name { }

Description: Defines a set of attributes for a named object.

Details: The name parameter is separated by the '#' character, and it must follow the class name and type when defining the selector. The software developer binds the actual name to the widget at the source-code level according to the instructions from the UI designer. This allows the person who creates the style sheet to assign a custom style for the named widget. Consult your UI designer for the object names in the application you are developing.

The system assigns named attributes as follows:

            MyWidgetStyle#fancynamedwidget
            {
                // place the overriding attributes here
                font: "courier" 30;
            }

Orientation in style sheets

Syntax: styleclassname.orientation { }

Description: Defines a set of attributes depending on the device orientation.

Details: The orientation parameter is separated by a dot character, and it must follow the object name when defining the selector. Two orientations can be defined, "Portrait" and "Landscape".

            // style attribute where orientation doesn't matter
            MyWidgetStyle
            {
                attribute: 0;
            }

            // style attribute in landscape orientation
            MyWidgetStyle.Landscape
            {
                attribute: 1;
            }

            // style attributes in portrait orientation
            MyWidgetStyle.Portrait
            {
                attribute: 2;
            }

The orientation parameter affects styling as follows:

Type in style sheets

Todo:
add documentation

Copyright © 2010 Nokia Corporation
MeeGo Touch