Create and Edit Styles

  • Designers use Styling to customize the look of their DataVoke solutions down to the arrow size on a combo-box.
  • Styling can be used individually or in addition to a UI Theme to make specific controls stand out and unique.

Create a New Style

  1. Click the green Plus Sign and select the New Style menu option from the list.
  2. The Style Editor window opens with a collapsed groups of targets.
  3. Click on any of the target area items to expand the group to view sub-targets and states of the target
  4. Continue to drill down until the aspects (Background, Font, Foreground, Border, Padding, Cursor, etc.) of the target appear
  5. There are a few options to add data to the aspects:
    • Manually typing into the aspect textbox
    • Clicking the Edit icon or Color swatch to open the Pop-Up Editor
    • Clicking the fx button to open the Expression Editor
  6. After entering the data using one of the three above options, a preview will appear on the right with the specified data applied.

Drill-Down and Preview

When changing the hover or pressed states, or Tool Tips, you will need to use your mouse in the preview pane.

The Style Editor: Preview Your Changes
Here we've drilled into the Button style and updated the background color for the pressed state.

The Pop-Up Editors

There are 8 different target areas that can be styled individually or combined including Button, Collapsible Group, Field, Grid, Loading Panel, Panels, Status Marker, and Tabs.

Each pop-up editor is used to modify the values of the given style attribute. See the pop-up editors here.

The preview will automatically be updated to reflect the new value. Click outside pop-up editor to close it.

Pop-Up Editor
Description
Color Picker

Background
Foreground
Highlight
Line
Arrow
Each of these allow you to use the color palette or the the Expression Editor to select an aspect's color.
  1. Click the color block on the style aspect.
  2. Select the Saturation and Lightness to adjust the color palette. 
  3. Move the crosshair over the color palette and click to 'select' the Preview color.
NOTE: Make a note of your Saturation and Lightness values to maintain a consistent color palette throughout the application.
Border
You'll see the color palette and two other options for this pop-up editor. Watch the preview to see how these adjust the look of your application.
  • Width: Adjust the thickness of the line.
  • Radius: Adjust the roundness of the corners.
Padding
The padding pop-up editor increases the size of some aspects, including buttons. You'll notice the blank space between the text and the outside edge of the button border. This change will show a live preview.

  • Enter a value into the All Sides: box to add space to all sides of a control at once.
  • Individually make a change to each side: left, top, right, bottom.
Font Style
Font Type
The font pop-up editor includes a selection of commonly used fonts, and has an editable drop-down list for the Font Type.  
The editable list can be changed to any font that is loaded on the machine/device.  

Font Size
The pop-up editor also includes a selection of common pica sizes from "6" to "26", which also has an editable drop-down list for Size.

Font Weight
Bold and Italic can also be applied to the selected font by clicking on one or both of the font weight buttons.
Size
The size pop-up editor allows for changes to the width and height of a control. The preview for this change is live.
Cursor
The cursor pop-up editor includes a drop-down of available cursors to display when the cursor is hovered over the specified control.

The cursor types include:
  • Alias
  • Cell
  • Context-menu
  • Copy
  • Crosshair
  • Default
  • Help
  • Move
  • No-drop
  • None
  • Not-allowed
  • Pointer
  • Progress
  • Text
  • Vertical-text
  • Wait
Expression Editor
The Expression Editor can be accessed by clicking the fx button next to each aspect.

Manually Add Aspect Data

Each aspect needs a specific format when entering data manually.

Target Item Description Example
Arrow
Hex color format including the #.
#000000
Background
Hex color format including the #.
#000000
Font Font type, font size, font weight  Ex: "Lucida Grande", 10, "bold".

Color Hex color format including the #, and also allows gradient.
#000000
Cursor Type of cursor displayed. Ex: Default, cell, crosshair, help, pointer, etc.

Font Font type, font size, font weight Ex: "Lucida Grande", 10, "bold".

Foreground
Hex color format including the #.
#000000
Highlight Color
Hex color format including the #.
#000000
Line Color
Hex color format including the #.
#000000
Padding
The distance from the control edges to the control margin for each edge.
2, 2, 2, 2
Size
Width and height of a control.
10, 10

Learn about Applying Styles using the DataVoke toolbox.

Have more questions? Submit a request

1 Comments

Please sign in to leave a comment.