How do you customize the color of the header in forms? I want my test environment to be visually distinctive from production.
You can change it by editing the "C:\Program Files\Laserfiche\Laserfiche Forms\Forms\Styles\cf-core.css" file. Open it and search for .lf-header--inverse and change the background color that follows (it is all on a single line). The only thing to note is that the navigation button colors will not be affected.
This! Thank you Bert.
Bert, you are amazing.
Hi Bert, thank you for this! Quick question, do you know if it's also possible to change the header color of the formsconfig page?
@████████ yes you can edit the header color for the FormsConfig site. You need to open C:\Program Files\Laserfiche\Laserfiche Forms\Config\SiteContent\dist\apps.css in a text editor, search for ".lf-header--inverse" change the "background-color" value to change the color of the bar.
.lf-header--inverse {
background-color:#000;
color:#fff;
width:100%
}
Perfect, thanks again Bert!
Hi Erik,
I don't think Forms has an option for this.
However, if you have a way of adding a custom stylesheet whenever in Forms, this is the relevant CSS:
.lf-header--inverse {
background-color: #0069ba;
color: #fff;
}
/* the active tab */
.lf-header .lfm-toolbar__link.active, .lf-header .lfm-toolbar__link.active:focus, .lf-header .lfm-toolbar__link.active:hover, .lf-header .dropdown.open .lfm-toolbar__link, .lf-header .dropdown.open .lfm-toolbar__link:hover, .lf-header .dropdown.open .lfm-toolbar__link:focus, .lf-header .dropdown.open.lfm-toolbar__link, .lf-header .dropdown.open.lfm-toolbar__link:hover, .lf-header .dropdown.open.lfm-toolbar__link:focus, .lf-header .lfm-toolbar__link.active .lf-icon {
background-color: #0056a0;
}
(You may need to add !important to any of those, ie "background-color: #ff44aa !important;")