CSS Styling is a great tool for giving your form a distinctive look and more complex formatting. You can set an element’s background color, change the size of the description font or change the margins to create a visible hierarchy on your form. In order to take advantage of this feature, start with the form property 'Custom Styling (CSS)'. This is a large text box where you can place Cascading Style Sheets (CSS) class definitions. If you are not familiar with this web language, essentially it takes your plain vanilla web elements and modifies their coloring, size and position. There are literally hundreds of possible CSS properties, but the styling in Ecollect is restricted to the individual elements (<div> tags), and some properties are incompatible with Ecollect’s functionality. We will cover some basic properties that will work, and you can feel free to experiment with others.


Background Color:

For our first example we will change the background color of an element. Our CSS class will be called ‘yellow-background’, and as you might guess it will turn the element’s background yellow. This is what you would enter into the form’s Custom Styling (CSS) box:

.yellow-background { background-color: yellow;}


Notice the period before the class name. This is important and signifies that this is a class definition.

Now you can select the element (a single line text for example) and enter the following in it’s Custom Class (CSS) box:

yellow-background


Notice there’s no period; we just use the class name. Don't forget to save the form.

More examples:


Font Size:

Custom Styling (CSS) box:

.big-title { font-size: 60px;}


Custom Class (CSS) box:

big-title


Font Color:

Custom Styling (CSS) box:

.white-font { color: white;}


Custom Class (CSS) box:

white-font


Left Margin:

Custom Styling (CSS) box:

.margin-10 { margin-left: 10%;}


Custom Class (CSS) box:

margin-10


Finally, what if you wanted your class to encompass more than one of these properties? It might look something like this:


.my-class {

font-size: 60px;

background-color: orange;

color: white;

}