Tricked Out News

Welcome to TON. This site is dedicated to development of addons for the RavenNuke™ CMS
Follow Us:
Tricked Out Mods: Forums

 Forum FAQForum FAQ   SearchSearch   UsergroupsUsergroups   ProfileProfile   Log in to check your private messagesLog in to check your private messages   Log inLog in 

CSS Sprites and Social Bookmarks
 
 
Post new topic   Reply to topic   print    Tricked Out News Forum Index -> Changes to News Module
View previous topic :: View next topic  
Author Message
spasticdonkey
Super Dev Donkey
Super Dev Donkey


Joined: May 08, 2009
Posts: 58

Reputation: 324.2Reputation: 324.2
votes: 1
PostPosted: Sun Jun 14, 2009 5:38 pm 
Post subject: CSS Sprites and Social Bookmarks		 Reply with quote
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
Image

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:
<a href="article-print-46.html" class="printer" style="text-decoration: none">


<img class="socials articleaction printer" src="images/socialbookmarks/transparent.gif" border="0" alt="Printer Friendly" title="header=[Printer Friendly]body=[]" style="margin-top: 8px;" /></a> 


<a href="article-friend-46.html" class="emailer" style="text-decoration: none">


<img class="socials articleaction emailer" src="images/socialbookmarks/transparent.gif" border="0" alt="Send to a Friend" title="header=[Send to a Friend]body=[]" style="margin-top: 8px;" /></a> 


<a target="_blank" href="article-printpdf-46.html" class="pdfer" style="text-decoration: none"><img class="socials articleaction pdfer" src="images/socialbookmarks/transparent.gif" border="0" alt="Save as PDF" title="header=[Save as PDF]body=[]" style="margin-top: 8px;" /></a>


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
  
Back to top
View user's profile Send private message
bobby
Site Admin
Site Admin


Joined: Jan 20, 2009
Posts: 600
Location: North Carolina
Reputation: 543Reputation: 543Reputation: 543
votes: 4
PostPosted: Sun Jun 14, 2009 5:52 pm 
Post subject: 		Reply with quote
Very nice. Thank you... I do use a modified version of nukeSEO social bookmark. Less images is always a major plus for load times.
_________________
Tricked Out News
  
Back to top
View user's profile Send private message
spasticdonkey
Super Dev Donkey
Super Dev Donkey


Joined: May 08, 2009
Posts: 58

Reputation: 324.2Reputation: 324.2
votes: 1
PostPosted: Sun Jun 14, 2009 6:13 pm 
Post subject: 		Reply with quote
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?
  
Back to top
View user's profile Send private message
bobby
Site Admin
Site Admin


Joined: Jan 20, 2009
Posts: 600
Location: North Carolina
Reputation: 543Reputation: 543Reputation: 543
votes: 4
PostPosted: Sun Jun 14, 2009 6:35 pm 
Post subject: 		Reply with quote
Have at em. Anything on my site can be used for anything people need.
_________________
Tricked Out News
  
Back to top
View user's profile Send private message
spasticdonkey
Super Dev Donkey
Super Dev Donkey


Joined: May 08, 2009
Posts: 58

Reputation: 324.2Reputation: 324.2
votes: 1
PostPosted: Sun Feb 21, 2010 5:57 pm 
Post subject: 		Reply with quote
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
  
Back to top
View user's profile Send private message
bobby
Site Admin
Site Admin


Joined: Jan 20, 2009
Posts: 600
Location: North Carolina
Reputation: 543Reputation: 543Reputation: 543
votes: 4
PostPosted: Mon Feb 22, 2010 9:27 am 
Post subject: 		Reply with quote
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
_________________
Tricked Out News
  
Back to top
View user's profile Send private message
kguske
Blingaholic
Blingaholic


Joined: May 19, 2009
Posts: 24

Reputation: 400.2Reputation: 400.2
votes: 1
PostPosted: Sat Sep 11, 2010 4:59 pm 
Post subject: 		Reply with quote
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&amp;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&amp;bkmk={MYNUKEURL}&amp;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?
_________________
nukeSEO(tm)
  
Back to top
View user's profile Send private message
bobby
Site Admin
Site Admin


Joined: Jan 20, 2009
Posts: 600
Location: North Carolina
Reputation: 543Reputation: 543Reputation: 543
votes: 4
PostPosted: Sat Sep 11, 2010 6:29 pm 
Post subject: 		Reply with quote
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
_________________
Tricked Out News
  
Back to top
View user's profile Send private message
kguske
Blingaholic
Blingaholic


Joined: May 19, 2009
Posts: 24

Reputation: 400.2Reputation: 400.2
votes: 1
PostPosted: Sun Sep 12, 2010 11:20 am 
Post subject: 		Reply with quote
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.
_________________
nukeSEO(tm)
  
Back to top
View user's profile Send private message
bobby
Site Admin
Site Admin


Joined: Jan 20, 2009
Posts: 600
Location: North Carolina
Reputation: 543Reputation: 543Reputation: 543
votes: 4
PostPosted: Sun Sep 12, 2010 1:47 pm 
Post subject: 		Reply with quote
It is all good my friend. The more posts on it the easier it will be for the next person to find it.
_________________
Tricked Out News
  
Back to top
View user's profile Send private message
neralex
Regular
Regular


Joined: Nov 01, 2010
Posts: 15

Reputation: 19Reputation: 19
PostPosted: Mon Dec 20, 2010 9:12 pm 
Post subject: 		Reply with quote
hi! where can i find the css styles of the SocialBookmarks tooltips? (RN v2.40.01)
  
Back to top
View user's profile Send private message
bobby
Site Admin
Site Admin


Joined: Jan 20, 2009
Posts: 600
Location: North Carolina
Reputation: 543Reputation: 543Reputation: 543
votes: 4
PostPosted: Tue Dec 21, 2010 7:13 am 
Post subject: 		Reply with quote
Are you referring to the boxover colors?
If so, it is in the includes/boxover/boxover.js
_________________
Tricked Out News
  
Back to top
View user's profile Send private message
neralex
Regular
Regular


Joined: Nov 01, 2010
Posts: 15

Reputation: 19Reputation: 19
PostPosted: Tue Dec 21, 2010 8:44 am 
Post subject: 		Reply with quote
thanks. Smile
  
Back to top
View user's profile Send private message
neralex
Regular
Regular


Joined: Nov 01, 2010
Posts: 15

Reputation: 19Reputation: 19
PostPosted: Tue Dec 21, 2010 8:44 pm 
Post subject: 		Reply with quote
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
  
Back to top
View user's profile Send private message
Guardian
Blingaholic
Blingaholic


Joined: Nov 03, 2009
Posts: 22

Reputation: 17.4Reputation: 17.4
PostPosted: Tue Feb 08, 2011 6:59 am 
Post subject: 		Reply with quote
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
  
Back to top
View user's profile Send private message
Display posts from previous:       
Post new topic   Reply to topic   print    Tricked Out News Forum Index -> Changes to News Module All times are GMT - 5 Hours
 
 Page 1 of 1

 
Jump to:   
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
You cannot attach files in this forum
You cannot download files in this forum

Powered by phpBB © 2001-2008 phpBB Group
Forums ©
[ Legal Notice | Privacy Policy | Terms of Use | Comments ]

Theme by Nuken
Page Generation: 0.85 Seconds