CSS Sprites and Social Bookmarks

Posted: Mon Jun 15, 2009 8:38 am

Well first off, huge kudos to you for the work done here on the site! Awesome!

I've been playing with CSS sprites this afternoon and thought I would share something for social bookmark icons I came up with:

This method using css sprites only loads 2 images and allows for mouseover effects without javascript, just css Smile

Here's the demo: http://rtsforce.com/bookmark-sprites.html

not sure if you are using nukeSEO sb for the social bookmarks, or if it is hard coded... so if you want to use that's cool, if not (or you cant), that's cool too Smile

here's what i did for those who are curious:
images:
http://rtsforce.com/images/socialbookmarks/bookmark-sprites.gif
http://rtsforce.com/images/socialbookmarks/transparent.gif

CSS

Code:

.socials {background:transparent url(../images/socialbookmarks/bookmark-sprites.gif);}

.bookmark {height:18px;}
.articleaction {height:18px;}
   .blinklist img{width:18px; background-position:0 0;}
   .delicious img{width:18px; background-position:-17px 0;}
   .diggit img{width:18px; background-position:-34px 0;}
   .stumble img{width:18px; background-position:-51px 0;}
   .myspace img{width:18px; background-position:-68px 0;}
   .reddit img{width:18px; background-position:-85px 0;}
   .technorati img{width:18px; background-position:-102px 0;}
   .facebook img{width:18px; background-position:-119px 0;}
   .twitter img{width:18px; background-position:-136px 0;}
   .printer img{width:17px; background-position:-153px 0;}
   .emailer img{width:17px; background-position:-171px 0;}
   .pdfer img{width:18px; background-position:-188px 0;}

   .blinklist:hover img{width:18px; background-position:0 -18px;}
   .delicious:hover img{width:18px; background-position:-17px -18px;}
   .diggit:hover img{width:18px; background-position:-34px -18px;}
   .stumble:hover img{width:18px; background-position:-51px -18px;}
   .myspace:hover img{width:18px; background-position:-68px -18px;}
   .reddit:hover img{width:18px; background-position:-85px -18px;}
   .technorati:hover img{width:18px; background-position:-102px -18px;}
   .facebook:hover img{width:18px; background-position:-119px -18px;}
   .twitter:hover img{width:18px; background-position:-136px -18px;}
   .printer:hover img{width:17px; background-position:-153px -18px;}
   .emailer:hover img{width:17px; background-position:-171px -18px;}
   .pdfer:hover img{width:18px; background-position:-188px -18px;}

and you can look at demo for the small html edits required... basically just adding a class to the link and replacing each image with a transparent gif and assigning it multiple classes:

Code:

and so on..... not exactly sure how i got off in this direction today... but oh well, all in good fun Smile

the image may need tweaking, here,s the PSD file if desired Smile

http://rtsforce.com/files/bookmark-sprites2.zip

Posted: Mon Jun 15, 2009 8:52 am

Very nice. Thank you... I do use a modified version of nukeSEO social bookmark. Less images is always a major plus for load times.

Posted: Mon Jun 15, 2009 9:13 am

ya i have been working on a simple bookmark block that uses shortened url's... (spent alot of time tapping one of my sites)... so i remember now what got me going on this Smile

Is it ok if I use the same icons for that?? Or would you prefer I change them?

Posted: Mon Jun 15, 2009 9:35 am

Have at em. Anything on my site can be used for anything people need.

Posted: Mon Feb 22, 2010 8:57 am

ok I've done another CSS sprite version of social bookmarks, this time all pre-packaged and ready to work with Tricked Out News Smile

For a demo see:
http://www.rtsforce.com/
and the included sprites:
http://www.rtsforce.com/themes/socialsprites-demo.html

I wrote:

Converts the tricked out news social bookmarks to use CSS sprites, load as many icons as you want with only 1 11kb master image (and a transparent.gif placeholder). 75+ social and community icons included, 24 pre-configured and ready to go. No instructions included.. Just upload and enjoy. Requires RN2.4+ and Tricked out News.

Have contacted the local admin, so watch for it to appear in a downloads area near you Smile

Posted: Tue Feb 23, 2010 12:27 am

Very nice work Spasticdonkey. Thank you for sharing your work with the community. The downloads have been added.

BBCodeBox plus XFire video for RN24

Social Sprites for Tricked out News

Posted: Sun Sep 12, 2010 7:59 am

This is nice, but I found a couple of issues during testing.

First, a minor compliance issue in includes/nukeSEO_SB.php (and this could have been there from the beginning...):

Code:

$bookmarks["google"] = array (
"siteurl" => "http://www.google.com/bookmarks/mark?op=edit&bkmk={MYNUKEURL}&title={MYNUKETITLE}",
"imgalt" => "header=[Google Bookmarks] body=[Bookmark and share this link with Google Bookmarks]",
"imgclass" => "google"
);

should be:

Code:

$bookmarks["google"] = array (
"siteurl" => "http://www.google.com/bookmarks/mark?op=edit&bkmk={MYNUKEURL}&title={MYNUKETITLE}",
"imgalt" => "header=[Google Bookmarks] body=[Bookmark and share this link with Google Bookmarks]",
"imgclass" => "google"
);

The other issue is trickier. When I click on some of the links (mainly those with titles), the title in the result includes a LOT more than just the title of the article. Haven't figured out why yet, but I'd sure like to do that so I can switch my sites to Tricked Out News with social sprites bookmarks...

Has anyone else seen this?

Posted: Sun Sep 12, 2010 9:29 am

Yes they have. I used strip tags to remove all the title stuff. I included the links in the title of the news and did not even think about the SB using the news title to send to the sites.

http://trickedoutnews.com/ftopict-100.html

Posted: Mon Sep 13, 2010 2:20 am

Thanks, bobby. That resolved that issue, and I'll search the forums before posting the next 2, which appear to specific to Tricked Out News, rather than the social sprites addon.

Posted: Mon Sep 13, 2010 4:47 am

It is all good my friend. The more posts on it the easier it will be for the next person to find it.

Posted: Tue Dec 21, 2010 12:12 pm

hi! where can i find the css styles of the SocialBookmarks tooltips? (RN v2.40.01)

Posted: Tue Dec 21, 2010 10:13 pm

Are you referring to the boxover colors?
If so, it is in the includes/boxover/boxover.js

Posted: Tue Dec 21, 2010 11:44 pm

thanks.

Posted: Wed Dec 22, 2010 11:44 am

the reason of my question was to form the contents of the boxes and i found missing px in this file. the file is included in the RN package. therefore, I provided a topic here: click

Posted: Tue Feb 08, 2011 9:59 pm

I know this is an old topic and I'm going slightly off-topic but just wanted to mention this;
http://keith-wood.name/bookmark.html