ShareThis addon not appearing properly in the discussion post.

Sinto001

I have installed sharethis about a month ago. It was working fine but recently I updated my theme to bootstrap and the sharethis add on appears unevenly. See my attached snapshot.****

Can it be corrected properly....
Also would you mind telling which text editor does this forum uses...I want to use similar one .. I have now CLKEditor.

hgtonight

Welcome to the community!

The editor in use here is called 'Advanced Editor' and is supposed to be released with Vanilla 2.3 (the next OS release).

Is your site live somewhere? That would be helpful in debugging the CSS conflict.

Sinto001

Ok, My site is live at : http://goo.gl/ZCSyoK
Please do the needful ..

vrijvlinder

Ok just change the buttons css to this, the problem is caused by the height which is auto in the plugin css change to 100% an the problem is fixed.

.stButton .stFb, .stButton .stTwbutton, .stButton .stMainServices {
background-image: url(/images/facebook_counter.png);
background-repeat: no-repeat;
display: inline-block;
white-space: nowrap;
font-family: Verdana,Helvetica,sans-serif;
font-size: 11px;
height: 100%;
padding-top: 3px;
padding-bottom: 3px;
line-height: 16px;
width: auto;
position: relative;
}

Also you can add this to the custom.css of your theme

.Message{
padding-bottom:10px;
}

Sinto001

Adding last set of codes to forums/themes/Bootstrap/design/custom.css had no effect...
Also where is buttons css located ....?

vrijvlinder

No , the first block of code goes in the buttons.css of the ShareThis plugin. But you only need to change the value for height to 100% instead of auto.

The second one goes inside the custom.css of the theme you are using. You may need to add it like this

.Message{
padding-bottom:10px!important;
}

Sinto001

There is no buttons.css in ShareThis plugin folder. Only it is in the plugins folder ..in the forums/plugins/Buttons/design
and in that buttons.css all these ... stButton .stFb, .stButton .stTwbutton, .stButton .stMainServices { ....
are not there ..! ???
Also adding last set of codes had no effect ..!!

vrijvlinder

Are you using minify? Or pagespeed ?

All I know that code comes from a file called buttons.css If you inspect the code using chrome inspector, you can see the files and resources that you are using.

Sinto001

Oh... that way but I don't know how to track the originating file from chrome inspect ..?

peregrine

the button css is coming from share this website just try what v said and add to your custom.css

you may need to add important.

vrijvlinder

or try my version of that plugin VShare which I added a css file to it so you can do anything you want with the buttons....

vrijvlinder

@Sinto001 said:
Oh... that way but I don't know how to track the originating file from chrome inspect ..?

If you are going to work with web pages and software, it is advisable that you learn how to use the tools of the trade such as the inspector for troubleshooting purposes.

https://developer.chrome.com/devtools

http://discover-devtools.codeschool.com/

Sinto001

Just tell me where I can locate the file using chrome inspect and I will try to edit the codes. I don't have time for coding and don't know the abc of coding ..

peregrine

he already told you all in the custom.css of your theme. lol.

time to make time.

@vrijvlinder, do you still do housecalls? for people who don't have time.

http://www.smashingmagazine.com/2010/11/02/the-important-css-declaration-how-and-when-to-use-it/

One purpose for !important would be in css where you are purposely overriding other people's CSS that's likely more specific than yours.

http://www.w3schools.com/css/

http://www.youtube.com/watch?v=tdIk2PztcL0

vrijvlinder

@Sinto001 said:
Just tell me where I can locate the file using chrome inspect and I will try to edit the codes. I don't have time for coding and don't know the abc of coding ..

Those links I posted explain it better than I could. They show you pictures and explain what it all does.

The A of coding is to first learn what you are doing. The inspector helps you figure it out.

Th B of coding is actually a G , Google the basics, it's all out there we had to learn too...

The C of coding is You Can do it if you want to learn otherwise hire someone to do it for you.

Sinto001

Ok I understood In fact I already know all of it but where I can change that width to auto; I have already added the .Message in the custom.css. But where in button.css that width is not there... :#

vrijvlinder

No, add both code blocks to the custom.css theme that you are using. If you are using bootstrap then you must add the code to the custom.css of that particular style you chose.

.stButton .stFb, .stButton .stTwbutton, .stButton .stMainServices {
height: 100%!important;
}

Sinto001

I have uploaded both the code sets to custom.css yet I get this conflict...

Please also look at custom.css txt format file....

vrijvlinder

Did you not read what we said about adding !important to it ?

.stButton .stFb, .stButton .stTwbutton, .stButton .stMainServices {
height: 100%!important;
}

If you make a rule or add a rule and it won't work, generally it is because something else is overriding it or the rule already exists. So you must add !important to force the browser to read that rule first and ignore the other. Please try again but add the !important to the height value. _ also don't think you are adding the rule to the right custom.css file.