Skip Navigation LinksALVAO 10.2ALVAO Service DeskSystem Implementation in an OrganizationCustom Edits and ExtensionsCustom Appearance Skip Navigation Links. Skip Navigation Links Skip Navigation Links.


Change ALVAO version
Change language

Custom Appearance

ALVAO WebApp allows you to:
  • edit the appearance with cascading style sheets (colors, sizes etc.)
  • replace graphic elements with your own ones (e.g. corporate logo in the page header)

Follow the steps below to edit WebApp appearance:

  1. Go to the WebApp installation folder and then in the Custom sub-folder where you create another folder with your company name. Open this newly created folder and create a sub-folder called Theme. This sub-folder will contain all appearance edits. It should use the same hierarchy as the Content folder in the WebApp installation folder:
    • Content
      • img/ – image folder
      • fonts/ – font folder
      • .css – cascading style sheets
    Note:
    The Custom/company name folder is used for custom forms.
  2. Open the Web.config, find the "appSettings" section and set the CustomThemePath item to the Theme folder path. For example, if the custom layout is located in the folder <ALVAO WebApp installation folder>/Custom/ALVAO/Theme, set the CustomThemePath item to "~/Custom/ALVAO/Theme".
  3. Make sure that even users who are not logged-in have access to this folder (styles are applied on the Login page too). Find the "<location path="Scripts">" line in the Web.config file. Insert the following string behind this line:

    <location path="Custom/<company name>/Theme">
     <system.web>
      <authorization>
       <allow users="*" />
      </authorization>
     </system.web>
    </location>

Then:

  • All CSS files located in this folder will be loaded for each page. These files are loaded as the last ones, so the rules have priority over the rules in CSS files located in the Content folder.
  • All other files in this folder have priority over the files located in the Content folder, including the image located in the img folder.

Example

If you want to change the logo in ALVAO WebApp, create a folder under Custom/<company name>/Theme/img, save your logo as a PNG file in the "img" folder and rename the logo file to "logo.png". Also add a square version of the logo for narrow display of WebApp on mobile devices. Name the file "logo-short.png". Open the Web.config file and set the CustomThemePath item to "~/Custom/<company name>/Theme".

When the page is loaded, the image located in the Custom folder has priority over the default image located in the Content/img folder, and thus the custom logo will be displayed.

If you want to edit other items, such as colors, create a file in the Theme folder and call it Custom.css. Type the following rule in this file:

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

Save the file. The next time the ALVAO WebApp is loaded, the newly created file will be loaded too and the rule will change the blue stripe color to red.

Disabling Custom Appearance

If you want to return to the default ALVAO WebApp appearance, open the Web.config file and make the value for the CustomThemePath blank.

ALVAO WebApp Upgrade

If cascading style sheets are edited in later ALVAO WebApp versions, the changes made will take effect in the custom appearance too.

Custom Appearance Backup

If you want to back up your custom appearance settings, back up the Custom/<company name>/Theme folder.

 

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