Customizing your Theme Design with the Style Panel

Contents

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

Global
Layout
All Rich Text
All Form
Container
All Share
All Links
All 2 Column
All Image
Widget-Specific Settings

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 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. NOTE: Enabling the Style Panel will automatically remove your existing theme. 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.

Screen_Shot_2017-10-05_at_2.47.59_PM.png

Using the Style Panel

When the Campaign Builder is set to Preview Mode, only the first Global tab is visible. To further edit each section of your campaign, turn Preview Mode off. Selecting the widgets on your campaign will open up customization menus for that specific widget. The features of each of these are outlined below.
Once you’ve edited settings in the Style Panel, select Save at the bottom of the Panel so your changes go into effect.
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 not a way to undo reverting to default.

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 menu at the bottom-right of the Style Panel.

Screen_Shot_2017-10-06_at_12.31.12_PM.png

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 Global settings. Selecting "inherit" will revert that element to the default theme style.
Margins vs. Padding: Margin is outer space of an element, while Padding is inner space of an element. Margin is the space outside the border of an element, while Padding is the space that is inside the border of it.

Style Panel Layout

Global

Outlined below are the sections in the Global tab of the Style Panel.

Screen_Shot_2017-10-10_at_11.00.22_AM.png

Colors

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

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

Text

The Text tab 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 13 pts.
Alignment: Choose from Inherit (default), Left, Center, Right, or Justified alignment for all text on the campaign. NOTE: This setting also impacts the placement of Submit buttons.
Font Family: Select a font to impact all text on a campaign. These fonts are supported on all browsers.
Font Weight: Select the abc icon on the right to make text bold; select the left button to remove bolding.
Line Height: Adjust the vertical spacing between lines of text.

Buttons

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

Background Color: Change the background color of a button.
Padding: Adjust the space around the text on a button. Click the link icon next to Padding to adjust all four sides.
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.

Screen_Shot_2017-10-10_at_11.27.25_AM.png

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 tab 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.
Padding: Adjust the space within all Widgets. Select the link icon next to Padding to adjust all four sides.
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 a border more or less thick.
Box Shadow: Add a shadow behind each Widget.

Popups

The Popups tab includes settings to adjust the design of all popup windows.

Background: Change the background of the popup.
Top Margin: Adjust the spacing at the top of the popup.
Bottom Margin: Adjust the spacing at the bottom of the popup.
Padding: Adjust the spacing within the popup.
Box Shadow: Add a shadow to the popup box.
Border Style: Add a solid, dotted, or dashed line border to the popup.
Border Color: Change the color of the popup border.
Border Radius: Adjust the roundness of the popup box corners.
Border Size: Adjust the pixel value to make the border more or less bold.

Screen_Shot_2017-10-10_at_11.30.44_AM.png

Title Background: Change the color of the background that appears behind the title text of the popup.
Title Height: Adjust the height of the popup title.
Title Text Color: Change the color of the text on the popup.
Title Font Size: Change the size of the title font. Use a pixel value.
Title Font Family: Change the font family of the title text.
Title Font Weight: Select the abc icon on the right to make text bold; select the left button to remove bolding.
Title Text Case: Change title text to all uppercase, all lowercase, or inherit.
Close Icon: This setting provides two close icon designs. Select the style you want your popup to display.
Close Icon Color: Change the color of the close icon.
Close Icon Size: Adjust the size of the close icon.
Modal Background: Add an overlay to the Campaign behind the popup to make the popup stand out. Select a color for the overlay.
Modal Opacity: Adjust the transparency of the modal background.
Responsive Trigger Width: Trigger a full-screen popup on a mobile device. The default value is set to 480px.

Layout

Settings in this panel affect all Instagram, Product, RSS, Twitter, Video, and Voting Widgets.

Items

