Use Look and Feel

NOTE: CSS editing features are available for those on Campaign Builder, Organization and Network tiers.

Every campaign tool that you create can be styled using the Look and Feel screen under the tool Edit tab:

Any styling you do here will override the global CSS settings you configure on your organization's Templates page. This means, for example, that the styling of a Letters to the Editors Tool can be different from the styling of a Tweet @ Tool, and that two different Emailing Tools can have completely different looks.

To customize the look and feel of an individual tool:

Step 1: Select tool Colors. When you click on the color setting for each visual aspect of your tool, you’ll see a color picker to pull from, or you can enter the hex color codes associated with your campaign branding:

Step 2: Select or import a custom Font. Define the Font Family you want to use, or if you have a font associated with your campaign branding, enter the URL:

The format that is accepted in the Font Family field is: 'Font Family Name', sans-serif (or serif!). You do not need to add a Font URL if you've added a Font Family already.

If you want to use an external font, you can browse free Google web fonts here.

Step 3: Scroll down to the Tool CCS box and paste these lines of code:

body, p, li, em, i, h1, b, h2, h3, h4, h5, h6, strong, body.page-nm-letter, div.l-main, div.node--letter--embed, .form-item .item-label label, .form-item-submitted-newspapers-checkboxes, a.nm-branding-link, .webform-component-addressfield .form-item[class*="autocompletion-block"] + div[class*="toogle"] a, .webform-component a, .form-item input, .form-item .item-label label.compact-form-label, textarea, .field-name-title .field-items h2, input.webform-submit, input.webform-next, .webform-tweet-container a.webform-tweet-button, .webform-client-form .form-actions input.webform-previous {
font-family: '_______', sans-serif!important;
}

Step 4: On the second to last line of code above, enter the name of the Font Family you entered on step 2, then save the changes!

The styling choices you make here will only apply to individual tools. You can customize the Global CSS of your tool templates under your organization's Templates tab.