How to hide the border?

Hi,

To align the labels at right, you only should press the “Form Settings” tab, from the form’s edition, and select the option “Right Aligned” in the “Label Placement” attribute.

To hide the border of the calculated fields boxes, you should use the style definition:

#fbuilder .codepeoplecalculatedfield { border:0; }

Finally, if you want that in the calculated fields the labels be aligned at top, you should follow the steps below:

1. Enter a custom class name through the “Add Css Layout Keywords” attribute, of the calculated field, for example myclass

2. Paste the following class definition in the css file:

.cp_cff_clean #fbuilder .myclass label,
.cp_cff_clean #fbuilder .myclass dfield{width:100% !important; text-align:left !important;}

Tip: You should clear the browser’s cache after modifiy the online files.

Best regards.

Where should I put this #fbuilder .codepeoplecalculatedfield { border:0; } ?

i cant center the input text field. I have this code .cp_cff_clean #fbuilder .hcresult input[type=”text”]{align:center;} but its not working

Hi,

The style definition ( #fbuilder .codepeoplecalculatedfield { border:0; } ) can be pasted in any CSS file loaded by your website, but to maintain the code organized, paste it at the end of the stylepublic.css file, located in “/wp-content/plugins/calculated-fields-form/css/stylepublic.css”

About the alignment of the input field at center, the correct style definition would be:

#fbuilder .hcresult .dfield{ text-align: center; }

Best regards.

I put these

#fbuilder .codepeoplecalculatedfield { border:0; }
#fbuilder .hcresult .dfield{ text-align: center; }

The border line is not remove, and the input text field is not center

I want to hide or remove the border and the white field in input text field

Hi,

In this case you can assign a custom class name through the “Add Css Layout Keywords” attribute, for example myclass, and define the myclass in any of the css file used by your website:

.myclass input{border:0;bakground:none;}

Best regards.

I did what you said but still its not working

#fbuilder .hcresult { border:0; }
#fbuilder .hcresult .dfield{ text-align: center; margin-left:70px; }
#fbuilder .resultfield {border:0;bakground:none;} //for the input background

The class name entered is applied to the <div> that includes the input. So, the style definition should be:

#fbuilder .resultfield input{border:0;background:none;}

Note: I’m sorry. in the previous ticket I’ve wrote “bakground” but the correct is “background”.

Best regards.

its not working ??

Hi,

You are not using the .resultfield class in the form, but I see your are using the “hcresult” class in the calculated fields, so, the correct would be:

#fbuilder .hcresult input{border:0;background:none;}

But if you want hide the borders and background colors in all calculated fields, the easiest way to get this is modifying directly the class assigned to the calculated fields:

#fbuilder .codepeoplecalculatedfield { border:0; background:none; }

Best regards.

Ok, I see. It’s ok now. But how I can change the font-color?
I put this code .cp_cff_clean #fbuilder .hcresult input{border:0;background:none; color:#FFFFFFF; font-size:20px;} but the font-color is not change into white color

Hi,

You are using seven characters in the color code, the correct are six:

#FFFFFF

Best regards.

I did that, but still not working

Hi,

Please, contact us through the support page:

https://wordpress.dwbooster.com/support

Best regards.