Background: Add a background to the Widget.
Padding: Adjust the spacing around the Widget.
Margin: Adjust the spacing within the Widget.
Border Style: Add a dotted, dashed, or solid border around the Widget.
Border Color: Change the color of the Widget border.
Border Radius: Add a rounded corner to the Widget.
Border Size: Change the thickness of the Widget border.
Box Shadow: Add a shadow that appears behind and below the Widget.
Space Between Elements: Adjust the vertical space between image, user information, title, description, and more.

Social Buttons

Font Size: Change the size of the text on social buttons.
Color: Change the color of the social buttons.
Hover Color: Change the color of social buttons that appears on hover.
Padding: Adjust the amount of space around the social buttons.
Share Icon: Change the icon that represents sharing.
Comment Icon: Change the icon that represents commenting.

User Info

Profile Picture Width: Change the width of a profile picture that appears when a Twitter or Instagram Widget is in use.
Space Between Profile Picture/Name: Adjust the space between a user's profile picture and the user's name.
Text Color: Change the text color for user information.
Font Family: Change the font for user information text.
Font Weight: Change the boldness for user information text.
Font Size: Adjust the sizing of user information text.
Font Style: Make the user information text normal or italicized.
Text Case: Change user information text to all uppercase, all lowercase, or inherit.

Title

Text Color: Change the color of title text.
Font Family: Change the font of title text.
Font Weight: Change the boldness of title text.
Font Size: Change the size of title text.
Font Style: Make the title text normal or italicized.
Text Case: Change title text to all uppercase, all lowercase, or inherit.

Description (Read More)

If you enabled the Collapse Long Text option (see the Layout section when editing the Widget), this section lets you style the element for toggling the full text view.

Width: Change the width of the description text.
Background Color: Change the background color that appears behind the description text.
Alignment: Change the alignment of description text to left, center, or right.
Padding: Adjust the amount of space around the description text.
Border Style: Add a dotted, dashed, or solid border around the description text.
Border Color: Change the color of the border around the description text.
Border Radius: Add rounded corners to the border around the description text.
Border Size: Change the boldness of the border around the description text.
Icon Color: Change the color of the icon.
Down Icon: Select an icon to represent moving down.
Up Icon: Select an icon to represent moving up.

Timestamps

Timestamps appear in RSS and Twitter Widgets.

Text Color: Change the color of timestamp text.
Font Size: Change the size of the timestamp text.
Font Style: Make the timestamp text normal or italicized.

Media Icons

Background Size: Change the background size of the media icon.
Background Color: Change the background color of the media icon.
Opacity: Change the transparency of media icons.
Background Border Radius: Make rounded corners of the media icon.
Icon Size: Increase or decrease the media icon size.
Icon Color: Change the color of the media icon itself.
Zoom Icon: Select an icon to represent zooming.
Play Icon: Select an icon to represent playing.

The following settings only apply to the Voting Widget when an entry has an image an a video, or multiple videos.

Next/Prev Opacity: Change the opacity of the Next/Prev icons.
Next/Prev Icon Offset: Use negative values to push buttons outward and positive values to push buttons toward center.
Previous Media Icon: Select the icon design for the "Prev" action, which proceeds to the previous video.
Next Media Icon: Select the icon design for the "Next" action, which proceeds to the next video.

Wide Layout

Media Column Width: Adjust the size of individual columns.
Space Between Columns: Adjust the amount of space between two or more columns.

Mobile (Responsive)

Responsive Trigger Width: Set the width that will trigger the Campaign to resize for mobile view.

_____________________________________

All Rich Text

Paragraph, Headlines (H1), Subheads (H2), Titles (H3), and Titles (H4) each have the following options.

Text Color: Change the color of text within a Rich Text Widget.
Text Alignment: Change the alignment of text to left, center, or right.
Font Family: Change the font of the test within the Rich Text Widget.
Font Weight: Make the text more or less bold.
Font Size: Adjust the size of the text.
Text Underline: Add an underline, overline, or line-through to the text.
Text Case: Use this setting to change text to all uppercase, all lowercase, or inherit

Divider Lines (HR)

Thickness: Make a divider line between sections of text more or less bold.
Color: Change the color of the divider line.

Lists (UL, OL)

