Custom appearance

You can customize the look and feel of ALVAO WebApp to your organization's needs in WebApp - Administration - Settings - WebApp.

You can make more advanced appearance changes, such as changing colors, font cuts and sizes, graphic element sizes, etc., by creating a custom Cascading Style Sheet (CSS) file as follows:

In the folder with the WebApp installed in the Custom subfolder, create a folder with the company name. In it, create a Theme subfolder. This folder will contain all the customizations that affect the appearance. It should have the same hierarchy as the Content folder in the WebApp installation folder:
- Content/
  - img/ - images folder
  - fonts/ - folder with fonts
  - .scss - cascading style files
Note:
The Custom/<company-name> folder is used for custom forms.
In the Web.config file, in the appSettings section, set the CustomThemePath to the path to the Theme folder. For example, when the appearance customizations are in the <ALVAO WebApp installation folder>/Custom/Company1/Theme, then set the CustomThemePath entry to "~/Custom/Company1/Theme".
Enable access to this folder for non-logged-in users (styles are also applied on the login page). In the Web.config file Find the line "<location path="Scripts">". Add after it:
<location path="Custom/<company name>/Theme">
<system.web>
  <authorization>
  <allow users="*" />
  </authorization>
</system.web>
</location>

All SCSS files in this folder will be loaded on each WebApp page. These files are loaded last, so the rules have more weight than the rules in the system SCSS files in the Content folder. All other files in this folder take precedence over files in the Content folder, including the image in the img folder.

Variables

You can use the following variables in SCSS files. Variable value setting syntax: : "<variable name>: <value>;".

Variable	Description
$navbar-bg-color	Color of the top navigation bar
$navbar-hover-bg-color	Colour of the elements in the top navigation bar after mouseover
$search-bg-color	Color of the search box in the top navigation bar if not active
$navbar-search-focus-bg-color	Color of the top navigation bar when the search field is activated
$navigation-sd-bg-color	Left navigation bar colour

Note:

The ALVAO WebApp uses its palette of 7 shades of base color, which are used as the default colors for each graphic element. The individual shades are stored in the variables $primary-color-dark-3, $primary-color-dark-2, $primary-color-dark-1, $primary-color, $primary-color-light-1, $primary-color-light-2, and $primary-color-light-3 (from darkest to lightest), with the base color stored in the $primary-color variable. You can change the palette, but you will need to make additional adjustments for a consistent WebApp appearance.

Example

To change the color of the top navigation bar to red, create a folder Custom/<company name>/Theme and create an empty Custom.scss file in it. In the file, write the rule:

$navbar-bg-color: red;

.navbar-default
{
background-color: red;
}

Save the file.

In the Web.config file, set CustomThemePath to "~/Custom/<company name>/Theme".

Off custom appearance

In case you want to use the standard ALVAO WebApp appearance again, in the Web.config file, set CustomThemePath to an empty value.

Backup Custom Appearance

It is recommended to back up the custom theme settings either as part of backups of the entire application server or by backing up the Custom/<company>/Theme folder.

Upgrade Alvao

When upgrading to a new version of Alvao, there may be changes to the ALVAO WebApp cascading styles. Therefore, after upgrading, we recommend that you check the appearance of the WebApp and modify your own appearance if necessary.

Did not find what you were looking for? Ask our technical support team.