| AppliBuilder
User Documentation |
You can customize the look of your pages using CSS styles. Every AppliBuilder widget uses some specific values for the "class" attribute. This can be used to identify the widget and specify styles for it in a CSS file. There is a default set of CSS styles in builder/cssfiles/themes/default.css.
When developing your application, you can add your own CSS files. Use the naming convention from default.css to identify widgets and provide your own styles. These will override the values given in default.css. But note that any styles provided through the Properties' form for the widget will override the styles specified in any of the CSS files.
Here's the default.css CSS file available for customization:
/* The top level layout container for the page*/ .appliBuilder_container{ }
/* Any input element within the layout */
.appliBuilder_container input{
}
/* a text input element within the layout */
.appliBuilder_container input[type=text]{
}
/* a checkbox within the layout */
.appliBuilder_container input[type=checkbox]{
}
/* a radio button within the layout */
.appliBuilder_container input[type=radio]{
}
/* a textarea within the layout */
.appliBuilder_container textarea{
}
/* a select list within the layout */
.appliBuilder_container select{
}
/* a button within the layout */
.appliBuilder_container button{
}
/* a label within the layout */
.appliBuilder_container label{
}
/* an iframe within the layout */
.appliBuilder_container iframe{
}
/* an image within the layout */
.appliBuilder_container img{
}
/* some widgets are wrapped in a div with this className */
.appli-widgetWrap{
}
/* the node wrapping the label element in a form element */
.appli-formLabelWrap{ float: left; width: 40%; vertical-align: top;
}
/* the label element in a form element */
.appli-label{
}
/* the node wrapping the input element in a form element */
.appli-formInputWrap{
background-color: inherit;
}
/* the button widget */
.appli-button{
}
/* the text input node of the form element */
.appli-formText-input{ }
/* the iframe widget */
.appli-iframe{
}
| ©
2006 Applibase, Inc. |