Common Controls

The Design tab of the CPG Modifier Panel styles the selected control on a Control Panel. Many of its sections appear on more than one control type and work the same way wherever they appear. Those shared sections are described here, and the individual control pages link to them.

To open these settings, select a control on the Control Panel and click the Design tab in the Modifier Panel.

Sections by Control Type

The table below shows which control types include each shared section. Sections that appear on only one control type, such as the Fader's Fader section or the Knob's Inner Knob section, are described on that control's own page.

Editing Multiple Controls

You can select more than one control and edit them together. When you do, the Design tab shows only the sections and properties that every selected control has in common, and changing one of those properties applies it to all of the selected controls at once.

The shared sections narrow as the selection becomes more varied. Selecting every control on a Control Panel leaves only the sections that all control types share — Change Control Type, Alignment, Layer Order, Transform, Theme, and the common Appearance properties (Opacity, Softness, Glow, Shadow, and Border).

Change Control Type

Use the Change Control Type dropdown to switch the selected control to a different element type, such as a Fader, Button, or Meter. The control keeps its function mapping where it applies to the new type.

Alignment

The Alignment icons position the selected control within the Control Panel. The first group sets horizontal alignment (left, center, right, and distribute), and the second group sets vertical alignment (top, middle, bottom, and distribute).

When you select more than one control, alignment applies across the selection.

Layer Order

The Layer Order controls set how controls stack when they overlap. Move the selected control forward to bring it in front of others, or backward to send it behind them.

• The top icon brings the control to the front, on top of every other control.
• The up arrow moves the control forward one layer.
• The down arrow moves the control back one layer.
• The bottom icon sends the control to the back, behind every other control.

A new control is added on top of the existing controls. If you use a shape as a background and your controls disappear behind it, select the background and send it to the back. See Use a Shape as a Background.

Transform

The Transform fields set the size and position of the control on the Control Panel grid.

• W — Width, in grid cells.
• H — Height, in grid cells.
• X — Column position on the grid.
• Y — Row position on the grid.

Theme

The Theme dropdown lists the available control themes (saved sets of colors and styling). Choose a theme and click Recall to apply its styling to the selected control.

Shape

The Shape section sets the outline of the control, on controls such as the Button and LED. Click an icon to choose a square, a circle, or a polygon.

When you choose a polygon, two number fields appear beside the icons:

• The first sets the number of sides, from 3 to 50. The default of 3 gives a triangle.
• The second sets how far the sides are pulled in toward the center, from 0 to 100. At 0 the sides are straight; higher values turn the polygon into a star.

Cap Style

The Cap Style section sets the appearance of the handle you drag (the cap), on controls such as the Fader and Knob.

• Click an icon to choose the cap shape.
• Use the Size slider to set how large the cap is.

The Toggle has its own version of this section; see Toggle.

State

The State selector chooses which state you are styling, on controls that have more than one state: the Button, Toggle, and LED.

• 1 or 2 — Style one state at a time.
• 1|2 — Style both states at once. Any change you make applies to both states.

Only some sections are held separately for each state: Appearance, the Toggle's Cap Style, and the Button's Text and Icon. Other sections, such as Label and Readout, look the same in both states.

In 1|2 mode, the Design tab shows the values from state 1. When a property has a different value in state 2:

• A small blue dot appears beside the property. Hover over the dot for a reminder that editing it applies the new value to both states.
• A text field shows <various>.
• A slider also shows the other state's value as a dimmed fill.

Some controls are meant to look different in each state, such as a button that lights up when it is on, so a blue dot does not always mean something needs fixing.

Appearance

The Appearance section sets the colors and visual effects of the control. The exact properties depend on the control type. Every control includes:

• Opacity — How opaque or transparent the control appears.
• Softness — How rounded the corners are.
• Glow — The amount of glow around the control.
• Shadow — The amount of drop shadow behind the control.
• Border — The border color and thickness.

Most controls also include these color and thickness properties:

• Fill Color — The main color of the control. Text-only controls, such as the Label and Readout, do not have a Fill Color. On the Droplist and Radio Button this is labeled Fill.
• Background Color — The color behind the control. This appears on controls such as the Fader, Knob, Meter, Label, and Readout.
• Thickness — The thickness of the control's drawn element. The Droplist and Radio Button do not have a Thickness.

Some control types add their own appearance properties:

• A Fader or Knob adds Cap Color, Cap Detail Color, and a Track color and size for the handle and track.
• A Droplist or Radio Button adds a Selected Item Color and a linked Hover color. A Droplist also adds a Caret Color for the arrow that opens its list.

Choosing a Color

Click a color property, such as Fill Color, to open the color selector. Use the dropdown at the top to choose how you set the color: All Colors, Bright Collection, or Gradient. Some color properties, such as Fill Color and a Fader's Cap Color, also offer Image.

All Colors

All Colors is the default option.

• The large square sets the mix of the color. Move the small circle toward a corner to choose the pure base color, a tint (lighter), or a shade (darker).
• The second column chooses the base color.
• The third column sets the color's opacity. The percentage beside the Hex field shows the same value, and you can type a value there for precise adjustment. When the opacity is less than 100%, the color box shows a checked pattern.
• The Hex field shows the six-digit hex number of the RGB color. Type a hex number for precise color matching. The first two digits are red, the next two are green, and the last two are blue, each from 00 (none) to FF (100%). For example, white is #FFFFFF and black is #000000.

