Appendix F. Adapt LAM to your corporate design

There are cases where you might want to change LAM's default look'n'feel to better integrate it in your company network. Changes can be done like this:

Change colors, fonts and other parts with custom CSS

You can integrate custom CSS files in LAM. It is recommended to write a separate CSS file instead of modifying LAM's default files.

The CSS files are located in

LAM will automatically integrate all CSS files in alphabetical order. E.g. you can create a file called "900_myCompany.css" which will be added as last file.

In many cases it can be sufficient to overwrite some CSS variables. See top of 500_layout.css for defined variables.

Example:

This will change the background color of all pages to grey.

:root {
    --lam-background-color-default: #E7E7E7;
}

Change LAM logo:

div.lam-header-left img {
    background: url("../graphics/key.svg") center no-repeat;
    box-sizing: border-box;
    width: 32px;
    height: 32px;
    padding-left: 32px;
}

You can use the same way to change font/button colors and more.

Change header bar to mark different environments

.lam-header {
    box-shadow: 0px 3px 2px -2px red;
}

Other images

All images are located in

Please note that if you replace images then you need to reapply your changes every time you upgrade LAM.

Special changes with custom JavaScript

In rare cases it might not be sufficient to write custom CSS or replace some image files. E.g. you might want to add custom content to all pages.

For these cases you can add a custom JavaScript file that contains your code.

The JavaScript files are located in

LAM will automatically integrate all .js files in alphabetical order. E.g. you can create a file called "900_myCompany.js" which will be added as last file.

Self service

See here for self service customisations.