CSS tab

Modified on Thu, 20 Jul, 2023 at 2:55 PM

The idea behind Css is to separate the layout from the content. You can take one HTML page and apply different Css file to give the page a different layout and/or styling. There are two parts to a Css files:

A selector that tells the brower which elements you want to style,
and a list of properties or styles to apply to these elements, such as the color or font size

The Css tab lets you add your own Css easily. Once you make any changes, they are applied immediately once you click anywhere outside the Css tab. For special selectors used by formcycle, see the help pages on selectors.

Design your form by adding your own custom Css in the Css tab. Here we removed the border around input fields and gave labels a blue tint.

Help pages for CSS

CSS selectors

CSS properties

Example

First we set some default values for the font size and color that are applied to the entire form. By setting a font size in pixels on the form element, we can then use the Css units em for all other elements. If we later change our mind and change the font size of the form, all other font sizes are scaled accordingly.

FORM.xm-form { /* Selects the entire form */
    font-size: 16px; /* Base font size */
    color: #111; /* Base font color */
    font-family: Arial; /* Base font type */
}

Now we add a class named tallText that increases the font size greatly. Once you have added this code to the Css tab, you can then select this class in the Css classes section of the properties panel of the formcycle Designer.

.hoherText .XTextField { /* Selects all elements with the class tallText */
    height: 3.75em; /* Make the input field about 4 times as high as the base font size */
    font-size: 2.5em; /* Make the font two and a half times as large as the base font size */
    font-weight: bold; /* Make the text bold */
    text-align: center; /* Center the text horizontally */
}

Editor

The Css tab provides you with an intelligent code editor that supports you and lets you write you Css smoothly and quickly. The editor that we make use of is called monaco editor. Here is a quick overview over some of the main features:

Colors are a fundamental part of every design. The color picker opens when you hover with the mouse over a color value. It lets you pick and preview a color easily. Also, you can always see a preview for all colors used in the Css file, so that you do not have to read hexadecimal color codes.

For each selector, you can expand or collapse the properties applied to it. Click on the + or - icon in the left panel with the code line numbers.

When you enter a Css property, the editor gives you a list of suggestions and possible properties. You can also trigger the autocomplete feature manually by pressing ctrl + space. For most properties, the editor also offers a description that explain what the property is and what it does. When you have just opened the formcycle Designer, the descriptions are hidden. Click on the blue icon to show them.

The autocomplete feature is available for the values of Css properties as well. For many values, a short description is also available. When you have just opened the FORMCYCLE Designer, the descriptions are hidden. Click on the blue icon to show them.

As the size of a Css file grows, finding a certain location becomes harder. This is where the search bar can help you out. Open the search bar by pressing ctrl + f. It opens near the top right corner of the editor. Enter a text to search for and the editor highlights all occurrences of that text. To start a case-sensitive search, click on the icon to the right of the search bar. Lastly, when you want to replace some text with another text, enter the replace mode by either pressing ctrl + h or by clicking on the arrow to the left of the search bar.

The editor is able to recognizes some types of errors. Parts marked in green are potential mistakes, but they are not critical errors. When a part is marked in red, this usually indicates a syntax error. You should read the detailled error message by hovering over the error and correct it. Shown in the figure is a set of Css properties that are incompatible, as the width of inline elements cannot be specified directly (it is determined during the layout phase).