Stylesheets Management

With stylesheets you will be able to define the look of your entire panel and widgets by applying different settings for colors, borders, frames, tints, backgrounds etc.
With LiVo 2.0 an additional setting “Background effect” found its way into the stylesheet setup. With that you can blur a selected background image in order to give the well known blurry background style of many iOS apps.
Besides the panels themselves, stylesheets are the most powerful feature within LiVo. While allowing a comprehensive customization of the user interface appearance, they ensure a consistent, yet individualized look and feel of your panels.
Stylesheets applies to an entire panel, so that you just have to change the style of the panel to adapt all widgets to a consistent appearance. Some widgets also allow to overwrite some of the properties already defined in stylesheets for even more flexibility.

Grid spacing effect on the stylesheet

Applying a grid spacing corresponding to the distance of widgets within your panel helps aligning all widgets on the panel.

One important stylesheet feature which should really be emphasized is the “Base widget size”. It defines the size of a “base square” of a widget. The full widget size is always a multiple of this base widget size, which makes it really easy to align widgets on a panel for a tidy look.

The grid spacing property makes it even easier to align widgets of different sizes, even when you have some space between them. The grid spacing settings enlarges the widgets width and height in order to keep the base elements in them (for example the buttons) nicely aligned.

You can add new stylesheets by tapping on the + button. To send a stylesheet via email, to duplicate a stylesheet or to delete it, select the desired stylesheet and tap on the corresponding button (see the online help for hints on the buttons function).

LiVo installs a set of predefined stylesheets on app start. These stylesheets are not editable (a lock icon is shown on the menu bar). You will have to create a copy if you want to create your own stylesheet based on a predefined one (tap on clipboard icon and select duplicate).

To get an immediate feedback on your stylesheet changes, modify your stylesheets settings within the panel editor (see Panel Management).