Settings: Look & Feel

The Look and Feel section of your Engage Settings gives you the opportunity to edit default branding images and colors that were set up during your first login to Salsa Engage. Consult your organization's brand guide for your official font family and colors. These should match your website as much possible.

To access the Look and Feel menu...

1. Click the Settings button in the top right of any screen. 
2. Click the teal-colored Switch To... button.
3. Click the Look & Feel menu item.

Upload Your Logo

During your initial setup, you have the option to upload an image that will be utilized on the forms you create within your account. Upload a high resolution logo so it can easily be scaled down to any size you need. Check out this quick tutorial on image size and resolution.

To add or change your logo on the Look & Feel screen...

1. Click the Upload Your Logo button.
2. Select the file on your hard drive or network to upload.
3. Click Save design defaults in the lower right.

Upload Your Favicon

You may have noticed that when you open a new window in your browser, many web sites have a small image alongside the page title on the browser tab.

This small image is called a favicon and can help to make your Engage pages even more distinct. Browsers that provide favicon support typically display a page's favicon in the browser's address bar or next to the page's title on the tab. For best results, your image should be no larger than 32x32 pixels and in ICO format.

To add or change your favicon...

1. Click the Upload Your Favicon button.
2. Select the file on your hard drive or network to upload.
3. Click Save design defaults in the lower right.

If you don't have a favicon, you can use a page like http://www.favicon-generator.org or https://www.websiteplanet.com/webtools/favicon-generator/ to generate your own favicon.

Note: If you want to add a favicon to a page that has already been published, you’ll need to add your favicon to Engage, then make your page private, then re-publish your page.

Pick Colors and Fonts

Consult your organization's style guide for your official font family and colors. These official fonts and colors should match your Engage forms as much possible.

1. Select and change the following color values by clicking the grey box with the color sample you wish to change:
   • Font Color
   • Button Color
   • Link Color
2. To select color options, you may select a particular color from the grid to the left or from the interactive items on the right. The bottom row of the grid contains the most recently selected colors. Alternatively, you may enter the RGB value directly at the bottom right. Use the transparency slider just above the manual RGB value to change the opacity of that color.
3. Click Choose to finish selecting that color.
   
4. Click Save design defaults in the lower right.

Select and change font values by clicking on the font field. That field expands to show the entire list of available activity fonts or email fonts. Click Save design defaults in the lower right to save your changes.

Advanced Options

Set additional default design options for forms and emails created in your organization's Salsa account. You can always override these global settings within a specific form, email, or piece of content.

Set the default design options for the following elements.

General

These color design options control very distinct elements. There are no previews on this screen.

• Content area background color
• Divider color

Text

This setting defines the default font and color options for all Text elements. Previews are located on the right side of this screen.

• Font
• Default Email Font
• Font size
• Link color

Buttons

This setting defines the default color and design options for all Button elements. Previews are located on the right side of this screen.

• Background color
• Text color
• Border
• Corner style
• Button size
• Button style

Callouts

This setting defines the default color and design options for all Callout elements. This element functions much like the Text element, however, it is designed to call attention to itself using color and border. A preview is located on the right side of this screen.

• Background color
• Text color
• Border
• Corner style
• Padding

Forms

This setting defines the default color and design options for all Form elements. Form elements allow supporters to enter information. This section sets default design elements for form fields. A preview is located on the right side of this screen.

• Field border
• Field corner style
• Field padding