Customizing Your Campaign with the Style Panel

These features available on All Plans

Contents

Overview
Accessing the Style Panel
​Using the Style Panel
Creating Themes
Glossary of Design Terms 
​Style Panel Layout

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.

Note: Enabling the Style Panel will automatically remove your existing theme.



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, select Revert to default at the top of the Style Panel.



Note: This will undo all of the changes you’ve made in the Style Panel, and there is no way to undo reverting 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.
  
  

Page

The Page section includes settings to change the background color and padding of widgets on the campaign.

• Background Color: Change the color of the background of your entire campaign, behind the widgets.
  
  
• Background Image: Upload an image to use as a background image. Images that are at least 1800 pixels wide are recommended.
  
  
• Background Repeat: Change the repetition of the background image. Options are: No Repeat, Repeat Horizontally, Repeat Vertically, or Tile. 
  
  
• Background Size: Change the size of the background.
  
  
• Background Position: Change the alignment of the background image.
  
  
• Padding: Adjust the space around each widget by changing the padding. By default, the padding is set to .1px, and affects all sides of the campaign automatically. To adjust each side individually, click the link icon next to Padding to split the one field into four.​
  
  
• Maximum Content Width: Maximum width determines how wide of a space the content will occupy in 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.
  
  

Links

The Links section includes settings to change the design of hyperlinks.

• Text Color: Change the color of link text with this setting.
  
  
• Font Size: Change the size of link text with this setting.
  
  
• Font Family: Change the font of your link text.
  
  
• Font Weight: Make your link text more or less bold by selecting an abc icon.
  
  
• Text Underline: Add an underline, overline, or strikethrough to link text.
  
  
• Text Case: Use this setting to change link text to all uppercase, all lowercase, or inherit.
  
  
• Hover Text Color: Set the text color that will be displayed when a user hovers over the link.
  
  
• Hover Font Weight: Make the link text more or less bold by selecting an abc icon; this will appear upon hover.
  
  
• Hover Text Underline: Add an underline, overline, or strikethrough to link text that will appear upon hover. 
  
  

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.
  
  

Widget Defaults

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.