Hi Saskia,
you could simply use the WordPress Customizer (Design -> Customizer) to add custom CSS there. CSS added there will always be loaded after the ones from themes and plugins.
You will sometimes still need an !important here and there, but that is just because of some of the big themes out there define stuff like a { color: #red !important } and there is simply no other way than to add an !important ourselves to avoid having to tell people that our buttons being broken is because of the theme they use…
Cheers
JP
Hi Jan-Peter,
the problem with this is that sometimes !important is used in the shariff CSS as well (see e.g. the background-color in .shariff a:hover). The Customizer code is inserted in the HTML <head> and gets overwritten by the shariff CSS rules in the footer.
As a workaround you can use the wp_footer action hook with low priority to write things into the footer that appear after the shariff CSS. Putting this into functions.php worked for me:
function overwrite_shariff_css() {
echo "<style>shariff a:hover { background-color: #ffed00 !important; }</style>\r";
}
add_action('wp_footer', 'overwrite_shariff_css', 100);
Great plugin btw!
Best,
Chris
Hej Chris,
thanks for your input.
In the meantime I already found a solution to my issue. Thanks for your solution though!
Best
Saskia
P.S:: @Jan-Peter, we are working with an adaption of TwentyFourteen. So no weird theme style behaviour. It is just Shariff which loads its CSS in some absolute way.
Hi Chris (@soela),
like I wrote above the use of !important is ugly, but cannot be avoided since otherwise Shariff wouldn’t work out of the box with some of the most bought themes out there. The amount of support request that caused it without !important and then trying to explain to people that it is actually the fault of their theme, was simply just not worth the time.
Nevertheless: There is always a solution. Shariff does not add it’s scripts and styles manually and instead uses the WordPress way, meaning WordPress handles all of that. Sometimes optimization plugins get in the way of that by moving stuff around (like Autoptimize, W3 Total Cache, WPRocket and so on). So sometimes problems can be solved by adding /wp-content/plugins/shariff/css/shariff.min.css to the exclude section of that optimization plugin.
In your special case above: Is there a reason, why you tried it with CSS instead of using the color options on the design settings of Shariff? The “secondary color” is actually the hover background color for all themes except the white one.
Regarding Saskias (@jyria) question:
Like I said, Shariff does not load its CSS in any unusual way. It’s simply let’s WordPress handle all of that and so far we never had problems to overwrite the default settings to something client specific.
For both of you: If you let my know, what you are trying to achieve (change colours, shape, whatever), I’ll do my best to help you to find the easiest way without adding any php functions or messing around with the plugin files itself.
Cheers
JP
Hi Jan-Peter,
it would be great, if you add some color options to your tool:
1. text-color within the buttons
2. standard button-color (actually: “main color”)
3. border-color and -width
and
set all colors when hover.
My problem actually is: the tool sets the text-color/icon-color to #FFF. But I want to have the button-backgrounds go #FFF and the icons within switch to the main-color (that is not #FFF)… so actually the icons cannot be seen (white icons on white background)!
Any CSS I tried did not do the trick…
Sven
