input box color

Hello @civilvicky

You can enter a custom class name through the “Add CSS Layout Keywords” attributes of fieldname75 and fieldname76 fields, like custom-border-color, and then define the new class name through the “Customize Form Design” attribute in the “Form Settings” tab (https://resources.developers4web.com/cff/images/documentation/form-settings-tab.png):

#fbuilder .custom-border-color input{border: 1px solid green !important;}

And if you want to modify the background color of a field, enter another custom class name through its “Add CSS Layout Keywords” attribute, like custom-background and the style definition would be similar to:

#fbuilder .custom-background{background-color: yellow !important;}

Best regards.

and how do you change the color of the text?

Hello @bellhogar

Thank you very much for using our plugin. The CSS rule for controlling the text color is color

If you want to modify the text color in the input box of a specific field:

1. Assign a custom class name to the field, for example, my-green-field

You can assign class names to the fields through their attributes: “Add CSS Layout Keywords.”

2. Enter the style definition below through the “Customize Form Design” attribute in the “Form Settings” tab (https://resources.developers4web.com/cff/images/documentation/form-settings-tab.png)

#fbuilder .my-green-field input{color:green !important;}

More information about the fields components and how to modify their appearance by visiting the following link to the plugin’s blog:

https://cff.dwbooster.com/blog/2020/01/12/form-design

Best regards.

This doesn’t seem to work, maybe I’m doing something wrong because I’m not a programmer. I am trying to change the color of the result of the sum in the “TOTAL” section that now appears in green in this link.

https://bellhogar.online/tienda/roble-faro/

I have identified FIELDNAME15 as my-green-field in the “ADD CSS LAYOUT KEYWORDS” box. in the form settings I added

#fbuilder .my-green-field
input{color:blue !important;}

in the Customize form design section. And this doesn’t work.

Hello @bellhogar

You followed the correct steps, but other styles are taking precedence. In this case, it is necessary to use a more specific selector.

Please, enter the style definition below in the “Customize Form Design” attribute in the “Form Settings” tab:

form.cff-form.cp_cff_14 #fbuilder .my-green-field input {
    color: blue !important;
}

Best regards.