Use Look and Feel

Customize your actions by choosing colors and fonts, or using custom CSS.

This feature is available on the Campaign Builder, Organization, and Network plans.

 

Every campaign action that you create can be styled using the Look and Feel screen under the action's 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 Action can be different from the styling of a Tweet Action, and that two different Emailing Actions can have completely different looks.

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:

Fonts

Select a Font Family or import a custom Font.

  • Font Family: define the Font Family you want to use, in this format: 'Font Family Name', sans-serif (or serif!), or
  • Font URL (External Service): if you have a font associated with your campaign branding, enter the URL. You can also browse free Google web fonts here, and enter links to each font in this format:
https://fonts.googleapis.com/css2?family=Shadows+Into+Light&display=swap

Stylesheets

If you chose a Font Family above, paste the code below into the Tool CSS field to ensure that it's applied to all parts of your action (replace the blank on that second-to-last line with the name of the Font Family!):

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;
}

You can also use this field to add any other CSS to your action, just make sure you don't include any HTML or the code will be invalid. (This is the code validator we use in the backend).

 

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

 


Last updated: February 11, 2021