CFF displays different in Elementor Editor, and online changes doesn’t appear

Hello @cegasol

I’ve visited your web page and form has applied a custom design:

Could you indicate the block of style you have entered and is not applied in the form, please?

Best regards.

Thanks for the response:

Here you can see the difference between Elementor Editor and Live,

In this form in special “Essay Service Pricing Calculator” I add a purple color, and remove the bold aspect with these are the block styles:

/*  Heading Color  */
#fbuilder .fform h2 {
	font-family: 'Roboto', sans-serif;
	color: white !important;}

/* Heading Description Color */
#fbuilder .fform span{ 
	font-family: 'Roboto', sans-serif;
	color: white; }

/*Heading background*/
#fbuilder .fform {background: #8020ff !important;}

/*fieldname11 label format*/
#fbuilder .custom-class-name11 label {
	font-size: 16px;
}

/*slider font format*/
#fbuilder .slider-class {
	/*font-weight : bold;*/
	font-size: 16px;
}

/*radio button format*/
#fbuilder .radio-button-class{
	font-size:16px;
}

/* Error Fields - Attention*/

#fbuilder .error_message {
	font-size:20px;
	color: red !important;	
}

/* Total*/
#fbuilder .total { font-weight: bold; font-size: 20px !important;}

/* Input */
#fbuilder .cff-calculated-field input{ font-weight: bold; font-size: 30px !important;}

Hello @cegasol

I’ll try to describe the way that CSS works in general:

If you have a page that modifies a selector many times, like:

#fbuilder .fform {
    background: #8020ff !important;
}

#fbuilder .fform {
    background: #2A284F !important;
}

The last instance of the CSS rule background: #2A284F !important; will take precedence by replacing the previous one.

There are multiple forms on your page with CSS rules to edit the background color of their header. The last one to load takes precedence over the rest.

A possible alternative would be to edit all the class names in only one place (through the menu option: “Appearance > Customize > Additional CSS”) and removing them from the form.

Another alternative would be to assign custom class names to the forms and include the class names in the selectors.

To assign a class name to a form, insert the shortcode with the class attribute: [CP_CALCULATED_FIELDS id="1" class="my-form"]

And the class definition would be:

.my-form #fbuilder .fform {
    background: #2A284F !important;
}

Best regards.