Title: Setting the background color using !important makes editing impossible Last modified: July 26, 2024 --- # Setting the background color using !important makes editing impossible * Resolved [Tatitas](https://wordpress.org/support/users/taiswebsites/) * (@taiswebsites) * [1 year, 9 months ago](https://wordpress.org/support/topic/background-color-using-important-doing-editing-impossible/) * Hi guys, * In version 1.8.9.6, a background hover was added to the submit button using ! important, which makes it impossible to customize the css. Could you revert this change? I have a purple website with the submit button hover in blue šŸ˜€ * I used rollback to version 1.8.9.5 and the color returned to normal. * `div.wpforms-container-full input[type=submit]:hover, div.wpforms-container-full input[type=submit]:active, div.wpforms-container-full button[type=submit]:hover, div.wpforms-container-full button[type=submit]:active, div.wpforms-container- full .wpforms-page-button:hover, div.wpforms-container-full .wpforms-page-button: active, .wp-core-ui div.wpforms-container-full input[type=submit]:hover, .wp- core-ui div.wpforms-container-full input[type=submit]:active, .wp-core-ui div. wpforms-container-full button[type=submit]:hover, .wp-core-ui div.wpforms-container- full button[type=submit]:active, .wp-core-ui div.wpforms-container-full .wpforms- page-button:hover, .wp-core-ui div.wpforms-container-full .wpforms-page-button: active { linear-gradient(0deg, rgba(0,0,0,0.2), rgba(0,0,0,0.2)),var(--wpforms- button-background-color-alt, var(--wpforms-button-background-color)) **!important**}` * Thanks! Viewing 15 replies - 1 through 15 (of 17 total) 1 [2](https://wordpress.org/support/topic/background-color-using-important-doing-editing-impossible/page/2/?output_format=md) [ā†’](https://wordpress.org/support/topic/background-color-using-important-doing-editing-impossible/page/2/?output_format=md) * Plugin Support [Ralden Souza](https://wordpress.org/support/users/rsouzaam/) * (@rsouzaam) * [1 year, 9 months ago](https://wordpress.org/support/topic/background-color-using-important-doing-editing-impossible/#post-17915358) * Hi [@taiswebsites](https://wordpress.org/support/users/taiswebsites/), * Thanks for reaching out and reporting this issue! * A report has been created about this issue to notify ourĀ development team about it. I apologize for the inconvenience in the meantime and if I canā€™t provide an ETA when a fix will be released. * However, Iā€™ll make sure to message you as soon as I have any updates regarding a release that addresses this issue. * In the meantime, if youā€™d like to update to WPForms Lite 1.8.9.6, you can override the hover styles by making your CSS more specific. Hereā€™s an example: * ```wp-block-code #wpforms-submit-540:hover { background: #aad113 !important;} ``` * Just replace ā€œ540ā€ with your Form ID in this CSS snippet. And in case it helps, hereā€™s a tutorial on [how to add custom CSS like this to your site](https://wpforms.com/developers/how-to-add-custom-css-styles-for-wpforms/). * Thanks! * Thread Starter [Tatitas](https://wordpress.org/support/users/taiswebsites/) * (@taiswebsites) * [1 year, 9 months ago](https://wordpress.org/support/topic/background-color-using-important-doing-editing-impossible/#post-17915467) * Thank you for the reply. * I have many forms and websites, so it would be impossible to create CSS for each form specifically. Iā€™ll wait for the update with the correction. * Plugin Support [Ralden Souza](https://wordpress.org/support/users/rsouzaam/) * (@rsouzaam) * [1 year, 9 months ago](https://wordpress.org/support/topic/background-color-using-important-doing-editing-impossible/#post-17919037) * Hi [@taiswebsites](https://wordpress.org/support/users/taiswebsites/), * Thanks for letting me know, and I completely understand your situation. * As soon as I have any updates on when a fix will be released, Iā€™ll be sure to let you know. * Thanks! * Plugin Support [Ralden Souza](https://wordpress.org/support/users/rsouzaam/) * (@rsouzaam) * [1 year, 8 months ago](https://wordpress.org/support/topic/background-color-using-important-doing-editing-impossible/#post-17947222) * Hi [@taiswebsites](https://wordpress.org/support/users/taiswebsites/), * I wanted to let you know that we are working on resolving the issue with **WPForms Lite 1.9.1**. * Iā€™ll keep track of this topic and make sure to send you an update as soon as the fix is released. * If you have any questions in the meantime, please feel free to reach out. * Thanks! * Thread Starter [Tatitas](https://wordpress.org/support/users/taiswebsites/) * (@taiswebsites) * [1 year, 8 months ago](https://wordpress.org/support/topic/background-color-using-important-doing-editing-impossible/#post-17952480) * Hi, [@rsouzaam](https://wordpress.org/support/users/rsouzaam/) * I canā€™t wait for you to fix this small bug. Thank you, and I will continue to wait! Have a nice day. * Plugin Support [Ralden Souza](https://wordpress.org/support/users/rsouzaam/) * (@rsouzaam) * [1 year, 8 months ago](https://wordpress.org/support/topic/background-color-using-important-doing-editing-impossible/#post-17956600) * Hi [@taiswebsites](https://wordpress.org/support/users/taiswebsites/), * Thank you for your understanding and patience while we work to fix the issue. * As soon as the new version that resolves the issue is released, I will send you an update. * Thanks, and have a fantastic day! * Thread Starter [Tatitas](https://wordpress.org/support/users/taiswebsites/) * (@taiswebsites) * [1 year, 8 months ago](https://wordpress.org/support/topic/background-color-using-important-doing-editing-impossible/#post-18005576) * Hello, [@rsouzaam](https://wordpress.org/support/users/rsouzaam/) * We havenā€™t had an update on this issue yet. Itā€™s taking too long, and I need to deliver projects with version rollbacks, which isnā€™t ideal. Do you have an estimated date for the solution? * Another issue has appeared with JavaScript on all of my clientsā€™ contact forms. I would also like to know if this will be resolved in the current version of the color fix. Attached is a screenshot of the JavaScript error: [https://tatitaswebsites.com.br/wp-content/uploads/error-javascript.png](https://tatitaswebsites.com.br/wp-content/uploads/error-javascript.png) Iā€™m using Elementor Free on the latest version and the WP Forms Widget from ElementsKit Lite Free on the latest version. * Thanks! * Plugin Support [Ralden Souza](https://wordpress.org/support/users/rsouzaam/) * (@rsouzaam) * [1 year, 7 months ago](https://wordpress.org/support/topic/background-color-using-important-doing-editing-impossible/#post-18010164) * Hi [@taiswebsites](https://wordpress.org/support/users/taiswebsites/), * We expect to release **WPForms Lite 1.9.1** by the first week of October. * If youā€™d like to fix the issue right now, you can use CSS Variables. Hereā€™s a CSS snippet to help you with that: * ```wp-block-code :root { --wpforms-button-background-color-mycustom: #ff0000;}div.wpforms-container-full input[type=submit]:hover, div.wpforms-container-full input[type=submit]:active, div.wpforms-container-full button[type=submit]:hover, div.wpforms-container-full button[type=submit]:active, div.wpforms-container-full .wpforms-page-button:hover, div.wpforms-container-full .wpforms-page-button:active, .wp-core-ui div.wpforms-container-full input[type=submit]:hover, .wp-core-ui div.wpforms-container-full input[type=submit]:active, .wp-core-ui div.wpforms-container-full button[type=submit]:hover, .wp-core-ui div.wpforms-container-full button[type=submit]:active, .wp-core-ui div.wpforms-container-full .wpforms-page-button:hover, .wp-core-ui div.wpforms-container-full .wpforms-page-button:active { background-color: var( --wpforms-button-background-color-mycustom ) !important;} ``` * Then, you can replace `#ff0000` with any color of your choice. * Regarding the alert that says, ā€œPlease enable JavaScript in your browser to complete this formā€, could you please share the URL to the form where youā€™re experiencing this issue? This will help me provide you with more information. * Additionally, we always recommend using our [WPForms widget for Elementor](https://wpforms.com/docs/how-to-add-wpforms-to-an-elementor-page/). Iā€™d like to ask you to create a test page using both the WPForms widget from ElementsKit and our WPForms widget. This way, I can check if the JavaScript issue occurs with both widgets. * Thanks! * Thread Starter [Tatitas](https://wordpress.org/support/users/taiswebsites/) * (@taiswebsites) * [1 year, 7 months ago](https://wordpress.org/support/topic/background-color-using-important-doing-editing-impossible/#post-18010271) * Hi, [@rsouzaam](https://wordpress.org/support/users/rsouzaam/) * Thank you for providing a date for the version update. * I have always used the ElementsKit Lite plugin because I use it for multiple things on websites, such as headers, footers, WPForms, and other widgets. I donā€™t like installing plugins just to use a contact form. I believe that a recent update might have caused this problem. * I have several sites with this issue. Here are some examples: **(When you open the site, the form will display without a JavaScript error. Refresh the page with F5, and the error will appear)**[https://morandonagringa.tatitas.com.br/contato/](https://morandonagringa.tatitas.com.br/contato/) [https://iaut.tatitaswebsites.com.br/fale-com-a-iaut/](https://iaut.tatitaswebsites.com.br/fale-com-a-iaut/) [https://iterapiasmanipulativas.tatitas.com.br/contato/](https://iterapiasmanipulativas.tatitas.com.br/contato/) [https://dallasound.tatitas.com.br/atendimento-dalla-sound/](https://dallasound.tatitas.com.br/atendimento-dalla-sound/) * Thank you! * Plugin Support [Ralden Souza](https://wordpress.org/support/users/rsouzaam/) * (@rsouzaam) * [1 year, 7 months ago](https://wordpress.org/support/topic/background-color-using-important-doing-editing-impossible/#post-18012863) * Hi [@taiswebsites](https://wordpress.org/support/users/taiswebsites/), * Thanks for sharing the links! * I checked your forms and noticed that the essential JavaScript files for WPForms arenā€™t being loaded, as illustrated in [our guide here](https://wpforms.com/docs/how-to-troubleshoot-javascript-issues-in-wpforms/#identifying-js-issues). * For your reference, I created [this screencast](https://a.supportally.com/v/crE2EF). As you can see from my local site in the screencast, your sites should load the WPForms assets ([screenshot](https://a.supportally.com/i/ypxS3x)), but this is not happening. * Most of the time, this issue is caused by optimization plugins or JavaScript optimizations through server settings after activating features like: - Minify - Combine - Load Deferred (Asynchronously) * I recommend checking if youā€™re using an optimization plugin on your sites. Try disabling JavaScript optimizations and see if the issue persists. * If youā€™re not using an optimization plugin, please check your server settings to see if any optimization settings, like the PageSpeed module, are enabled. * Regarding this: ā€œI donā€™t like installing plugins just to use a contact formā€. Please know that our WPForms widget is available in Elementor when you use WPForms Lite, as described in [our guide here](https://wpforms.com/docs/how-to-add-wpforms-to-an-elementor-page/). * I hope this helps! * Thread Starter [Tatitas](https://wordpress.org/support/users/taiswebsites/) * (@taiswebsites) * [1 year, 7 months ago](https://wordpress.org/support/topic/background-color-using-important-doing-editing-impossible/#post-18013419) * Hi [@rsouzaam](https://wordpress.org/support/users/rsouzaam/) ! * Iā€™m not using any optimization plugins, and my web hosting doesnā€™t have any either. I donā€™t use the PageSpeed module. The only active plugins are Elementor, ElementsKit Lite, WPForms Lite, and Qi Addons for Elementor (somethings Premium Addons). It always worked normally until a recent version introduced this issue, and my clients are using different hosting providers. * My theme includes wp_footer(); as mentioned in your guide. Could it be a configuration issue in Elementor? Whenever a JavaScript error appears and I go to Elementor > Tools and regenerate the CSS + Sync the library, the problem disappears. * Thread Starter [Tatitas](https://wordpress.org/support/users/taiswebsites/) * (@taiswebsites) * [1 year, 7 months ago](https://wordpress.org/support/topic/background-color-using-important-doing-editing-impossible/#post-18013456) * Hello again [@rsouzaam](https://wordpress.org/support/users/rsouzaam/) I found the problem. Itā€™s always a standard for Elementor to use the element caching function; when I disabled this function, the plugin worked perfectly.Take a look at this video: [https://www.awesomescreenshot.com/video/31507985?key=99deaf025cd035856beb7924a8d8a05b](https://www.awesomescreenshot.com/video/31507985?key=99deaf025cd035856beb7924a8d8a05b) Will I always have to disable this function? It was never necessary before. * Plugin Support [Ralden Souza](https://wordpress.org/support/users/rsouzaam/) * (@rsouzaam) * [1 year, 7 months ago](https://wordpress.org/support/topic/background-color-using-important-doing-editing-impossible/#post-18017052) * Hi [@taiswebsites](https://wordpress.org/support/users/taiswebsites/), * Thank you so much for sharing those details! * However, I could not reproduce the issue using Elementor, ElementsKit, and the Elementor caching. For your reference, I created [this screencast](https://a.supportally.com/v/f1zE3z). * It appears that the issue might be related to the custom themes youā€™re using on your sites, particularly with the `wp_footer()` function. This function is crucial because many plugins, including WPForms, rely on it to load necessary assets on your site pages. If this function is missing or not working correctly, it can prevent WPForms assets from loading, leading to the JavaScript error youā€™re seeing. * From all the details shared so far, it appears that after the update, there was an error affecting your sites to load WPForms assets, and this issue might be related to the `wp_footer()` function. Regenerating the CSS and syncing the library resolved the issue, but, if you are using Elementor caching, it may be loading a version of the form page that still has the problem. * To address this issue, please check the duration configured with **Element Cache Expiration** in Elementor by navigating to **Elementor Ā» Settings Ā» Performance tab**. You can use these settings to clear Elementorā€™s caching. For detailed instructions, refer to the ā€œClearing your elementsā€™ cacheā€ section in this [Elementor guide](https://elementor.com/help/element-caching-help/). * In case the issue continues, I recommend following the steps in WPBeginnerā€™s detailed guide on [troubleshooting WordPress](https://www.wpbeginner.com/beginners-guide/beginners-guide-to-troubleshooting-wordpress-errors-step-by-step/). This guide provides a comprehensive approach to identifying and resolving issues that might be affecting your site. * I sincerely apologize for the inconvenience this issue has caused you, and I truly hope the details above can help to solve it. * Thanks! * Thread Starter [Tatitas](https://wordpress.org/support/users/taiswebsites/) * (@taiswebsites) * [1 year, 7 months ago](https://wordpress.org/support/topic/background-color-using-important-doing-editing-impossible/#post-18017698) * Well, my Element Cache Expiration was already set to 1 day. My wp_footer() is present and correctly implemented in my theme (I use Hello Elementor). As I mentioned, this issue started after an update. I will create a function to fix the problem on my own. Thanks for your help! * Plugin Support [Ralden Souza](https://wordpress.org/support/users/rsouzaam/) * (@rsouzaam) * [1 year, 7 months ago](https://wordpress.org/support/topic/background-color-using-important-doing-editing-impossible/#post-18019825) * Hi [@taiswebsites](https://wordpress.org/support/users/taiswebsites/), * I understand, and I hope your custom function helps address this unfamiliar issue. * Weā€™re currently investigating this issue related to Elementor caching and are working diligently to find the conflict. This will allow us to improve our code to avoid this issue in the future. Your detailed report has been incredibly helpful, and we appreciate it. * Also, I will make sure to send you a message when we release WPForms Lite 1.9.1, which will include a fix for the issue with the !important flag in the background color property. * Thanks! Viewing 15 replies - 1 through 15 (of 17 total) 1 [2](https://wordpress.org/support/topic/background-color-using-important-doing-editing-impossible/page/2/?output_format=md) [ā†’](https://wordpress.org/support/topic/background-color-using-important-doing-editing-impossible/page/2/?output_format=md) The topic ā€˜Setting the background color using !important makes editing impossibleā€™ is closed to new replies. * ![](https://ps.w.org/wpforms-lite/assets/icon.svg?rev=3254748) * [WPForms - Easy Form Builder for WordPress - Contact Forms, Payment Forms, Surveys, & More](https://wordpress.org/plugins/wpforms-lite/) * [Frequently Asked Questions](https://wordpress.org/plugins/wpforms-lite/#faq) * [Support Threads](https://wordpress.org/support/plugin/wpforms-lite/) * [Active Topics](https://wordpress.org/support/plugin/wpforms-lite/active/) * [Unresolved Topics](https://wordpress.org/support/plugin/wpforms-lite/unresolved/) * [Reviews](https://wordpress.org/support/plugin/wpforms-lite/reviews/) * 17 replies * 3 participants * Last reply from: [Tatitas](https://wordpress.org/support/users/taiswebsites/) * Last activity: [1 year, 7 months ago](https://wordpress.org/support/topic/background-color-using-important-doing-editing-impossible/page/2/#post-18039252) * Status: resolved