Examples of Customization for Appearance / CSS

Modified on Mon, 30 Sep at 3:07 PM

This page shows various examples of how to customize the appearance of forms.

Contents

Inserting a graphic into form header

Three different ways of inserting graphics in the visible header area on all form pages are described below

The examples shown here must be inserted into the CSS area of the designer, within a design template, or in a .css file in the form or client (Files & templates > Files).

Using an externally hosted image

to position an externally hosted (small) Logo in the right of the header, the following code can be used as a basic:

root, :host {
    /* URL of the logo and its aspect ratio. */
    --logo-source: url(https://www.formcycle.eu/files/theme/logo/formcycle-logo-klein.png);
    --logo-aspect-ratio: 598 / 145;

    /* Top and right distance of the logo from the header. */
    --logo-margin-top: 10;
    --logo-margin-right: 10;

    /* Standard height of the logo. The logo is smaller on smaller screens (responsive) */
    --logo-max-height: 80;
}

.CXHeader::before {
    content: "";
    aspect-ratio: var(--logo-aspect-ratio);
    background-image: var(--logo-source);
    display: block;
    max-height: calc(1px * var(--logo-max-height));
    max-width: 100%;
    background-repeat: no-repeat;
    justify-self: left;
    pointer-events: none;
    background-size: calc(100%) auto;
    transform: translateY(calc(1px * var(--logo-margin-top)));
    margin: 0px 0 calc(1px * var(--logo-margin-top)) auto;

    /* No right margin when width is too small */
    margin-right: calc(clamp(0px, 100% - 2px * var(--logo-margin-right) - 1px * var(--logo-aspect-ratio) * var(--logo-max-height), 1px) * var(--logo-margin-right));
}

Using a client or form resource

Note: 
Please note the URL sepcification on the right side under properties. For that URL specification, it is identifiable that the pid parameter is used under Files in the designer.
This is the so-called Project ID. Under Files & Templates > Files, however, the mid parameter is used, which passes the Client ID. Since the files are in different contexts, it is necessary to pass the parameter according to the storage location. However, the name parameter is always present, as it passes the name of the file to be retrieved.

The code below can be used to display an image file labeled as header.png, that is uploaded as a client resource (Files & Templates > Files). This code positions the image over the entire header size of a form with the client id 1234:

root, :host {
    /*selects the image relative to URL of the client resource */
    --logo-source: url('../includes/ressource?mid=1234&name=headerbild.png'); 
}

If, however, the image file is uploaded as a form resource (More > Files), the following code will position the image over the entire header size of a form with the project id 1234:

root, :host {
    /*selects the image via relative URL to form resource*/
    --logo-source: url('../includes/ressource?pid=1234&name=headerbild.png'); 
}

Inserting as a base64-String

An image encoded as a base64-String can also be easily inserted into the CSS:

root, :host {
   /*selects an image via base64-String*/
    --logo-source: url("data:image/png;base64,hereFollowsBase64String");
}

Various websites offer the conversion of an image into a Base64 string free of charge.

It's important to note that when using a base64 string for image integration, the image is reloaded each time the form is called up. Web browsers don't recognize the base64 string encoded image content as a separate file, so caching mechanisms of web browsers don't work for this case.

Customizations of the typeface

The following CSS code can be used as a base to generally define the font properties for all elements in the form when using the modern theme:

.xm-form.modern *, .modern .XPage * { 
   /*selects the entire form and all pages*/
   font-family: Verdana; /*determines the default-font*/
}

The font sizes and colours for labels in input fields can be adjusted as follows:

.modern .xm-item-div LABEL {
   font-size: 14px; /*select the font-size*/
   color: #111; /*sets the font-color */
}

The font size of all input elements can be adjusted as follows:

.modern .xm-item-div *, .modern .xm-item-div .XItem {
   font-size: 14px; /* Setzt die Schriftgröße. */
}

Adding an own font

To add a new font, the font should be uploaded to the form under More > Files in the formats woff, woff2, and ttf.

However, if the font is intended for general use, it should be stored under Files & Templates > Files instead. This means that the fonts are only made available initially.

The font must then be integrated into the CSS code of a form and can then be used.

In the following example, fonts will be stored in Files & Templates > Files, identifiable by the parameter mid. For a resource in a form, the parameter pid (project id) is used instead.

After the transfer, the URLs for the fonts still need to be adapted. The absolute URL can be found on the right in the properties area.

@font-face {
   font-family: 'myfont';
      src: url('../includes/ressource?mid=8104&name=Roboto-Regular.woff2') format('woff2'),
            url('../includes/ressource?mid=8104&name=Roboto-Regular.woff') format('woff'),
            url('../includes/ressource?mid=8104&name=Roboto-Regular.ttf') format('ttf');
   font-weight:  normal;
   font-style:  normal;
}

But it is not enough to just define a font face. The new font also needs to be specified for the relevant section. This example demonstrates how to use the new font in the form header. To ensure that it functions as intended, it should be checked using the browser inspector (F12).

.modern .XHeader * {
   font-family: 'myfont';
}

Customizing the favicon

To change the favicon in a form, you can specify the position of the image to be used in the meta area of the Xima® Formcycle Designer, following this pattern:

<link rel="shortcut icon" type="image/png" href="https://example.com/path/to/image/favicon.png" />

The integration process for a base64-coded image follows a similar approach:

<link rel="shortcut icon" type="image/png" href="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAIAAABv85FHAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAEnQAABJ0Ad5mH3gAAAA5SURBVBhXdY1LFgAgCAK5/6UNQ6mFzkLj4wuxkxlQDT5MSrue5onbXjKimJTUIr8rurL9Z2u+G4g4ozy8RKSwCIwAAAAASUVORK5CYII=" />

If multiple favicons with different sizes have been uploaded as form resources under Files, the corresponding code for a form with the project id 1234 and sizes of 16 x 16 and 32 x 32 pixels could look as follows:

<link rel="shortcut icon" type="image/png" sizes="16x16" href="../includes/ressource?pid=1234&name=favicon16.png" />
<link rel="shortcut icon" type="image/png" sizes="32x32" href="../includes/ressource?pid=1234&name=favicon32.png" />

Adjustment distance fieldset upwards

In the modern theme, the default distances to the upper elements are quite large. These can be adjusted using the following CSS code:

.modern .CXFieldSet .XFieldSetWrapper {
   margin-top: 5px;
}

Adjustment background color for fieldsets

To colorize the entire background of a fieldset, adjustments to the legend element are also necessary.

Here is an example, how to do it:

.modern .CXFieldSet .XFieldSetWrapper, .modern .XFieldSet legend {
   background-color: lightsteelblue;
   width: 100%;
}

Adjustment of the side clearance

The CSS class XPage defines the spacing of a page. The first value determines the spacing for top and bottom, the second value determines the spacing for right and left:

.modern .XPage {
   padding: 25px 25px;
}

Adjustment of the width of a help text

To set the width of a help text, the :hover selector of the help icon must be addressed. By default, the width is set to 200px.

.xm-help-container:focus .xm-help-icon .xm-help-text, .xm-help-icon:hover .xm-help-text {
    max-width: 225px;
    width: 225px;
}