Custom CSS For Clients

Requires core 4.1.47.

To save having to defined custom css defintions in sc-static-html on each page, Formbird now have the ability to add additional global css files. This is specified in the environment's configuration file. CSS can be set up to use one specific file or to use the default system CSS alongside multiple other custom css files.

This allows custom panel designs, menu's and other environment wide css definitions to be set. A good example is a custom sc-panel design and a default background.

The system has a default CSS configuration when no css files are specified in the configuration.

Defining Multiple CSS Files

Navigate to the configuration file of your chosen Formbird environment. Under "clientConfiguration" add an object called "css" and define "mainFilePaths" with an array of the urls to the css files you want to include. This gives us the ability to add additional custom css files, but also the ability to define in the order in which they should be loaded.

Using the keyword "DEFAULT" allows us to utilise the system default css file, whilst adding additional or pre-loaded css files into the mix.

"mainFilePaths": [".../pre-load.css", "DEFAULT", ".../additions.css"]

An example implementation using a custom css file for your environment would be as follows...

With css file...

.panel-example>.ft-panel-heading {
    background: #505050;
    color: white;
    font-size: 1.1em;
    font-weight: 200;
    padding: 10px 15px;
}
.background-color-holder{
    background-color: #ededed; 
}

If you require assistance with hosting your css file please talk to one of our formbird consultants.

Defining a Custom CSS File for the Environment

Navigate to the configuration file of your chosen Formbird environment. Under "clientConfiguration" add an object called "css" as below and define "mainFilePath" with the url to the path of your css file.

This approach requires you to specify all of the system css for the menu bars, etc. so it is not recommended.