To save a color for future use, click the + in Saved Colors. A small box with that color appears in the row. Click a saved color to recall it.

To delete saved colors, click Edit, click each saved color you want to delete, and then click Done.

Saved colors and saved gradients are stored with the site file, so they are not shared with other Sites.

Bright Collection

Bright Collection offers nine preselected colors. Click a color to apply it.

Image

Image uses a picture in place of a color, for example a photo of the room or a brushed aluminum texture. Click Import Image to find and load an image, then choose how it fills the control: Fill, Fit, Tile, or Raw.

After you use an image, its name is added to the list, so you can reuse it for other items in your Control Panel Group.

Gradient

Gradient creates a linear or radial gradient between colors.

• The bar at the top previews the gradient. Drag a stop along the bar to change where the colors blend, and select a stop to set its color.
• Set the color of the selected stop the same way as in All Colors, including the base color, the tint or shade, the opacity, and the hex number.
• Type an angle, from 0 to 360 degrees, to set the direction of a linear gradient.
• Click the linear or radial icon to choose the gradient type.

Gradients have their own Saved Colors row, which works the same way as in All Colors.

Scale

The Scale section adds value markings along the control, such as on a Fader, Knob, or Meter. Select the checkbox to show the scale.

• Number — The number of divisions on the scale.
• Scale Color — The color of the tick marks.
• Text Color — The color of the scale numbers.
• Font — The font of the scale numbers, with bold and italic options.
• Position — Which side of the control the scale appears on.
• Size — The size of the scale text.

The icons at the top right of the section switch the scale between numbers and dots and toggle the tick marks on or off.

Unity

The Unity section adds a marker at the unity (0 dB) point on controls such as the Fader and Knob. Select the checkbox to show it.

• Text Color — The color of the unity text.
• Fill Color — The fill color of the unity marker.
• Border Color — The border color of the unity marker.
• Unity Tick Color — The color of the unity tick mark.
• Text — Show the unity value as a number, or choose the text option and type your own short text for the marker.
• Position — Which side of the control the marker appears on.

The icon at the top right of the section toggles the unity tick mark on or off.

Up Down Buttons

The Up Down Buttons section adds increment and decrement buttons to controls such as the Fader and Knob. Select the checkbox to show them.

• Icon Color — The color of the arrow icons.
• Button Color — The color of the buttons.
• Style — The visual style of the arrows.
• Shape — The button shape (circle or square).
• Size — How large the buttons are.

The icon at the top right of the section turns a border around the buttons on or off.

Label

The Label section adds a text label to the control, on controls such as the Fader, Knob, Button, and Readout. Select the checkbox to show the label.

• Text — Choose the label source from the dropdown (for example, Custom), then type the text in the field.
• Position — Where the label appears relative to the control: top, bottom, left, or right. A Knob adds a fifth position that places the label inside the knob. A Fader adds a fifth, center position that takes effect when the fader is hidden; see Fader.
• Thickness and Size — The thickness and size of the label.
• Text Color and Background Color — The label colors.
• Border — The label border color and thickness.
• Font and Size — The label font and font size, with bold and italic options.
• Alignment — The horizontal and vertical alignment of the text.
• Rotation — The rotation of the label text.

If you select Readouts and Buttons together, the Label section stays available, and changes apply to all of the selected controls.

Readout

The Readout section shows the control's current value. Select the checkbox to show the readout.

• Position — Where the readout appears relative to the control: top, bottom, left, or right. A Knob adds a fifth position that places the readout inside the knob. A Fader adds a fifth, center position that takes effect when the fader is hidden; see Fader.
• Thickness and Size — The thickness and size of the readout.
• Text Color and Background Color — The readout colors.
• Border — The readout border color and thickness.
• Font and Size — The readout font and font size, with bold and italic options.
• Alignment — The horizontal and vertical alignment of the text.
• Rotation — The rotation of the readout text.

Text and Icon

The Text and Icon section, on the Button and the Label, sets the text and the icon shown on the control. A control can show text, an icon, or both at once.

Text properties:

• Text — Choose the text source from the dropdown (for example, Custom), then type the text in the field.
• Text Color — The color of the text.
• Font and Size — The font and font size, with bold and italic options.
• Alignment — The horizontal and vertical alignment of the text and icon.
• Rotation — The rotation of the text and icon.

Icon properties:

• Icon — Choose the icon from the dropdown. Choose None, at the top of the list, to remove the icon.
• Size — How large the icon is.
• Icon Color — The color of the icon. Until you choose one, the icon uses the text color.
• Icon Position — Where the icon appears relative to the text.

The Size, Icon Color, and Icon Position properties appear after you choose an icon.

The text and icon move together when you change the alignment or rotation.

Text

The Text section styles the text shown on text-based controls such as the Readout, Droplist, and Radio Button.

• Text — Where available, choose the text source from the dropdown (for example, Custom), then type the text in the field. The Readout shows its mapped value, so it has no text source.
• Text Color — The color of the text.
• Font and Size — The font and font size, with bold and italic options.
• Alignment — The alignment of the text. The Readout offers horizontal and vertical alignment; the Droplist and Radio Button offer horizontal alignment only.
• Rotation — The rotation of the text, on the Readout. The Droplist and Radio Button do not have a Rotation.