CSS classes in Calculator

By the way, it would be extremely helpful if there were an option to assign a custom class to each element. While working on this, I noticed that many elements share the same class, which makes it difficult to target a specific header or block. Being able to add a unique class on top of the existing one would greatly increase the flexibility in styling.

One more thing about the CSS: it seems like the class names sometimes change. For example, I target a class in the custom CSS field—it works fine for a while, but then stops working, and I can’t find that class anymore. I have to find and target a different class (since the old one no longer exists), and then it works again. Hopefully this won’t be a recurring issue.

Thanks, and have a great day!

2 Likes

Regarding the classes, you’re right, some elements have dynamic classes, which can be changed after the widget updates. We’ll also try to release static classed for all elements, to make a customization process more stable.

Thank you so much for the feedback!

1 Like

Regarding the classes. Well, that kind of defeats the purpose of the custom CSS field now, doesn’t it? :neutral_face:

2 Likes

The thing is that just some of the elements have dynamic classes, most of them are static. Could you please specify which elements you’d like to target? I’ll be happy to double-check it for you :slightly_smiling_face:

1 Like

Hi Max,

Thanks for your response. It’s hard to say now that everything is working. It’s also possible that I initially targeted a dynamic class when it was possible to target a static one. However, if I notice a class change again, I will let you know! :slight_smile:

2 Likes

I have a clear example to share. It appears that Google Reviews has been updated, as the custom code I initially targeted:

.gDBkJm
.bXlyoP
.VotwT
.fTmTVa
.Icon__IconContainer-sc-629db400-0.kqkWxt.es-source-image.BadgeSources__StyledSourceImage-sc-f7cf074f-1.JcgNM.es-badge-sources-item.es-google-icon svg

has now changed to the following classes:

.jyhLqG
.jAReKz
.koLdkT
.cevyPN
.Icon__IconContainer-sc-11wrh3u-0.jcjNTh.es-source-image.BadgeSources__StyledSourceImage-sc-195r28q-1.kSvaHt.es-badge-sources-item.es-google-icon svg

As a result, I had to manually review, filter, and update the classes again. If I have to repeat this process daily, using this widget becomes impractical due to the excessive maintenance required. Is it not possible to leave the classes like they are?

Thank you.

2 Likes

That being said, my calculator contains a significant amount of custom CSS and JavaScript, and I am about to launch major, high-investment campaigns. If these classes continue to change unexpectedly, it could completely disrupt my lead form, resulting in a disastrous outcome.

I would appreciate your advice on how to best handle this situation.

Is there really no way to maintain consistent class names, or at least provide an early notification when changes are planned, so I can prepare and implement updates quickly?

To be honest, I am unsure how to proceed under these circumstances and would greatly value your guidance.

Thank you in advance.

1 Like

Got it, thanks!

All these elements also have static classes. For example:

.jyhLqG is es-badge-container

.jAReKz is es-badge-total-reviews

.koLdkT is es-rating-value

.cevyPN is es-rating-stars-item-filled

The static classes in Google Reviews start with es (it’s a native Elfsight class) and are located next to the dynamic classes you were using


Calculator widget doesn’t have classes with es, but they are also static. For example, in your widget, you used a dynamic class bDRTIl. However, this element also has a static class FormFieldLayout__Label-sc

Thus, if the widget elements have classes starting with es (like in Google Reviews), please use them in your customizations.

If the widget elements don’t have classes with es, please use the part from class= to sc, like in the example above.

We also have a CSS Codes category, where you can find the most popular solutions for different apps. However, if you’re facing difficulties with the customization, finding the correct class, please let us know. We’ll gladly help :slightly_smiling_face:

2 Likes

Understood, many thanks. I will need to take the time to thoroughly review and update everything in order to implement a permanent solution.

Thank you again for your response and for providing the example.

2 Likes

Great, if anything else comes up, we’ll be delighted to help :wink:

1 Like

Hi Max,

I’ve updated my custom CSS and JavaScript today like this:

[class^=“cta__Container-sc-”] {

I thinks it’s set up in a way that it should continue to work after updates.

But i’m having trouble targeting the main header of the result block, especially because of the dynamic suffixes. Is there a permanent way to target this top header specifically?

Thanks in advance!

2 Likes

Hi there, @D_C :waving_hand:

Could you please provide me with a screenshot of the part in the result header you’d like to target?

1 Like

It’s basically the following:

typography__Container-sc-1n2bij5-0 eIUJDI

The problem is that if I don’t use the eIUJDI class, it also targets other elements. But even with just typography__Container-sc-1n2bij5-0, there’s still a dynamic suffix at the end, which makes it unreliable.

if I don’t use the eIUJDI class, it also targets other elements.:

2 Likes

Yep, unfortunately, this part doesn’t have a unique ID, and the only solution is to use the class with the dynamic suffix. I am really sorry :pensive_face:

Please let me know if this explains things or if you have any question left.

1 Like