List Padding: Adjust the space around a numbered or bulleted list in a Rich Text Widget.
List Margin: Adjust the space around a numbered or bulleted list in a Rich Text Widget.
List Item Padding: Adjust the space between items in a list.
List Item Margin: Adjust the space between items in a list.

Blockquote

Text Color: Change the color of a blockquote.
Text Alignment: Change the alignment of a blockquote to left, center, or right.
Font Family: Change the font of the blockquote text.
Font Weight: Make a blockquote more or less bold.
Font Size: Adjust the size of the blockquote text.
Font Style: Make the blockquote text normal, italicized, or inherit.
Margin: Adjust the amount of space around a blockquote.

_____________________________________

All Form

This menu affects all Forms on a Campaign.

Spacing

Field Margin: Adjust the spacing within a form field.
New Group Space: Adjust the spacing between groups of fields.

Labels

Margin: Adjust the spacing around a field label.
Text Color: Change the color of a field label.
Text Alignment: Change the alignment of a field label to left, center, or right.
Font Family: Change the font of the field label text.
Font Weight: Make the field label text more or less bold.
Font Size: Adjust the size of the field label text.
Text Case: Change field label text to all uppercase, all lowercase, or inherit.

Input Boxes

Box Height: Change the height of a form field.
Background Color: Change the background color of a form field.
Placeholder Text: Change the color of placeholder text.
Border Style: Add a dotted, dashed, or solid border to fields.
Border Color: Change the border color.
Border Radius: Add rounded corners to form fields.
Border Size: Make the border more or less thick.
Text Color: Change the color of the text that a participant types into the field.
Text Alignment: Change the input text alignment to left, center, or right.
Font Family: Change the font family of input text.
Font Weight: Change the boldness of input text.
Font Size: Change the size of input text.
Text Case: Change field text to all uppercase, all lowercase, or inherit.

Input Boxes Focus (Selected)

These settings only show on a field when it has been clicked on by the participant.

Background Color: Change the background color of the selected field on a form.
Border Style: Add a dotted, dashed, or solid border to the selected field.
Border Color: Change the border color.
Border Size: Make the border more or less thick.

Radio & Checkboxes

Use fancy checkboxes: This setting changes the appearance of checkboxes on different browsers.
Text Color: Add a text color to items in a radio or checklist.
Text Alignment: Change the alignment of items in a list to left, center, or right.
Font Family: Change the font of items in a list.
Font Weight: Change the boldness of list text.
Font Size: Change the text size of items in a list.
Text Underline: Add an underline, overline, or line-through to the list text.
Text Case: Change list items to all uppercase, all lowercase, or inherit.

Errors

Border Color: Change the color of the border that appears around an error message.
Background Color: Change the background color behind the error message.
Error Text Color: Change the color of the error text.
Error Text Alignment: Change the error text alignment to left, center, or right.
Error Font Family: Change the font of the error message text.
Error Font Weight: Change the boldness of error message text.
Error Font Size: Adjust the size of the error message text.
Error Text Case: Change error message text to all uppercase, all lowercase, or inherit.

Help Text

These settings affect instructional text in a Widget.

Text Color: Change the color of help text.
Text Alignment: Change the alignment of help text to left, center, or right.
Font Family: Change the font of help text.
Font Weight: Change the boldness of help text.
Font Size: Adjust the size of help text.
Text Underline: Add an underline, overline, or line-through to the text.
Text Case: Change help text to all uppercase, all lowercase, or inherit.

Required Fields

NOTE: Asterisks for required fields are hidden by default (expand Asterisks section below to change). We recommend adding (optional) to the labels of fields that are not required.

Text Color: Change the text color of the Required message.
Font Weight: Adjust the boldness of Required message text.
Font Size: Adjust the size of Required message text.

Submit Button

