Custom CSS

In 4ALLPORTAL it is possible to embed your own CSS to change more than just the default theme configurations. There are different scopes, which can be addressed to really change only what you want to change.

Warning

The feature of adding CSS is supported, but your custom CSS may break (no longer work as expected) in ANY Major/Minor/Patch release. There is no guarantee on the structure of the HTML.

Scopes

Global

In the global scope CSS is defined that should apply to the entire 4ALLPORTAL. This concerns for example the integration of fonts or the change of the standard font size or similar.

Example:

html, body {
  font-size: 28px;
}

input {
  font-style: italic;
}

Components

The component scope defines styles per component. This means that it is possible to define specific CSS rules for individual components such as text fields.

These CSS rules interfere only with the specified component and all components derived from it, so there are no unexpected side effects. Since there is one component from which all other components inherit, a style can be assigned to all components by defining the style for __all__.

Within the CSS for components the Shadow DOM style (opens new window) should be used.

Example:

:host {
  font-family: Consolas, monospace;
}

:host .subComponent {
  color: rebeccapurple;
}

How to use

It is very easy to include your own CSS.

Step 1 is to save a CSS file and place it in any location under custom/application/html ( e.g. custom/application/html/subfolder/my.css).

Step 2 is to add the CSS file to init.json so that it is loaded at startup.

Example (custom/application/html/init.json):

{
  "environment": {
    "styling": {
      "global": ["subfolder/my.css"],
      "components": {
        "cm4ap-label": ":host {color: red !important}",
        "cm4ap-text-field": [
          "subfolder/component-styles.css",
          "subfolder/textfield-styles.css"
        ]
      }
    }
  }
}

As you can see, one or more CSS files can be used for one or more scopes. The environment entry has the key styling and the two scopes global and components. For components the key is the HTML tag for which the css files should be applied.

You can use a plain string for simple CSS text, or a string array for CSS file paths. The paths are relative to the "root" directory with the index.html file (custom/application/html), so if you store all your CSS files in that directory, you have just to list their file names in that array.