Custom CSS class names for both Form and Database

For any form field you can set a parent element CSS class name. You can upload a CSS file with class field descriptions in the Customize & Integrate menu.

Also you can use internal class names, for example hidden, two-column, three-column and four-column. Changes will not work in menu Forms - only in menu Records, Customize & Integrate and on a live form. Each form field now has a new option, that is CSS class



 When you click on the CSS class name you'll be able to set this form field CSS class name



 For example, to place several fields horizontally, you can use the four-column system class name. You will have to set such a class name for all of the form fields, which you want to place on one row (several columns). 



You can see all available system CSS class names on this page. You can set a form field CSS class name and upload this class definition in your own stylesheet CSS file. For example, let's change our system CSS file to override internal class definitions: 

.two-column {
clear: none;
float: left;
width: 17% !important;
}

.three-column {
clear: none;
float: left;
width: 13% !important;
}

.four-column {
clear: none;
float: left;
width: 10% !important;
}

You can upload your CSS file in menu Customize and Integrate. 



 Here is how your form will be changed after this upload. 



 As you can see from the screenshot above, spaces between fields were reduced thanks to the CSS file uploaded by you. 
Integrated DB design can also be improved by uploading your CSS file. Let's say we have the following file: 
table {
border-width: medium;
border-spacing: ;
border-style: dotted;
border-color: black;
border-collapse: separate;
background-color: rgb(255, 250, 250);
}

table th {
border-width: 4px;
padding: 2px;
border-style: solid;
border-color: blue;
background-color: rgb(255, 245, 238);
-moz-border-radius: ;
}

table td {
border-width: 4px;
padding: 2px;
border-style: solid;
border-color: blue;
background-color: rgb(255, 245, 238);
-moz-border-radius: ;
}

 This file can be uploaded exactly in the same way as you just did for your form. Only go to the Database menu. And in the end you'll see something like this: 



 It's much more interesting to create a custom design for the database, because you can improve not only a table view, but also all database forms, like Filtering, Search and Grouping forms.

Another good example of using dynamic rules is drop down for applying to your services. For example, apply for a credit card, apply to webmoney, apply to paypal. Once user choosed what is his apply choice you'll show him another fields, to enter his payment details.

01.01.2011 Igor Petrushenko