Customizing Your Campaign with the Style Panel

These features available on All Plans

Overview

The Style Panel is a customization tool within the Campaign Builder. It can be used to make design adjustments to the overall campaign theme.

Note: Before jumping into making changes with the Style Panel, you may be looking for recommended dimensions for the different images or widgets in your campaign. Lucky you, we have a guide that has all that information! Head on over to the Image Size Guide to see our suggestions.

Accessing the Style Panel

If you open an existing campaign using an older theme, you’ll be prompted to switch to using the Style Panel. You will have the option to select a new theme from the panel.

If you start with a new template or a new campaign from scratch, the Style Panel will be open by default.

The Style Panel can be opened and closed by selecting the Style Panel icon in the toolbar on the left.

Using the Style Panel

The default view for the panel will show settings for the current theme, under the Theme tab. You can navigate into the different sections of these settings by clicking the blue dropdown. The General section contains overall settings for the entire campaign, and the specific Widget sections make changes to all of that specific widget type in the campaign. From there, just click open the appropriate section where you want to make your changes:

To make changes that will only affect a specific widget, first, click on the widget you'd like to change in the Edit Widgets Panel - in this example, we've selected a Rich Text Widget:

You will see a new tab appear in the Style Panel: This [Widget Type]. Click the tab, then click to open any of the sections, and any changes made there will affect only the currently selected widget.

Once you’ve edited settings in the Style Panel, you can undo/redo those changes using the undo and redo icons at the bottom of the panel. Once you're finished editing, click Save - also at the bottom of the panel - to lock in your edits. Do note that changes made in the panel will need to be saved before you can publish your campaign.

If you are unsatisfied with the changes you’ve made, click on Clear # settings for this widget.

Note: This will undo all of the changes you’ve made for the specific widget. If you want to clear ALL Style Panel settings, click on Revert to Default.

When making changes in the Style Panel, keep in mind that changes made on the General level can be overridden by changes made on a This Widget level, and all of those can be overridden by changes made by custom code in the CSS Editor.

For information on how to update Style Panel settings for specific widgets, check out our Widget Reference section.

Creating Themes

If you want to save the design elements of a campaign as a theme, you can save it as a theme by selecting Add to My Themes from the three dots menu at the bottom-right of the Style Panel:

Changes made to a theme are unique to individual campaigns. If you apply a theme to a campaign and make changes to it using the Style Panel, you can save it as a new theme. If you want these changes to override the same theme applied to other campaigns, you can override it by saving it with the exact same name used for the theme.

Glossary of Design Terms

Here are some common terms you will see in the Style Panel:

Inherit: Any setting with an inherit option refers to the default theme style as determined in the General settings. Selecting inherit will revert that element to the default theme style.
Margins vs. Padding: Margin is outer space of a widget, while Padding is inner space of an widget. Margin is the space outside the border of an widget, while Padding is the space that is inside the border of it. For further help, this diagram lays things out nicely:

Style Panel Layout

General

Outlined below are the sections in the General section of the Theme tab of the Style Panel.

Colors

The Colors section is where you can set up a color palette for your campaign.

Color Swatches: Here is where you can add your own colors as swatches; these will then show up in the rest of the Style Panel color selectors so that you can keep the colors consistent throughout the styling of your campaign.

Text

The Text section includes settings to change the appearance of all text on a campaign.

Text Color: Change the color of all text on the campaign.
Font Size: Change the size of the text for the whole campaign. The default setting is 16 pts.
Alignment: Choose from Inherit (default), Left, Center, Right, or Justified alignment for all text on the campaign.
Font Family: Select a font to impact all text on a campaign. These fonts are supported on all browsers.
Font Weight: Select an abc icon on the right to make text different levels of bold; select the left button to remove bolding.
Line Height: Adjust the vertical spacing between lines of text.

Buttons

The Buttons section changes the design of all buttons on a campaign, including those on the Voting Widget.

Background Color: Change the background color of buttons.
Padding: Adjust the space around the text on a button. Click the link icon next to Padding to adjust all four sides individually.
Box Shadow: Add a shadow behind a button.
Border Style: Add a solid, dotted, or dashed border to a button.
Border Color: Set a color for the button border.
Border Radius: Add roundness to the corners of a button with a pixel value.
Border Size: Set a thickness for the button border.
Text Color: Change the color of text within a button.
Font Size: Change the size of the text within a button.
Font Family: Change the font used for the button text.
Font Weight: Make the text more or less bold.
Text Case: Change text to all uppercase, all lowercase, or inherit.
Hover Background Color: Set a background color for the button that will appear upon hover.
Hover Text Color: Set a text color that will appear upon hover.
Hover Border Color: Set a border color that will appear upon hover.
Hover Box Shadow: Add a background shadow to a button that appears upon hover.

The Widget Defaults section contains settings that impact the appearance of all widgets on a campaign.

Background: Change the background color of all widgets.
Margin: Adjust the space around all widgets. Select the link icon next to Margin to adjust all four sides individually.
Padding: Adjust the space within all widgets. Select the link icon next to Padding to adjust all four sides individually.
Border Style: Add a border to all widgets. Options include solid, dotted, and dashed lines.
Border Color: Select a color for the border around widgets.
Border Radius: Adjust this value to add or remove rounded corners on widgets.
Border Size: Use a pixel value to make borders more or less thick.
Box Shadow: Add a shadow behind each widget.

Popups

The Popups section includes settings to adjust the design of all pop-up windows.

Color: Changes the color of the background behind the pop-up.
Opacity: Changes the opacity (the level of transparency) of the background behind the pop-up.
Close Icon Color: Changes the color of the icon that closes the pop-up.
Content Background: Changes the color of the background inside the pop-up.
Padding: Adjusts the space between the pop-up's content and the border of the pop-up. Select the link icon next to Padding to adjust all four sides individually.
Text Color: Change the color of the message text in the pop-up.
Font Size: Adjust the font size to make the message text bigger or smaller.
Font Family: Change the font family of the message text.
Font Weight: Select an abc icon on the right to make text bolder; select the left button to remove bolding.

Popups with Forms

The Popups with Forms section includes specific design settings for pop-up windows that contain forms.

Label Text Color: Change the color of the field labels on the form.
Label Font Size: Adjust the font size of the field labels on the form.
Error Text Color: Change the color of any error text that would appear on the form.
Error Font Size: Adjust the font size of any error text on the form.
Help Text Color: Change the color of any help text that appears on the form.
Help Font Size: Adjust the font size of any help text on the form.
Border Color: Change the color of the border for the form fields.
Background Color: Change the color of the background for the form fields.
Text Color: Change the color of the input text for the form fields.
Font Size: Adjust the font size of text input into the form fields.
Selected Background Color: Change the color of the background for the form fields when they are actively selected.
Selected Border Color: Change the color of the border of the form fields when they are actively selected.
Background Color: Change the color of the background for buttons (other than the Submit button) appearing in the form.
Border Color: Change the border color for buttons (other than the Submit button) appearing in the form.
Text Color: Change the color of text displayed on buttons (other than the Submit button) appearing in the form.
Font Size: Adjust the font size of text displayed on buttons (other than the Submit button) appearing in the form.
Hover Background Color: Change the color of the background for form buttons (other than the Submit button) when the cursor is hovering over them.
Hover Text Color: Change the color of the text for form buttons (other than the Submit button) when the cursor is hovering over them.
Hover Border Color: Change the color of the border for form buttons (other than the Submit button) when the cursor is hovering over them.

Related Resources

How to Use the Style Panel (Video)

Campaign Builder Appearance (Help Doc)