Title: CSS conflict Last modified: May 3, 2021 --- # CSS conflict * Resolved [naratt](https://wordpress.org/support/users/naratt/) * (@naratt) * [5 years ago](https://wordpress.org/support/topic/css-conflict-36/) * When embeded, some forminator fields display differently than others. It might conflict with my custom CSS. However, even i choose design type as Flat (not None, which will inherit styles from my theme). * > [View post on imgur.com](https://imgur.com/EWa6swZ) * > [View post on imgur.com](https://imgur.com/VFVO5ML) * How to fix ? i want it to display according to your style, not inherit from my custom css. * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fcss-conflict-36%2F%3Foutput_format%3Dmd&locale=en_US) to see the link]_ Viewing 9 replies - 1 through 9 (of 9 total) * Plugin Support [Laura – WPMU DEV Support](https://wordpress.org/support/users/wpmudev-support8/) * (@wpmudev-support8) * [5 years ago](https://wordpress.org/support/topic/css-conflict-36/#post-14393409) * Hi [@naratt](https://wordpress.org/support/users/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 * Thread Starter [naratt](https://wordpress.org/support/users/naratt/) * (@naratt) * [5 years ago](https://wordpress.org/support/topic/css-conflict-36/#post-14395575) * 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 * Thread Starter [naratt](https://wordpress.org/support/users/naratt/) * (@naratt) * [5 years ago](https://wordpress.org/support/topic/css-conflict-36/#post-14407997) * I’m also starting to use Hustle plugin and things will be more complicated with this problem. * Plugin Support [Patrick – WPMU DEV Support](https://wordpress.org/support/users/wpmudevsupport12/) * (@wpmudevsupport12) * [5 years ago](https://wordpress.org/support/topic/css-conflict-36/#post-14417566) * Hi [@naratt](https://wordpress.org/support/users/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 * Thread Starter [naratt](https://wordpress.org/support/users/naratt/) * (@naratt) * [5 years ago](https://wordpress.org/support/topic/css-conflict-36/#post-14420981) * > 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/](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/](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. * Plugin Support [Patrick – WPMU DEV Support](https://wordpress.org/support/users/wpmudevsupport12/) * (@wpmudevsupport12) * [4 years, 11 months ago](https://wordpress.org/support/topic/css-conflict-36/#post-14498397) * Hi [@naratt](https://wordpress.org/support/users/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](https://monosnap.com/file/pzl8vQ3t76gvzpyJLH28EMLnrVnFjo) * Let us know the result you got. Best Regards Patrick Freitas * Thread Starter [naratt](https://wordpress.org/support/users/naratt/) * (@naratt) * [4 years, 11 months ago](https://wordpress.org/support/topic/css-conflict-36/#post-14498874) * 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. * Plugin Support [Amin – WPMU DEV Support](https://wordpress.org/support/users/wpmudev-support2/) * (@wpmudev-support2) * [4 years, 11 months ago](https://wordpress.org/support/topic/css-conflict-36/#post-14549392) * Hello [@naratt](https://wordpress.org/support/users/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 * Plugin Support [Amin – WPMU DEV Support](https://wordpress.org/support/users/wpmudev-support2/) * (@wpmudev-support2) * [4 years, 11 months ago](https://wordpress.org/support/topic/css-conflict-36/#post-14576362) * Hello [@naratt](https://wordpress.org/support/users/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 Viewing 9 replies - 1 through 9 (of 9 total) The topic ‘CSS conflict’ is closed to new replies. * ![](https://ps.w.org/forminator/assets/icon-256x256.gif?rev=3443182) * [Forminator Forms – Contact Form, Payment Form & Custom Form Builder](https://wordpress.org/plugins/forminator/) * [Frequently Asked Questions](https://wordpress.org/plugins/forminator/#faq) * [Support Threads](https://wordpress.org/support/plugin/forminator/) * [Active Topics](https://wordpress.org/support/plugin/forminator/active/) * [Unresolved Topics](https://wordpress.org/support/plugin/forminator/unresolved/) * [Reviews](https://wordpress.org/support/plugin/forminator/reviews/) * 9 replies * 4 participants * Last reply from: [Amin – WPMU DEV Support](https://wordpress.org/support/users/wpmudev-support2/) * Last activity: [4 years, 11 months ago](https://wordpress.org/support/topic/css-conflict-36/#post-14576362) * Status: resolved