Font Change & Column Color

Hello @fitnessgenie

In the container the first field with the column4 will have the selector: #fbuilder .column4:nth-child(1), the second field with the column4 #fbuilder .column4:nth-child(2) and so on.

So, you can enter a style definition similar to the following one, into the “Customize Form Design” attribute in the “Form Settings” tab (https://cff.dwbooster.com/images/documentation/form-settings-tab.png)

#fbuilder .column4:nth-child(1){background-color:red !important;}
#fbuilder .column4:nth-child(2){background-color:blue !important;}
#fbuilder .column4:nth-child(3){background-color:green !important;}
#fbuilder .column4:nth-child(4){background-color:yellow !important;}

Concerning to the text of an “Instruct. text” field, I guess you are referring to modify it programmatically. If it is the case, you can to assign a custom class name to this field, for example: my-field

Note: the class names are assigned to the fields through their attributes: “Add CSS Layout Keywords”

And then, you can use a piece of code similar to the following one as part of an equation associated to a calculated field:

jQuery('.my-field label').html("The new text here");

Best regards.

I input the code stated above in the “add css layout keywords” and nothing happened. Is there something i am missing?

Hello @fitnessgenie

Exactly what code you have inserted and in the attribute of which field.

Best regards.

Hi, yes I pasted this code:

#fbuilder .column4:nth-child(1){background-color:red !important;}

into the first column “add css layout keywords” of my div container.

Hello @fitnessgenie

Please, read me ticket again, the styles definitions must be entered into the “Customize Form Design” attribute in the “Form Settings” tab:

and not into the “Add CSS Layout Keywords” attributes (into this attribute you enter only the class name you want to assign to a field), you’ve merged my answers to your two different questions.

Best regards.

Sorry I made an error with my explanation. I did input this code:

#fbuilder .column4:nth-child(1){background-color:red !important;}

Into the form settings box and nothing happens.

1st column still appears default colour

Hello @fitnessgenie

I’m not sure the form you are editing, but I can ensure the code is not being used in the form inserted in the web page:

https://fitnessgenie.ca/womens-weight-loss-plan

Best regards.

The form Im editing is the cff that says food chart and there are 4 vertical columns labeled as 1)Protein 2)fats 3)carbs 4)fillers
I inserted the code:
#fbuilder .column4:nth-child(1){background-color:red !important;}
And previewed the page but the backround of the first column labeled as “protein” was the same.

Ok I got it. Fixed! It doesnt appear in the preview but it shows up when visiting the page. Thanks for the help.

Im learning now this plugin has got to be the best thing I could be using for my fitenss site. Thanks to your help understanding it. The only thing that looks a little odd when you scroll down to the bottom of the page https://fitnessgenie.ca/womens-weight-loss-plan
where I have input the backround colors, each field has a calculated field box that is tight against the left side of each column leaving a padded space on the rite side of each field. Can the calculated fields box be formatted to fill the entire column width left to right? I have tried to use the large field size but it will not incease the size any further which also cuts off some of the resluts in the calculated fields. Keep in mind I am designing this through the mobile perspective.

Hello @fitnessgenie

First, these fields don’t have applied the “large” format, you have configured them as medium.

Second, in the public pages, not only the styles defined in the plugin affect the forms’ appearance, the styles defined by the theme active on your website participate too.

I’ve checked the styles you have defined through the the “Customize Form Design” attribute, on your form, and I see you’ve modified the common form’s layout.

Best regards.