User Guide and Reference

Field Styling

Hide Navigation Pane

Field Styling

Previous topic Next topic No directory for this topic  

Field Styling

Previous topic Next topic Topic directory requires JavaScript JavaScript is required for the print function  

The form's template sets the style defaults for its fields, and so any global changes should be made to the template itself. That is an advanced topic, not covered here.

 

Local changes can affect only a single field or whole containers or sections. There are 2 types of these changes:

 

Changes through stylesheets

Manual overrides to stylesheets

 

Manual overrides are easy to understand but are time consuming and as clumsy as explicit position layouts.

 

Through Stylesheets

In the Workspace Hierarchy, Stylesheets live in Libraries. Libraries are associated with Projects or the higher levels of the hierarchy. See Library Advanced Features.

 

You can also create ad hoc stylesheets (that is, those not contained in a library) at the Organization level through the Stylesheet tab. See Stylesheets for more.

 

To do either, you need to have the necessary access levels.

 

Given that you now have suitably modified stylesheets, you can make use of these through the "Styling" tab of "Edit Properties" of the element. This tab is available for all elements except the form element at the top of the Structure Panel tree.

 

The tabs has 3 panels:

Stylesets
where designers can choose a style from a set of them as defined in the stylesheet, The most commonest example is "Field Size", which often appears in the wizard when a widget is dropped onto a form's Structure Panel.

Typed Styles
a read-only field that displays the style types associated with the field. These types are defined and assigned in the stylesheet. See Stylesheets.

Named Styles.

 

These 2 kinds of styles are explained in detail later, For now, suffice it to say that:

typed styles are based on field hierarchy or field function, Their allocation is automatic and based on the field's place in the form's structure

Named styles are allocated manually, and their functions are more local, such as for setting a background color or making a field transparent, and so on.

StylingTab

 

 

Manual Overrides

These should be one-off overrides. (If you find that you are continually applying manuals throughout the form, you should be changing the template instead.)

 

The relevant panels are the "Presentation" and "Border" panels:

 

"Properties -> Caption -> Caption Presentation"

"Properties -> Field -> Field Border"

"Properties -> Field -> Field Presentation"

"Properties -> Widget -> Widget Border"

"Properties -> Widget -> Widget Presentation"

 

CaptionPresentation

 

FieldBorder

 

FieldPresentation

 

WidgetBorder

 

WidgetPresentation

 

Custom Styling

This technique stands apart from the other styling adjustments.There is a panel for HTML-only settings, and another for PDF-only comb-fields.

 

2 sample "HTML Custom Styling" panels

2 sample "HTML Custom Styling" panels

 

Custom Classes means CSS Classes from a CSS stylesheet (a quite different entity form a Composer stylesheet) that is not under Composer's environment or control. One scenario is: the Custom Classes belong to a corporate CSS stylesheet. If so, adding these CSS classes via this panel can result in issues at rendering time, and are not an ideal solution.

 

"Bootstrap border styling" refers to Twitter's Bootstrap, a popular framework for implementing responsive layout behavior. The effect of having this border styling turned on is rather subtle:

 

A selected text field in preview

A selected text field in preview

 

The Background Image parameters use a bitmap image file, .png, .jpg and so on, as "wallpaper" inside the object. The "Repeat" dropdown menu can be set to "Default", "Horizontal", "Vertical", "Both" or "None".