In This Article:

    Customize Form and Email Display

    In This Article:

      Custom CSS

      Cascading Style Sheets (CSS) is a style sheet language that web developers use to define HTML styles (e.g., fonts, colors, spacing) for web forms and, to a lesser extent, emails. This article covers how you can add CSS to customize the look of your Engage forms (that are not embedded in existing websites) and email blasts. CSS can affect the look-and-feel of your activities beyond what you can normally do in the Visual Editor.

      Tips for Pros

      Only users with advanced CSS skills should use this feature. For more information on CSS and guided tutorials, please click here. Salsa Support team members cannot provide support for building custom CSS. We do not provide code samples at this time.

      If you wish, you can write your own CSS for your Engage forms and your emails. The styles you define will be included in the final output. These styles will not be applied in Edit mode. This keeps them from bleeding over into the Engage CSS. However, you will see them in the Preview and Published versions.

      Engage forms that are embedded within existing web sites using our embed widget use the CSS of the web site in which they are embedded. Sometimes those web site CSS styles overwrite our styles and will overwrite any standard or custom CSS defined in your form. Make changes to the web site CSS to control your Engage form. Web developers should have access to your web site CSS.

      Any custom CSS you write takes priority over Engage's default CSS, and you may run into cases where your code conflicts with Engage's default CSS. If your custom CSS is being overridden by the default Engage CSS, you will need to add the important rule to your custom CSS. For example...

      .class_name {
      background: #3a5c92 !important;
      }

      The "important" syntax shown above will enable your custom CSS code to override the default Engage CSS code.

      Keep in mind that different browsers, devices, and email clients can vary widely in their support for certain CSS declarations, and they may not even support CSS functionality. For that reason, some CSS functionality is restricted to only Engage Activity forms and will not work on email blasts.

      Add Custom CSS to Form or Email

      If you would like to change the styles of your form or email elements, add custom CSS to your form or your email:

      1. Click the Design tab on the form Compose or Create The Email screen.
      2. On that screen, click the Custom CSS tab.
        Activity_Design_Custom_CSS_tab.png

      In the image above, the style tag is implied and does not need to be added manually.

      @import is supported in our form Custom CSS. The @import rule allows you to import a style sheet into another style sheet. The @import rule must be at the top of the document (but after any @charset declaration). NOTE: this is supported for form CSS only.

      Custom CSS Per Element

      Add classes to individual elements on Engage forms only. Each element container has a unique ID, and Engage displays that ID in the Container Settings screen. If you wish to target styles to specific elements, we recommend using the "Inspect" function of your browser (Chrome or Firefox) to inspect the elements of your preview or published form, to get the class names, then add them into your CSS. To add classes to an element...

      1. Click the element's Container Settings "gear" button.
        Form_Element_Container_Settings.png

      2. On the Container Settings screen, click the Advanced CSS tab at the top.
        NOTE: This tab is available only for form elements and not email elements.
        Container_Settings.png

      3. List any custom classes you want to apply to the element's container. You can define style declarations for these classes in the Custom CSS tab of your overall Design settings (as described above).
      4. The element's id is displayed to the right, to be used on the CSS screen of the main form, to define a class for only this element.
        Container_Settings_Advanced_CSS.png

      Mobile Display Options

      All Salsa Engage forms are responsive by default. However, you may want to make further adjustments to any element based on the size of the display you expect your supporters will be using to view your forms or emails.
      Container_Settings_Mobile_Tab.png

      To adjust the element's mobile settings...

      1. Click the element's Container Settings "gear" button.
      2. On the Container Settings screen, click the Mobile tab at the top.
      3. Control if the element displays with the following Display Options
        • Show this element on both small and large screens.
        • Hide this element on small screens; show it only for large screens.
        • Hide this element on large screens; show it only for small.
      4. Control the element alignment (Engage forms only) with the following Alignment Options
        • Check the box whether, on small screens, the width of the container should always be 100%.
        • Container position on smaller displays: Left, Center or Right.
        • Alignment of content within the element on smaller displays: Left, Center or Right.

       

      Was this article helpful?
      0 out of 0 found this helpful
      Have more questions? Submit a request

      Comments

      0 comments

      Article is closed for comments.