Change background image of sharethis Facebook counter with jquery

Question

<span class="stMainServices st-facebook-counter" style="background-image: url(http://w.sharethis.com/images/facebook_counter.png);">
    &nbsp;
    <img src="http://w.sharethis.com/images/check-big.png" style="position: absolute; top: -7px; right: -7px; width: 19px; height: 19px; max-width: 19px; max-height: 19px; display: none;">
</span>

I cannot change background-image (facebook_counter) with my own image. I tried to change it by using .css("background-image","url...") and .attr("style","new style") but maybe I am using the selector part wrong.

Also I am getting this code by using wp socializer in wordpress installation.

Seems to be working here .. `.css()` should work http://jsfiddle.net/GadTt/ — Sushanth --, Dec 19 '12 at 21:19

score 0 · Answer 1 · edited May 23 '17 at 10:24

0

This is because of CSS precedence. Inline styles (using the style="blah" declarations in tags) have a higher precedence than items in your stylesheet.

You can override it with the !important flag on your style, but this is considered bad practice.

.st-facebook-counter
{
    background-image: url('someotherimage.jpg') !important;
}

edited May 23 '17 at 10:24

Community

1
1

answered Dec 19 '12 at 21:14

Rob Allen

17,381
5
52
70

I don't think so .. using `.css()` directly manipulates the inline style tag ... So the image should change. – Sushanth -- Dec 19 '12 at 21:19
Not exactly. If you inspect the element, in your jsfiddle, it doesn't have the css in your javascript applied. If you add in the css window: `.stMainServices { background-image: none !important; }` the CSS wins even over the jQuery. – Rob Allen Dec 19 '12 at 21:23
Besides, why do in JS what you can easily handle in CSS? – Rob Allen Dec 19 '12 at 21:24
That is because of `!important` has it has highest precedence.. Try removing and see what happens .. – Sushanth -- Dec 19 '12 at 21:24
It's a bad practice to use `!important` .. that has to be the last resort if nothing else works – Sushanth -- Dec 19 '12 at 21:25
You can see the fiddle here that uses classes instead http://jsfiddle.net/GadTt/1/ – Sushanth -- Dec 19 '12 at 21:28
I agree, it's bad practice. What the OP is attempting to modify however is brought in via JS (its the ShareThis 3rd party social integration). That makes additional JS more painful to work with where as the CSS would just work. I looks like ShareThis has a different approach however: http://support.sharethis.com/customer/portal/articles/475031-customizing-facebook-like-google-1 – Rob Allen Dec 19 '12 at 21:34

score 0 · Answer 2 · answered May 10 '18 at 06:52

To change the background image for example facebook:

By default sharethis works like this:

<span class="st_facebook"></span>

We need to change above to

<span class="st_facebook_custom"></span>

Then add the styling to the class:

        .st_facebook_custom{
    background: url("http://path/to/image/file") no-repeat scroll left top transparent;
    padding:0px 16px 0 0;
}

It should work perfectly with your image you require.

Change background image of sharethis Facebook counter with jquery

2 Answers2