Styles | Advancement Form

Styles allow you to create a set of CSS styles that you can add to your campaigns or events. The intent is for these styles to override existing styles.

To setup a style, click on Styles from the top menu. Here you can add a new style or edit an existing one. When creating a style, type valid CSS into the content field and save.

Once you have one or more styles setup, you can edit a campaign or event and choose one of the styles using the Form Style drop down. Refresh your form if it is already open and you will should see your styling applied.

You may find it beneficial to have the styles open in one browser window and your form in another to quickly check style changes.

The base stylesheet uses media queries to detect the browser width and make changes. For example,

@media (max-width: 700px)

{

label { display: block; width: 100%; }

div.field div { width: 100%; }

div.amount_total_display h3.total_label { width: 70%; }

form#credit_card_form div, label { width: 100%; }

}

You will need to override these to match what you want to achieve. You also might want to style the small, medium and large classes as well since these control field sizes.