Advanced CSS Customisation

Applying CSS (Cascading Style Sheets)
 

1. From Admin > Infocapture, check out the form you wish to modify.

2. Switch to the 'Form styles' tab.

3. Copy and paste the code provided below to achieve the desired result.

 

 

- Make all field labels left aligned

By default field labels in Infocapture are right-aligned.

Add the following code into the 'Form Styles' tab to make all field labels left-align

.form-horizontal .control-label {
text-align: left;
padding-left: 12px;
}

 

Example:

 

 

Apply styles to field labels

Use the below code and tweak it to fit your purpose by changing the title used, the colour and the font size.

This will allow you to choose field labels to apply the styling, which can be useful to draw attention to certain fields at submission or fit your branding.

 

e.g. Make one of the field labels red and in a larger font.

Add the below code into the 'form styles' area.

.big-red {
color: red;
font-size: 20px;
}


Edit your chosen field and enter the title of the change being made into the area shown below.

Save this and check in the form to apply.

 

Result:

 

 

Commenting out styles

Over time you may gain a large list of styles in the 'form styles' tab.

You can comment out styles you don't need by putting them within /*    */ symbol

/* these styles are commented out
.red .ic-section-title {
background-color: #ffb3ba;
color: red;
*/

 

 

Related Articles

Multi Coloured Heading in InfoCapture

 

 

Created on 26 August 2016 by Hannah Door. Last modified on 30 November 2023

Was this helpful?  

Share