Pages - Colors

The colors tab, within Pages, is structured into two distinct areas:
  • Designer Surface Settings

    The designer surface settings allow you reset the WYSIWYG display area so that it displays based on a specific device (iphone, smartwatch, android tablet, desktop device, etc). Alternatively you can specifically set a screen size (using the Height and width options) or change the styling to see how the difference device cultures change the look and feel of your screen design.
  • Specific Data Segment Color Settings (by target device operating system)

    If the Cultural Styling Override checkboxes in the Apps section have nen checked then the app will be using the "desktop" settings for all devices and only the "Desktop" options will be available here. Otherwise, tabs are provided for Desktop, Android, iOS and Windows (UWP) data segment areas that can be used to override, on the selected segment, any default theme color settings that may have been set App wide.
    The App colors tab contains details of the default colors set up in the App Settings section.
    The areas that can be defined/re-defined are:
    • Background/border

    • Header Background

    • Header Text

    • Body Background

    • Body text (prompts)

    • Body text (data)

    • Body Buttons

    • Body Buttons text

    • Grid Header color

    • Grid Header text color

    • Tab ear color

    • Tab ear text color

    On the iOS, Android and Windows (UWP) tabs there is also an option to "Use Desktop colors for iOS/Android/Windows (UWP)" which will automatically apply any colors you have set in your Desktop color settings to iOS, Android and/or Windows (UWP) color settings.
    iOS and Android also have further settings to accommodate their "culture" specifics:
    • Widget row divider line (iOS) - set the color of the divider used by iOS

    • Use rounder body corners (iOS) - change the iOS culture corners to rounded corners

    • On-focus input underscore (Android) - set the color of the underscore (at the bottom edge of input fields) used by Android


Data Segment Colors Menu options
  • Copy Settings - copy all the colour settings for this operating system into the clipboard

  • Paste Settings - Paste all the colour settings (previously saved to the clipboard) to the colour settings for this operating system

  • Duplicate Settings to all Segments - Duplicate the colour settings in this area to all the segments on this page

  • Duplicate Settings to Sibling Segments - Duplicate the colour settings in this area to all the segments (at the same level i.e. siblings) on this page

  • Duplicate Settings to Child Segments - Duplicate the colour settings in this area to all the segments that are "children" i.e. segments within this segment on this page