Legacy Webforms: Customize The Default CSS

About this task

Important: Only use this documentation if you know you still use Legacy webforms. The majority of Bronto application users do not.

To customize the default CSS on a webform:

Procedure

  1. Go to the Edit Webform page by editing an existing webform or by creating a new webform.
  2. Click the CSS Layout button to edit the existing CSS, or add your own CSS.
    The Style Properties and CSS pop-up window will appear.
  3. You can now change any of the default CSS properties, link to an external CSS file, or paste in your own CSS. Each of the default CSS parameters are described below:
    • Webform Name: You can use the Webform Name text box to change the name of the webform.
    • Background Image URL: In the Background Image URL text box, you can add a URL that points to the image you want to use as the background for your webform.
    • Image Repeat: The Image Repeat pull-down lets you choose if and how the background image will repeat.
    • Image Position: The Image Position pull-down lets you choose the position of the background image.
    • Background Color: The Background Color text box lets you pick the color of the background used in your webform.
    • Font Family: The Font Family pull-down lets you pick the font that will be used on the webform.
    • Text Align: The Text Align pull-down lets you set how the text will be aligned on the webform.
    • Top Padding: The Top Padding pull-down lets you pick the amount padding or space (in pixels) that will appear between the start of the webform and the edge of the browser window.
    • Bottom Padding: The Bottom Padding pull-down lets you pick the amount padding or space (in pixels) that will appear between the bottom of the webform and the edge of the browser window.
    • Right Padding: The Right Padding pull-down lets you pick the amount padding or space (in pixels) that will appear between the right side of the webform and the edge of the browser window.
    • Left Padding: The Left Padding pull-down lets you pick the amount padding or space (in pixels) that will appear between the left side of the webform and the edge of the browser window.
  4. Click Save Style Changes when you are done.