CSS conflict

Hi @naratt

I hope you’re well today!

You are right, it’s theme that overrides some of Forminator default styles. Unfortunately, currently CSS is optimized (using Asset Clean-up plugin) so it’s hard to say for sure if it’s a matter of theme itself or that optimization – sometimes that can be an issue if it e.g. changes the way/order CSS is loaded/applied to the site.

The theme that you are using is a premium theme and I don’t have any access to it to test this on my own test site, I’m afraid.

That said, first we’d need to make sure if it’s really theme or if it’s related to optimization. Have you tried to temporarily disable either CSS optimization options or Asset Cleanup plugin entirely? If not, could you give it a try, then clear caches on site/server (if there is any) and check if that helps?

If not, we’ll know it’s theme and not optimization so we’ll need then to find a way to “force override” these theme styles so please test this (as described above) and let me know about results, please.

Kind regards,
Adam

Thanks, I disabled all optimization plugins and the problem still exists.

I then tested in troubleshooting mode, no optimization, no cache, no other plugins. The problem happened right after i activated the main theme, not even child one. It’s fine with other themes, also fine with this theme’s older version (electro 2.7.3).
So, it’s quite clear that the theme itself causes conflicts.

I contacted them before but they are not quite helpful and slow. Could you please help to force override ?
Nara

I’m also starting to use Hustle plugin and things will be more complicated with this problem.

Hi @naratt

I tested the shared page and I got a forbidden page.

Is there any specific location that the website is allowed?

I’m also starting to use Hustle plugin and things will be more complicated with this problem.

Are you getting the similar issue on Hustle?

Could you open a ticket in the Hustle forum, we keep the threads split to give better support.

Best Regards
Patrick Freitas

Is there any specific location that the website is allowed?

Do you mean this product page ?
https://www.zoomcamera.net/shop/accessories/lens-accessories/lens-hood-et-65-ii-for-canon/
Sorry, i set it private, just fix now, you can check again.
You can also check on this page.
https://www.zoomcamera.net/%E0%B8%95%E0%B8%B4%E0%B8%94%E0%B8%95%E0%B9%88%E0%B8%AD%E0%B9%80%E0%B8%A3%E0%B8%B2-%E0%B8%AA%E0%B8%B2%E0%B8%82%E0%B8%B2%E0%B8%82%E0%B8%AD%E0%B8%87-zoomcamera/
Same problem but i tried to use custom CSS to match Flat style. However, it doesn’t work well.

Are you getting the similar issue on Hustle?

No, i haven’t start using Hustle yet. i planned to test first but since Hustle share the same styling method, i think it might be the same.

Hi @naratt

Thank you for the links and sorry for the delay here.

It is happening because the theme has a Selector for select2 too which is stronger than the Forminator, so we need to add a custom CSS with a bit stronger selector:

Can you please try this on Forminator > Form > Appearance > Custom CSS or WordPress > customise > Appearance > Custom CSS

.forminator-ui .select2-container .select2-selection.select2-selection--single{
    border-radius: 0;
}

https://monosnap.com/file/pzl8vQ3t76gvzpyJLH28EMLnrVnFjo

Let us know the result you got.
Best Regards
Patrick Freitas

I also asked theme support, they gave me this custom CSS. it seems to work fine except the select2. The page you’re looking is after i applied their following code :

.forminator-design--default input[type=text]:not(.form-control):not(input[type=email]):not(input[type=url]):not(input[type=password]):not(input[type=search]):not(textarea):not(.input-text) {
    padding: 9px;
    line-height: 1.3em;
    border-radius: 0;
}

.forminator-design--material input.forminator-field--phone,
.forminator-design--bold input.forminator-field--phone,
.forminator-design--flat input.forminator-field--phone,
.forminator-design--default input.forminator-field--phone {
    padding-left: 51px !important;
}

.forminator-design--flat input[type=text]:not(.form-control):not(input[type=email]):not(input[type=url]):not(input[type=password]):not(input[type=search]):not(textarea):not(.input-text) {
    padding: 9px;
    line-height: 1.3em;
    border-radius: 0;
    border: none;
}

.forminator-design--bold input[type=text]:not(.form-control):not(input[type=email]):not(input[type=url]):not(input[type=password]):not(input[type=search]):not(textarea):not(.input-text) {
    padding: 9px;
    line-height: 1.3em;
    border-radius: 0;
    border: 3px solid;
}

.forminator-design--material input[type=text]:not(.form-control):not(input[type=email]):not(input[type=url]):not(input[type=password]):not(input[type=search]):not(textarea):not(.input-text) {
    border-left: none;
    border-right: none;
    border-top: none;
    border-radius: 0;
    padding: 9px;
    line-height: 1.3em;
}

.forminator-design--material .forminator-field.forminator-is_active input.forminator-field--phone {
    opacity: 1;
}

.forminator-design--material .forminator-field input.forminator-field--phone {
    opacity: 0;
}

I would like you to confirm if this code is fine for all Forminators style, if not, please suggest the complete one.

Hello @naratt ,

I’m sorry for the delay. Seems that part of the code is for the all the type of designs in the Forminator. The only rules for the phone field are for material design. Do you want the same for all the other types? Is that correct?

kind regards,
Kasia

Hello @naratt ,

We haven’t heard from you for a while now, so it looks like you no longer need our assistance.

Please feel free to re-open this ticket if needed.

kind regards,
Kasia