Log In

Log In



Not registered yet?


Reset password Activation link

Custom CSS class names for both Form and Database

CSS is an advanced way to customize your web-form or database. You defining custom styles and your widgets can look much better then default QuintaDB style. But it requires some knowledge of custom style sheets

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


 For example, to place several fields horizontally, you can use the two-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). 

 

How to assign CSS class name to form fields and upload your own CSS file to form or table widget


All available system CSS class names:

.hide {

display:none;

}

 

.hidden {

display:none;

}

 

.two-column {

    clear: none;

    float: left;

    width: 47% !important;

}

 

.three-column {

    clear: none;

    float: left;

    width: 33% !important;

}

 

.four-column {

    clear: none;

    float: left;

    width: 20% !important;

}

 

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;
}



Spaces between fields were reduced thanks to the CSS file uploaded by you. 
Table widget 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 Table menu in Widgets section. And in the end you'll see something like this: 

Database after uploading your own CSS stylesheet

 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.

 

You can also use CSS class names to reference them in your custom JavaScript code.

Which you can upload to form via Description field name.


Please, login to QuintaDB to be able to post comments
Share the discussion in the social networks: