Styling Forms With CSS

You can style your PAS installation and your developed PAS applications using CSS. To do this, you need a CSS file that contains the related styling definitions. This way, you can define your own styling of the application, for example font and font size, or use your own images and logos.

To ease your work and to have a starting point, you can download a CSS template css-template.css from our documentation. Save it under a name of your choice and adapt it as necessary.
How to apply styling to form elements of Designer applications and what preparations are needed, is explained in detail on Styling Form Elements.

Adapting the CSS Template

The CSS template contains two sections:

Main parameters configuration
CSS definitions

CSS Snippet

Description

CODE

/** Main parameters configuration */

:root {
       --primary: rgba(41, 150, 204, 1);
       --accent: rgba(186, 182, 185, 1);
       --warn: rgba(208, 50, 55, 1);

       --background-color: white;
       --logo: url('data:image/svg+xml;base64,PHN2ZyBpZ...DwvZz4KPC9zdmc+Cg==');
       --logo-size: auto 20px;
       --caption-font: normal 200 20px Roboto;

       --header-background-color: unset;
       --header-color: white;
       --header-background-image: var(--logo), linear-gradient(to right, transparent 0, ... var(--white) 8px);
       --header-background-position: 64px center, left, top;

       --h1-font: 100 44px Roboto;

       --button-border-radius: 0;
       --button-color: white;
       --primary-button-color: white;
}

The root section contains essential parameters that are used in the rest of the CSS file. Style your main colors, fonts and logos, etc. in this section.

CODE

/** CSS definitions **/

body {
      background-color: var(--background-color);
}

header {
        background-color: var(--header-background-color) !important;
        background-image: var(--header-background-image) !important;
        background-position: var(--header-background-position) !important;
        background-size: var(--logo-size), cover !important;
}

header .caption {
                 font: var(--caption-font) !important;
                 color: var(--header-color);
}

[...]

The rest of the CSS file contains CSS definitions for various UI elements you may want to style.
You can change them, or you can also define new CSS classes for individual elements.

Class header is useful for changes to the application header.

Form_CSS_Example

Click here to download a simple example model that shows how you can style forms with your own custom CSS in Scheer PAS Designer.

To be able to execute this example, you need to upload the sample CSS file example-ccs-acme.css as a resource to the File Manager.
You can download the CSS file here. Refer to Managing File Resources for more information on how to upload the file.

Related Pages: