Click or drag to resize
How To use themes

PACKflow provides a user-interface theming system.

This makes possible to customize PACkflow appearance easily, without editing any stylesheet.

Below is an exemple of different themes applied in a PACKflow form.

Themes 1
Overview

Themes are pre-defined sets of named properties persisted in PACKflow database. They are created, edited and selected runtime.

PACKflow's stylesheets use references to these named properties instead of absolute values in their rules.

Thanks to a dedicated Dotless plugin, properties in stylesheets are replaced by the applicable theme's values runtime.

Selecting a theme

A theme can be selected for different scopes:

  1. Site: The default theme, applies when no other is applicable.

    Administrators can select the default theme under [YourSiteUrl]/Administration/Settings

  2. Application: Applies to all content under an application.

  3. Application Context: Applies to all content under an application context.

    Themes for specific applications or application contexts can be set under [YourSiteUrl]/Administration/AppSettings.

  4. User: Applies to content loaded for a specific user.

    Users can select a personal theme under their profile page.

Note Note
When loading a page, PACKflow applies priority rules if several themes are applicable. The engine picks one single theme to apply. There is no cross-theme inheritance mechanism.
Editing a theme

Users can create or edit themes runtime.

When created by simple users, themes are said private and only available to their creator. Site Administrators can create public themes anyone may select.

This control is accessible under PACKflow's user menu

Themes 4

Below is the theme edition control, showing available named properties for edition. It can be loaded in any PACKflow page.

Pressing the 'Test' button will instantly apply current settings to the page, without saving the theme or reloading the form.

Themes 2
Using theming API in custom stylesheets

It is possible to take profit of PACKflow's theming system in any .less file deployed with an application. Here is an example on how to do it.

.MyElement{

/*In your file, replace this rule:*/
background-color:#333;

/*By this one:*/
background-color:PFTheme('Page_Color1');

/*This color will be dynamically set by PACKflow when serving the file via the Dotless module.*/
}

Colors can be applied with transparency. This allows following the material design guidelines for borders and texts, setting strenght via transparency.

.ElementFrame{
background-color:PFTheme('Page_Color1');
border: 1px solid PFTheme('Page_Text_Color1, 0.2);
}

.ElementFrame .LightText{
color:PFTheme('Page_Text_Color1', 0.8);
}

.ElementFrame .MediumText{
color:PFTheme('Page_Text_Color1', 0.9);
}

.ElementFrame .StrongText{
color:PFTheme('Page_Text_Color1');
}
Note Note

Available properties names can be found by browsing properties in the theme editor.

Check 'Property Name' under the property editor. (visible above)

Another way to find them is to inspect PFThemeSettings constants.

Note Note

Theme-dependant properties can't be combined with less standard function.

Example : This property will make the less compiler fail.

background-color:darken(PFTheme('Page_Color1'),20%);

This is scheduled for future improvement.

Theme resolution

When several themes may apply, PACKflow applies the following logic to pick the applicable theme:

User-selected theme is always chosen when available. If not, PACKflow tries to get an Application Context, then Application theme if applicable.

The site theme is applied when no other theme is relevant

Themes 3
See Also