4 replies [Last post]
BaghdadGhost
BaghdadGhost's picture
Offline
newbie
Last seen: 2 years 38 weeks ago
Timezone: GMT-5
Joined: 2011-12-18
Posts: 3
Points: 4

Hi all,

first thank you for all the support and wonderful tools you are providing.

I applied the modification in my site. had little problems since I am a newbie but everything went well except two things:

only googlebuz and del.ic.ico icons, when I hover over them I have to make the cursor all the way down near the bottom edge of the icon in order to be able to click them?

my second question how to add more social networks to the tool? I understand that i have to adjust the width of the tool which I dont think I will have a problem with, and also I have to assign an icon for the new site also no problem with that, but the actual links of the new sites is my struggle. like yahoo mail, bookmarks, send my mail client or maybe some other sites.

note: I tried to ask in the tool discussion but had no luck finding the way to do it. I apologize if this is not the right place for the topic. please redirect if necessary.

thank you.

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 2 days 20 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5147
Points: 2745

Hi BaghdadGhost, You may have

Hi BaghdadGhost,

You may have some conflicting style that is causing the links on the googlebuzz and del.ic.ico to display inline.

I will use the google buzz link as an example.

// Firstly define the link.
 var buzz = 'http://www.google.com/reader/link?url='+url+'&title='+title+'&srcURL='+host;
 
// Then add it to the toolbar.
 tbar += '<a href="'+buzz+'" id="buzz" title="Share on Buzz"><img src="/images/google-buzz.png"  alt="Share on Buzz" width="32" height="32" /></a>';
 

You will need to get the new icons and change the id, alt etc.

jQuery Social Share Toolbar

BaghdadGhost
BaghdadGhost's picture
Offline
newbie
Last seen: 2 years 38 weeks ago
Timezone: GMT-5
Joined: 2011-12-18
Posts: 3
Points: 4

Let me first thank you for

Let me first thank you for your answer.

regarding the hovering problem I think it is related to the position of the tool since I also have another script running on the same location. now can you please tell me how to flip the whole tool to the left side. I know to you looks weird probably but my forum uses RTL Smile

regarding adding more sites to the tool, I also understand the concept you explained, I am just having a problem finding the right links for them.

thank you in advance for your support.

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 2 days 20 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5147
Points: 2745

Hi BaghdadGhost, It should be

Hi BaghdadGhost,
It should be something like this:

#socializethis{
  background:#CCC;
  border:solid 1px #666;
  border-width: 1px 0 0 1px;
  height:15px;
  width:260px;
  position:fixed;
  bottom:0;
  left:0;
  padding:2px 5px;
  overflow:hidden; 
  /* CSS3 */
  -webkit-border-top-right-radius: 12px;
  -moz-border-radius-topright: 12px;
  border-top-right-radius: 12px;
  -moz-box-shadow: 3px -3px 3px rgba(0,0,0,0.5);
  -webkit-box-shadow: 3px -3px 3px rgba(0,0,0,0.5);
  box-shadow: 3px -3px 3px rgba(0,0,0,0.5);
  }

BaghdadGhost
BaghdadGhost's picture
Offline
newbie
Last seen: 2 years 38 weeks ago
Timezone: GMT-5
Joined: 2011-12-18
Posts: 3
Points: 4

thank you so much. I want to

thank you so much. I want to share with others that the css file should be like this

#socializethis{
  background:#CCC;
  border:solid 1px #666;
  border-width: 1px 0 0 1px;
  height:15px;
  width:260px;
  position:fixed;
  bottom:0;
  left:0;
  padding:2px 5px;
  overflow:hidden; 
  /* CSS3 */
  -webkit-border-top-right-radius: 12px;
  -moz-border-radius-topright: 12px;
  border-top-right-radius: 12px;
  -moz-box-shadow: 3px -3px 3px rgba(0,0,0,0.5);
  -webkit-box-shadow: 3px -3px 3px rgba(0,0,0,0.5);
  box-shadow: 3px -3px 3px rgba(0,0,0,0.5);
  }
 
#socializethis a{
	float:right; 
  width:32px;
  margin:3px 2px 2px 2px; 
  padding:0; 
}
 
#socializethis span{ 
  float:right; 
  margin:2px 3px; 
  text-shadow: 1px 1px 1px #FFF;
  color:#444;
  font-size:12px;
}  

the last two icons hover problem is gone now.

the only problem is where to find other bookmarks sharing URLs in the web in order to be used in this tool?

many thanks