Visual Mashup
Builder
|
AppliBuilder
User Documentation
|
|
Adding CSS Styles to Your Pages
AppliBuilder supports addding CSS styles to a page to customize the
presentation of widgets and pages to suit your needs.
Note: Your CSS styles
will work only in the
runtime, or preview, page and will not be applied in the builder
window.
Add a CSS Style to a
Page
To add a CSS style to a page, use
the Add Style menu item under Styles.
In the form that opens up, fill in the fields a follows.
- The name of the style is an optional field for your future
reference.
- The style selector is the CSS style selector, e.g. .myclass
refers
to a class named myclass, so all elements with that class get selected.
Please refer to a CSS guide, e.g. http://www.w3schools.com/css/,
for more information.
- The Style Source field is where you fill in the desired CSS
properties. For example, background: grey; border-style: dashed;
Edit
Page Style
To edit a page style, choolse View
Styles from teh Styles menu and
click on the Edit button for the style you want to edit.
Core Page and
Layout Classes and Ids
In order to set CSS styles for a widget, use the className or id for
the widget to specify the CSS for the widget.
In order to set CSS styles for the
page, and top-level content use
one of the following:
- body: To set the page CSS, use body as the
selector. For example, use selector body and background:
grey; for the style source to set the page background to grey.
- .appliBuilder_container Use this selector to
set the properties for the top-level div container for your widgets.
- .appliBuilder_table For table layout, use this
selector to set the properties for the table container which holds all
your widgets on a page.
- td.alayoutrow For table layout, use this
selector to select all the table rows.
- #layoutrowN For table layout, use this
selector to select the N+1th table row.
- td.alayoutcell For table layout, use this
selector to select all the table cells.
- #layoutcellN For table layout, use this
selector to select the N+1th table cell.