Menu

Search

KWizCom Support Center


Can I customize KWizCom Forms with custom CSS?


dean
KWizCom Forms

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





On a scale of 1-5, please rate the helpfulness of this article


Not Helpful
Very Helpful
Optionally provide private feedback to help us improve this article...

Thank you for your feedback!


Comments require login or registration.

Details
Last Modified: 6 Months Ago
Last Modified By: dean
Type: HOWTO
Rated 3 stars based on 2 votes.
Article has been viewed 229 times.
Options
Also In This Category