Button Color: Change the color of the Submit button on a form.
Button Alignment: Make the Submit button left, center, or right aligned.
Margin: Adjust the amount of space round the Submit button.
Button Width: Adjust the width of the Submit button.
Button Padding: Adjust the amount of space within the Submit button.
Text Size: Increase or decrease the size of the Submit button text.
Text Color: Change the color of the Submit button text.
Text Case: Change Submit button text to all uppercase, all lowercase, or inherit.

Submit Messages

These settings change the appearance of the message that appears when a participant has submitted information through a form.

Text Alignment: Change the alignment of the Submit message to left, center, or right.
Font Family: Change the font of the Submit message.
Font Weight: Change the boldness of the Submit message.
Font Size: Change the size of the Submit message text.
Text Underline: Add an underline, overline, or line-through to the Submit message,
Text Case: Change Submit button text to all uppercase, all lowercase, or inherit.
Sending Color: Change the color of the pending Submit message.
Error Color: Change the color of the Submit message if the submission fails.
Success Color: Change the color of the Submit message if the submission is successful.

_____________________________________

Container

This menu affects any Container Widget.

Container

Maximum Width: Set the maximum width for a Container Widget. Set to 1024 px for full width.

_____________________________________

All Share

This menu affects all Share Widgets on a Campaign.

General

Alignment: Change the alignment of the Share Widget to left, center, or right.

Prompt

Text Color: Change the text color of the prompt.
Font Family: Change the font of the prompt text.
Font Weight: Make the font more or less bold.
Font Size: Adjust the size of the prompt text.
Margin: Adjust the spacing within the Share Widget.

Buttons

Margin: Adjust the space within the button.
Icon Size: Change the size of the share icons.
Color: Change the color of the share icon.
Hover Color: Change the color of the share icon upon hover.

Platform

Manual Share Color: Change the color of the manual share icon.
Facebook Share Color: Change the color of the Facebook share icon.
Google Share Color: Change the color of the Google share icon.
LinkedIn Share Color: Change the color of the LinkedIn share icon.
Pinterest Share Color: Change the color of the Pinterest share color.
Twitter Share Color: Change the color of the Twitter share color.

_____________________________________

All Links

This menu affects all Links Widgets.

Background Color: Add a background color to a Links Widget button.
Hover Background: Add a background color to a Links Widget button that appears upon hover.
Text Color: Change the text color on a Links Widget button.
Text Hover Color: Change the text color on a Links Widget button that appears upon hover.
Border Color: Add a color to the border around a Links Widget button.
Border Size: Change the thickness of the border around a Links Widget button.
Padding: Adjust the spacing around a Links Widget button.
Font Size: Make the font larger or smaller on a Links Widget button.

_____________________________________

All 2 Column

This setting affects all Two-Column Widgets on a Campaign.

Responsive Trigger Width: Set the width that will trigger the Two-Column Widget to resize for mobile view.

_____________________________________

All Image

This menu affects all Image Widgets.

Padding: Adjust the space around the Widget.
Alignment: Adjust the spacing around the image within the Widget.

_____________________________________

The following menus in the Style Panel are Widget-specific:

This Rich Text
This Form
This Container
This Share
This Links
This Video
This Image
This 2 Column
This Twitter

These menus each contain the following settings:

Widget Background Color: Change the background color of the Widget.
Widget Background Image: Set a background image.
Widget Background Repeat: Choose if and how the background image repeats.
Widget Padding: Adjust the space around Widget. Click the link icon next to Padding to adjust all four sides.
Widget Margin: Adjust the space within a Widget. Click the link icon next to Margin to adjust all four sides.
Widget Border Style: Add a dashed, dotted or solid border to the Widget.
Widget Border Color: Change the color of the Widget border.
Widget Border Radius: Add roundness to the corners of the Widget.
Widget Border Size: Adjust the thickness of the Widget border.
Default Text Color: Set the default color for Widget text.
Default Text Alignment: Set the default alignment of Widget text.
Default Font Size: Set a default size of the Widget text.
Minimum Content Width: Set the minimum width size of the Widgets.

Articles in this section

Overview

Accessing the Style Panel

Using the Style Panel

Creating Themes

Glossary of Design Terms