And, have an option of no fonts – so the theme’s font can be applied.
Thanks!
Plugin Author
WPKube
(@wpkube)
Hi @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).
@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
(@wpkube)
Hi @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.
@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
@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
(@wpkube)
@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
(@wpkube)
Hi @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).
Thanks, I can confirm that this works – I added the option using PHPMyAdmin.
There is some inline-!important nastiness still there:
<div class="opensans" style="text-transform:none!important;">
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
(@wpkube)
Hi @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.
Can you tell me how to do this via phpMyadmin because I can’t find it
@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
(@wpkube)
@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
@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:
<svg xmlns="http://www.w3.org/2000/svg" width="402" height="50">
<path opacity=".4" fill="#DCDCDC" stroke="#FFF" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M396.521 26.5H14.715l-13.406 11 13.406 11H396.5c3-.204 4-2.117 4-4.348V30.76c0-2.396-1.583-4.26-3.979-4.26zM12.313 40.25a3.188 3.188 0 110-6.376 3.188 3.188 0 010 6.376z"/>
<path opacity=".3" fill="#DCDCDC" stroke="#FFF" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M396.521 1.5H14.715l-13.406 11 13.406 11H396.5c3-.204 4-2.117 4-4.348V5.76c0-2.396-1.583-4.26-3.979-4.26zM12.313 15.25a3.188 3.188 0 110-6.376 3.188 3.188 0 010 6.376z"/>
<path opacity=".2" fill="none" stroke="#FFF" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M396.521 1.5H14.715l-13.406 11 13.406 11H396.5c3 0 4-2.242 4-4.473V5.635c0-2.396-1.583-4.135-3.979-4.135zM12.313 15.125a3.188 3.188 0 110-6.376 3.188 3.188 0 010 6.376zM396.521 26.5H14.715l-13.406 11 13.406 11H396.5c3 0 4-1.867 4-4.098V31.01c0-2.396-1.583-4.51-3.979-4.51zm-384.208 14a3.188 3.188 0 110-6.376 3.188 3.188 0 010 6.376z"/>
</svg>
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, 2 months ago by
Noah Hearle. Reason: Last paragraph
-
This reply was modified 5 years, 2 months ago by Noah Hearle. Reason: CSS with embedded image
Plugin Author
WPKube
(@wpkube)
Hi @designextreme
Thank you for helping out.
Will give that a test and it should end up in the next update.
