Can I customize KWizCom Forms with custom CSS?



Question

I want to customize KWizCom Forms to use some custom CSS. Is this possible?

Answer

Example 1 - changing the colour of field grouping tabs:
In this form we made the selected tab with yellow background and black text color, while non-selected tab with blue background and white text color :



To achieve this, follow these steps:
1. Press F12 to see the developer tools in your browser.
2. Then check what class is used for a tab and for a selected tab.
The tab's class is :  kwizcom-aplfe-groups-tab-toggle
Select tab’s class is:  kwizcom-aplfe-groups-tab-toggle.active

 

Now go to the Site Assets > KWizCom > APLFE  folder.
and find the file called "kwizcom.aplfe.controller.css"

Open this file in a text editor:



There is no need to download the file to edit it. This can all be done directly within the browser.

Now override these styles as follows:

.kwizcom-aplfe-groups-tab-toggle {

color: white;

background-color:blue;

}

.kwizcom-aplfe-groups-tab-toggle.active{

color: black;

background-color:yellow;

}


and save the css file.

After doing that, the tabs will now reflect your new colour scheme.


Example 2 - How to make a field wider :

Following the steps in the first example to find the CSS file for KWizCom Forms, you can make the following changes to the class:

*[listtitle='name of your list'] *[fieldtitle='name of the field you want to change'] input {

width: 20px; <--this is how big you want the size of the field to be