Appearance Presets and Calculations

Hey @vipteam

I hope you’re well today and thank you for your feedback!

The caluculation result is displayed this way because it’s, let’s call it, “re-usable” and it actually is a field.

But I got the idea and I too think it would be cool to be able to style it separately right from the plugin settings, as it is quite a “special” type of field. I’d rather not make promises at this point as Forminator has a long list of planned improvements and new features (so it’s very difficult to make predictions, especially on “when” something will be added) but hopefully we’ll make it reality with one of future releases.

As for now – yes, it can be styled using CSS. The first step would be to add custom class name to the field itself. This can be done by editing calculations field on the form and adding custom class name in its “Styling” tab, in “Additional CSS Classes” field.

Note: when adding a class name there do not use dot in front of class name. So if you, for example, want to add class

.my-calculation-field

add just

my-calculation-field

in that option.

Now having the class added you can apply CSS directly to the field. Sticking to that class, here’s an example of such custom CSS:

.my-calculation-field input {
	background:none;
	font-weight:bold;
	font-size:2em;
	
}

Note please that this is just an example. If you you need help with any specific form/field, please describe exactly how it should look and share a link to the form in question (with custom class name already added to the field) and we’ll assist you more.

Best regards,
Adam

Thanks, but unfortunately, even though I followed the instructions exactly, I was unable to get the changes. That doesn’t work. I’ve tried everything but I can’t seem to get what I want with CSS.

I even tried to make it easier for myself with the SiteOrigin CSS plugin https://www.ads-software.com/plugins/so-css/, but I didn’t succeed in this way either.

Have a nice day. Regards,

Hi Adam,

Update. Searching the forum, I came across the following instructions:
https://www.ads-software.com/support/topic/background-color-change-for-one-particular-calculation-field/

It’s not an instant solution to my problem, but it gave me an idea. I played around with the options and came up with the final solution:

/* --------- Forminator - Calculation field --------- */
/* calculation field - background and border */
#calculation-1 .forminator-input,
#calculation-1 span{
  background: #ffffff !important;
  border-color: #2097FC !important;
}

/* result (eg. 50.00) */
#calculation-1 input {
  font-size: 32px !important;
  color: #2097FC !important;
}

/* prefix (eg. $ or €) */
#calculation-1 span.forminator-prefix {
  font-size: 32px !important;
  color: #2097FC !important;
}

/* label */
#calculation-1 label {
  font-size: 16px !important;
  color: #2097FC !important;
  text-transform: uppercase !important;
}

Outcome:

View post on imgur.com

I dare say it looks really professional now.

HI @vipteam,

Glad to hear you are able to get it sorted. Is there anything else you want us to check further regarding this ticket?

Please advise.

Best Regards,

Nithin

Hi Nithin,

Thanks, this is resolved. Topic can be closed. I just wanted someone to look into this and consider it as a feature in one of the future Forminator updates.

Thanks in advance. Regards,