Corteza Studio

Corteza Studio allows users to customize Corteza web applications styling according to their preferences.

For Corteza Studio, to function properly, you need to Install dart-sass binaries in your system and HTTP_WEBAPP_ENABLED enviroment variable set to true.

Customizing Corteza Web Applications

There are two ways of customizing your Corteza web applications style:

Branding

In the admin area, navigate to the User Interface  Settings branding section.

Annotated image

A screen showing you all of the available Corteza-specific branding color configuration options.

From there you can:

  • Click on the variable’s rounded color input, which will pop up a modal window with a color picker.

  • Pick a color then click the Save and close button to save your input variable color changes.

Annotated image

After making your branding color changes, click the Submit button. This action will save your input changes and automatically refresh your admin web application with the updated branding color.

Custom CSS Editor

In the admin area, navigate to the User Interface  Settings Custom CSS section.

Custom CSS editor supports both SASS and CSS syntax enabling you to customize your Corteza web application(s) styling using your preferred stylesheet language.
Annotated image

In this section, you can add your stylesheet code that specifically targets your web application(s). Afterward, simply click the Submit button to save your input changes. This action will save your input changes and automatically refresh your web application with the updated styling.

Please note that the Custom CSS editor stylesheet code takes precedence over the configuration of branding section variables.