How to customise the CSS styling of your Account

At some point, you may want to customise the look of your forms, for example when you embed your form into your own corporate website. Through your account, you can upload a custom CSS styling script that will customise all of the forms on your account, as well as other areas of the interface if you choose.

Syntaq's Custom CSS Classes

Syntaq has its own custom classes embedded in each of our components which we recommend you use when customising the CSS of your form. Customising the CSS based on these classes will ensure there are less conflicts with your website when you are embedding your forms.

All Syntaq components contain the following class:

syntaq-component

To modify the styles of all Syntaq components in the same way, you would add the following container to your Custom CSS file.

.syntaq-component {
    /* CSS styles go here */
}

Each individual component also has their own custom class. An exhaustive list of those classes follows.

• syntaq-component-sfaradioyn
• syntaq-component-checkboxesgroup
• syntaq-component-radiogroup
• syntaq-component-sfatextfield
• syntaq-component-sfanumber
• syntaq-component-sfaselect
• syntaq-component-sfadatetime
• syntaq-component-sfacheckbox
• syntaq-component-person
• syntaq-component-addressgroup
• syntaq-component-sfapanel
• syntaq-component-section
• syntaq-component-heading
• syntaq-component-label
• syntaq-component-divider
• syntaq-component-helpnotes
• syntaq-component-summarytable
• syntaq-component-sfaemail
• syntaq-component-sfatextarea
• syntaq-component-slider
• syntaq-component-image
• syntaq-component-country
• syntaq-component-link
• syntaq-component-sfahtmlelement
• syntaq-component-nestedform
• syntaq-component-popupform
• syntaq-component-youtube
• syntaq-component-sfafile
• syntaq-component-imageupload
• syntaq-component-sfasignature
• syntaq-component-sfabutton

You can find more information on modifying CSS styles here.

Uploading Custom CSS

Follow these steps to update the CSS of your entire portal including Forms

1. Log into your admin account, and click on Settings under Administration in the main menu on the left to access your application settings.
2. In the Appearance tab, you will see a 'Choose file' button on the right-hand side under Custom CSS
3. Click the button and a file browser window will open. Navigate to and select your custom CSS file, then click the open button in the lower right-hand corner.
4. Click the purple Upload button below where you just uploaded the CSS file and you are all done!

Making Sure Your Custom CSS File Loads on Your Embedded Form

CSS won't load in an embedded form unless you tell it to. You will need to add the following script to the form's script editor, replacing 'falcon' in the url with your tenancy name:

if(!$("link[href='https://falcon.syntaq.com/TenantCustomization/GetCustomCss']").length){
 loadjscssfile("https://falcon.syntaq.com/TenantCustomization/GetCustomCss", "css");
}

This checks to see if the file has already been loaded, and adds it if it hasn't.

Example CSS File

Below is an example CSS file, with a couple of special cases included

/*These will apply to the whole panel*/
.syntaq-component-sfapanel {
    background-color: #f7f7f7;
    border-width: 0px !important; 
}

/*These will apply to section header*/

.syntaq-component-sfapanel > .panel-heading, .card-header {
    background-color: #80bd00 !important;
    color: #ffffff !important;
    border-color: #80bd00 !important;
}

/*These will apply to active previous, next, save & submit buttons*/

.btn-primary {
    background-color: #80bd00;
    border-color: #80bd00;
}

/*These will apply to active previous, next, save & submit buttons on hover*/

.btn-primary:hover {
    background-color: #649203;
    border-color: #649203;
}

/*These will apply to disabled previous, next, save & submit buttons*/

.btn-primary.disabled {
    background-color: #9a9a9a;
    border-color: #9a9a9a;
}


/*These will apply to labels*/

.control-label {
    color: #474747 !important;
}

/*These will apply to record heading background */

.border_bottom, .row-header {
    background: #f7f7f7 !important;
    background-color: #f7f7f7 !important;
}