Styles

The styles area available at the App studio home page sees the start of the introduction of the ability to style some elements of the platform differently from the default styles applied.

As the development roadmap continues for the platform we will make these styles available to existing features, but for now, their use is limited to the areas defined at the bottom of this page

If you have any requests for the feature please add them in the comments below.

Editing the Style

 The page below shows a list of styles that have been enabled on a site, every site created will have these 6 below as default:

You can click on the style to edit its values

Adding a style has no effect unless it is enabled against a rule or a feature - please see the separate support articles on applying styles to features like templates, rules and aggregate fields.

There are two types of style currently available

Standard Styles

When editing a standard style you can specify various elements to override and leave other elements to take the default style for the site

• Name - This is the name of the style to be applied - it must contain no spaces or special characters
• Description - an extended description - please also state where the style is used so that other app builders know that changes to the style may affect other areas
• Appearance - there are two options available -
  • • • • Normal - Displayed normally with no emphasis or frame
        • Cartouche - Displayed in a round-rectangular frame for emphasis
• Element - There are 3 options to specify which part of the item being styled does this style apply to - If you want a style to apply to both a label and the text entry then you will need to create 2 styles 
  • • • • Component - 
        • Label - the Label of a field or a report
        • Text - The text entered in an input element
• Font Size- Allows different font sizes to apply to the selected element as follows - these refer to industry standard styles for font sizes
  • • • • Medium - standard size (default)
        • XX-Small 
        • X-Small
        • Large
        • X-Large
        • XX-Large
        • Smaller
        • Larger

• Font Weight - Allows different font weights to apply to the selected element as follows
  • • • • Normal - standard font with no emphasis
        • Bold
        • Bolder
        • Lighter
        • 100 - 900 - these are specific weights, where 400 represents "normal" and 700 represents "bold"

• Colour - Allows colour to be selected for the element being styled- this pops up a selection option to allow either a palette based selection or an RGB based colour number - Here is a useful RGB Picker
• Background Colour - Allows colour to be specified for the background of the element being styled
• Is Global - Allows the style to be applied globally - these cannot be changed and is set for the default six added to every site

Chart Styles

Chart styles are used to show specific colours on some charts matching values in a series or legend

For example - the set of values in the screen shot below would allow you to have a pie chart showing grouped values where the pie segment for "Done" was green, and "To-Do" is Red. It allows consistent display across charts where

For more information on applying these styles to charts, see this support article Chart Colour Options 

For the chart style, you add pairs of values for the option and it's associated colour