Title: Remove !important from CSS Last modified: December 13, 2020 --- # Remove !important from CSS * Resolved [Noah Hearle](https://wordpress.org/support/users/designextreme/) * (@designextreme) * [5 years, 5 months ago](https://wordpress.org/support/topic/remove-important-from-css/) * Please can you remove `!important` from the CSS in your plugin? I want to customise the styling and this interfers with the process. * If you want to ensure your plugin’s CSS is better adhered to, just use a parent class or classes so it will work with most themes. You’ve already done this, so just taking out `!important` will do the trick. * Thanks, * Noah - This topic was modified 5 years, 5 months ago by [Noah Hearle](https://wordpress.org/support/users/designextreme/). Reason: Last bit Viewing 15 replies - 1 through 15 (of 18 total) 1 [2](https://wordpress.org/support/topic/remove-important-from-css/page/2/?output_format=md) [→](https://wordpress.org/support/topic/remove-important-from-css/page/2/?output_format=md) * Thread Starter [Noah Hearle](https://wordpress.org/support/users/designextreme/) * (@designextreme) * [5 years, 5 months ago](https://wordpress.org/support/topic/remove-important-from-css/#post-13782791) * And, have an option of no fonts – so the theme’s font can be applied. * Thanks! * Plugin Author [WPKube](https://wordpress.org/support/users/wpkube/) * (@wpkube) * [5 years, 5 months ago](https://wordpress.org/support/topic/remove-important-from-css/#post-13785220) * Hi [@designextreme](https://wordpress.org/support/users/designextreme/) * Deeper targeting unfortunately wasn’t enough with some themes so the !important was applied to make sure things don’t end up looking broken. * What we could do is have 2 separate files, one with !important and the other without. * And it will work based on a constant value. So in a theme for example you can define a constant like COOL_TAG_CLOUD_CSS_IMPORTANT to false and it will load the version of the CSS without !important * Would that work for you? * The plugin has no settings page so at the moment we can’t add an option to switch between those (maybe later if we add a settings page for other things so we add that as well). * Thread Starter [Noah Hearle](https://wordpress.org/support/users/designextreme/) * (@designextreme) * [5 years, 5 months ago](https://wordpress.org/support/topic/remove-important-from-css/#post-13785949) * [@wpkube](https://wordpress.org/support/users/wpkube/) Not really… * If you try to battle against really badly written themes, then everyone will lose. Why not take them as the exception rather than the rule? Someone using a dodgy theme will probably have negative effects for all their plugins, not just this one; it’s maybe a sign not to use that theme. * Plugins are much better when they can be properly adapted to the appearance of the website (if the web designer knows about custom CSS or a Child theme). With the plugin’s CSS littered with this, it makes any customisation impossible. * Your styles work perfectly well with all the `!important` references removed. I’ve done this to my version of the plugin and it appears identical to before. * Perhaps you can do the opposite and have an option set to ..IMPORTANT with a positive value, then it will load the “completely inflexible” one? * Plugin Author [WPKube](https://wordpress.org/support/users/wpkube/) * (@wpkube) * [5 years, 5 months ago](https://wordpress.org/support/topic/remove-important-from-css/#post-13790488) * Hi [@designextreme](https://wordpress.org/support/users/designextreme/) * The user’s automatic assumption if a plugin doesn’t work as intended is that the plugin is broken. So they immediately disable, may give a low rating or submit a support request (which ends up with important rules). * They don’t see it as a sign that the theme might need to be changed. In the past 10 years of WP dev and support at least 50% of requests were issues caused by a 3rd party, but that’s unfortunately not how the users see it. * > Perhaps you can do the opposite and have an option set to ..IMPORTANT with > a positive value, then it will load the “completely inflexible” one? * Most users are not familiar with all this enough to modify PHP files (to set the constant). A settings page would work out for them but it’s an overkill for just one option. I think you’re a developer so I suggested the PHP constant approach since I believe you know how to do it. * It’s also a bit problematic to change the default behavior (of anything) at this point with 10,000+ active installs. If it were a new plugin, things would definitely be handled differently, I’m not a fan of !important either, but it’s the code I inherited. * Thread Starter [Noah Hearle](https://wordpress.org/support/users/designextreme/) * (@designextreme) * [5 years, 5 months ago](https://wordpress.org/support/topic/remove-important-from-css/#post-13791095) * [@wpkube](https://wordpress.org/support/users/wpkube/) I understand your arguments. Altering a plugin this way after so many installations could be a bad idea if some users have relied on the `!important` to override their theme’s (or other plugin’s) styling. * If you can implement the option as mentioned, this would be good. I will be able to enable it on my installation while maintaining updates. * Perhaps a more approachable and future-proof way to do this is: * – Use one style sheet – Have a checkbox in the widget called “Force styling”, set to on for existing users (i.e. not set) and unchecked for new users – If not set, use a different parent class with a group of styles that doesn’t apply`! important`. * The option may be better for advanced users as it will only load the applicable styling, rather than essentially double styles. * Please note the second post here about the fonts? * Thanks, * Noah * Thread Starter [Noah Hearle](https://wordpress.org/support/users/designextreme/) * (@designextreme) * [5 years, 5 months ago](https://wordpress.org/support/topic/remove-important-from-css/#post-13791796) * [@wpkube](https://wordpress.org/support/users/wpkube/) The “option” is something stored in the “options” table and not a PHP constant. You don’t need an options/ settings page – just the option stored in the database that can be modified by anyone with access to the database. * Plugin Author [WPKube](https://wordpress.org/support/users/wpkube/) * (@wpkube) * [5 years, 5 months ago](https://wordpress.org/support/topic/remove-important-from-css/#post-13796828) * [@designextreme](https://wordpress.org/support/users/designextreme/) * Both the constant and option value can be added. * Some might be able to modify PHP files but not work with the database (for example a developer hired to make changes, has FTP access but no database access). * As for the one CSS file with different container selector, that’s a good idea, thanks. * Two separate CSS files (only one loaded depending on whether it’s important or not) would be smaller but it’s not a lot of CSS so it doesn’t really matter. Better with the one CSS file and ability to switch between !important and regular in a widget option field. * Will get that sorted out either the end of this week or on Monday. * Plugin Author [WPKube](https://wordpress.org/support/users/wpkube/) * (@wpkube) * [5 years, 5 months ago](https://wordpress.org/support/topic/remove-important-from-css/#post-13843455) * Hi [@designextreme](https://wordpress.org/support/users/designextreme/) * Just released the update. Went with a PHP constant and also option value approach. * `define( 'COOL_TAG_CLOUD_IMPORTANT', false );` * or * `update_option( 'cool_tag_cloud_important', 'no' );` * or you can just add directly via phpMyAdmin. * – * It’s 2 files now. * If important is active cool-tag-cloud.css is loaded * If important is not active cool-tag-cloud-regular.css is loaded * So it only loads 1 file. * – * Did not go with the additional class approach because if we make a change to the current selectors in the CSS it would break CSS changes that users made ( using the original selectors). * Thread Starter [Noah Hearle](https://wordpress.org/support/users/designextreme/) * (@designextreme) * [5 years, 5 months ago](https://wordpress.org/support/topic/remove-important-from-css/#post-13843659) * Thanks, I can confirm that this works – I added the option using PHPMyAdmin. * There is some inline-_!important_ nastiness still there: * `
` * Also, can you look into that other request – having an option for no font (and similarly for other styles)? I want the theme’s font to be used here rather than“ Open Sans” or any of the other ones listed. * Plugin Author [WPKube](https://wordpress.org/support/users/wpkube/) * (@wpkube) * [5 years, 5 months ago](https://wordpress.org/support/topic/remove-important-from-css/#post-13847359) * Hi [@designextreme](https://wordpress.org/support/users/designextreme/) * You’re welcome. * Will remove that one as well, thanks. * As for the font, an additional option will be added so it doesn’t apply a specific font and instead inherits the one from the theme’s CSS rules. * Would this update be ok for next Monday? I’m just wrapping up some final things today and I’m off for 31st Dec and 1st Jan, followed by the weekend, so back to work on Monday. * Happy Holidays. * [webstoria](https://wordpress.org/support/users/webstoria/) * (@webstoria) * [5 years, 4 months ago](https://wordpress.org/support/topic/remove-important-from-css/#post-13942034) * Can you tell me how to do this via phpMyadmin because I can’t find it * Thread Starter [Noah Hearle](https://wordpress.org/support/users/designextreme/) * (@designextreme) * [5 years, 4 months ago](https://wordpress.org/support/topic/remove-important-from-css/#post-13942360) * [@webstoria](https://wordpress.org/support/users/webstoria/) In the **wp_options** table (or a similar name), add the following: - **option_name:** `cool_tag_cloud_important` - **option_value:** `no` - **autoload:** `yes` * Plugin Author [WPKube](https://wordpress.org/support/users/wpkube/) * (@wpkube) * [5 years, 4 months ago](https://wordpress.org/support/topic/remove-important-from-css/#post-13942755) * [@webstoria](https://wordpress.org/support/users/webstoria/) * You could also just add this in functions.php of your theme: * `update_option( 'cool_tag_cloud_important', 'no' );` * Then load any page, the function will do it’s thing and then you can remove that code from functions.php * Thread Starter [Noah Hearle](https://wordpress.org/support/users/designextreme/) * (@designextreme) * [5 years, 3 months ago](https://wordpress.org/support/topic/remove-important-from-css/#post-13987895) * [@wpkube](https://wordpress.org/support/users/wpkube/) I’ve made an SVG version of the design – this will work perfectly with higher resolution devices because it will not lose quality. * [[ * ``` .parent-element .cool-tag-cloud .tag-cloud-link { transition: 0.3s color linear; color: rgba(255, 255, 255, 0.9); } .parent-element .cool-tag-cloud .tag-cloud-link:hover { color: #FFFFFF; } .parent-element .cool-tag-cloud .ctcsilver .ctcleft a, .parent-element .cool-tag-cloud .ctcsilver .ctcleft a::after, .parent-element .cool-tag-cloud .ctcsilver .ctcleft .tag-cloud-link::after, .parent-element .cool-tag-cloud .ctcsilver .ctcleft a:hover, .parent-element .cool-tag-cloud .ctcsilver .ctcleft a:hover::after, .parent-element .cool-tag-cloud .ctcsilver .ctcleft .tag-cloud-link:hover::after { background-image: url(/wp-content/uploads/Tag-Background.svg); } .parent-element .cool-tag-cloud .ctcsilver .ctcleft a { margin-left: -5px; padding-right: 5px; margin: 0 0.7em 0 0; line-height: 23px; } .parent-element .cool-tag-cloud .ctcsilver .ctcleft a::after, .parent-element .cool-tag-cloud .ctcsilver .ctcleft .tag-cloud-link::after, .parent-element .cool-tag-cloud .ctcsilver .ctcleft a:hover::after, .parent-element .cool-tag-cloud .ctcsilver .ctcleft .tag-cloud-link:hover::after { background-position-x: right; width: 5px; right: -5px; opacity: 1; } ``` * And the SVG as XML: * ``` ``` * Alternatively, you can include the SVG embedded into the CSS: * ``` .parent-element .cool-tag-cloud .ctcsilver .ctcleft a, .parent-element .cool-tag-cloud .ctcsilver .ctcleft a::after, .parent-element .cool-tag-cloud .ctcsilver .ctcleft .tag-cloud-link::after, .parent-element .cool-tag-cloud .ctcsilver .ctcleft a:hover, .parent-element .cool-tag-cloud .ctcsilver .ctcleft a:hover::after, .parent-element .cool-tag-cloud .ctcsilver .ctcleft .tag-cloud-link:hover::after { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MDIiIGhlaWdodD0iNTAiPgogIDxwYXRoIG9wYWNpdHk9Ii40IiBmaWxsPSIjRENEQ0RDIiBzdHJva2U9IiNGRkYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBkPSJNMzk2LjUyMSAyNi41SDE0LjcxNWwtMTMuNDA2IDExIDEzLjQwNiAxMUgzOTYuNWMzLS4yMDQgNC0yLjExNyA0LTQuMzQ4VjMwLjc2YzAtMi4zOTYtMS41ODMtNC4yNi0zLjk3OS00LjI2ek0xMi4zMTMgNDAuMjVhMy4xODggMy4xODggMCAxMTAtNi4zNzYgMy4xODggMy4xODggMCAwMTAgNi4zNzZ6Ii8+CiAgPHBhdGggb3BhY2l0eT0iLjMiIGZpbGw9IiNEQ0RDREMiIHN0cm9rZT0iI0ZGRiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIGQ9Ik0zOTYuNTIxIDEuNUgxNC43MTVsLTEzLjQwNiAxMSAxMy40MDYgMTFIMzk2LjVjMy0uMjA0IDQtMi4xMTcgNC00LjM0OFY1Ljc2YzAtMi4zOTYtMS41ODMtNC4yNi0zLjk3OS00LjI2ek0xMi4zMTMgMTUuMjVhMy4xODggMy4xODggMCAxMTAtNi4zNzYgMy4xODggMy4xODggMCAwMTAgNi4zNzZ6Ii8+CiAgPHBhdGggb3BhY2l0eT0iLjIiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI0ZGRiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIGQ9Ik0zOTYuNTIxIDEuNUgxNC43MTVsLTEzLjQwNiAxMSAxMy40MDYgMTFIMzk2LjVjMyAwIDQtMi4yNDIgNC00LjQ3M1Y1LjYzNWMwLTIuMzk2LTEuNTgzLTQuMTM1LTMuOTc5LTQuMTM1ek0xMi4zMTMgMTUuMTI1YTMuMTg4IDMuMTg4IDAgMTEwLTYuMzc2IDMuMTg4IDMuMTg4IDAgMDEwIDYuMzc2ek0zOTYuNTIxIDI2LjVIMTQuNzE1bC0xMy40MDYgMTEgMTMuNDA2IDExSDM5Ni41YzMgMCA0LTEuODY3IDQtNC4wOThWMzEuMDFjMC0yLjM5Ni0xLjU4My00LjUxLTMuOTc5LTQuNTF6bS0zODQuMjA4IDE0YTMuMTg4IDMuMTg4IDAgMTEwLTYuMzc2IDMuMTg4IDMuMTg4IDAgMDEwIDYuMzc2eiIvPgo8L3N2Zz4="); } ``` * The _!important_ must be taken off and this one works better with a dark background. You can edited the stroke and fill to make it a dark colour (for light backgrounds). * Incidentally, I have some JavaScript that can change the SVG to _any colour_ or even reference actual background colours in the CSS. 🙂 - This reply was modified 5 years, 3 months ago by [Noah Hearle](https://wordpress.org/support/users/designextreme/). Reason: Last paragraph - This reply was modified 5 years, 3 months ago by [Noah Hearle](https://wordpress.org/support/users/designextreme/). Reason: CSS with embedded image * Plugin Author [WPKube](https://wordpress.org/support/users/wpkube/) * (@wpkube) * [5 years, 3 months ago](https://wordpress.org/support/topic/remove-important-from-css/#post-13990394) * Hi [@designextreme](https://wordpress.org/support/users/designextreme/) * Thank you for helping out. * Will give that a test and it should end up in the next update. Viewing 15 replies - 1 through 15 (of 18 total) 1 [2](https://wordpress.org/support/topic/remove-important-from-css/page/2/?output_format=md) [→](https://wordpress.org/support/topic/remove-important-from-css/page/2/?output_format=md) The topic ‘Remove !important from CSS’ is closed to new replies. * ![](https://s.w.org/plugins/geopattern-icon/cool-tag-cloud_f8ebd4.svg) * [Cool Tag Cloud](https://wordpress.org/plugins/cool-tag-cloud/) * [Frequently Asked Questions](https://wordpress.org/plugins/cool-tag-cloud/#faq) * [Support Threads](https://wordpress.org/support/plugin/cool-tag-cloud/) * [Active Topics](https://wordpress.org/support/plugin/cool-tag-cloud/active/) * [Unresolved Topics](https://wordpress.org/support/plugin/cool-tag-cloud/unresolved/) * [Reviews](https://wordpress.org/support/plugin/cool-tag-cloud/reviews/) ## Tags * [css](https://wordpress.org/support/topic-tag/css/) * [style sheet](https://wordpress.org/support/topic-tag/style-sheet/) * 18 replies * 3 participants * Last reply from: [Noah Hearle](https://wordpress.org/support/users/designextreme/) * Last activity: [5 years, 3 months ago](https://wordpress.org/support/topic/remove-important-from-css/page/2/#post-14069307) * Status: resolved