Register Members List Search Today's Posts Mark Forums Read

Reply
 
Thread Tools
  #1  
Old 02 May 2013, 23:45
Simon Lloyd's Avatar
Simon Lloyd Simon Lloyd is offline
 
Join Date: Aug 2008
Real name: Simon
Sprite addition help

Hi all, i'm trying to replace all my forum images with a sprite reference, most of my images are on forumhome, could someone help with how i'd present the css instead of this
Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

here's a snippet of my sprite css
.Accessforum_new{ background-position: 0 0; width: 47px; height: 47px; }
.Accessforum_old{ background-position: 0 -97px; width: 47px; height: 47px; }
.Excelforum_new{ background-position: 0 -194px; width: 47px; height: 47px; }
.Excelforum_old{ background-position: 0 -291px; width: 47px; height: 47px; }
.Outlookforum_new{ background-position: 0 -388px; width: 47px; height: 47px; }
.Outlookforum_old{ background-position: 0 -485px; width: 47px; height: 47px; }

Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

So, not being any good whatsoever with css i'm assuming i'd reference the actual sprite like the code snippet above in my additional css? and how would i address the actual css references in the code snippet at the very top?

Any help is appreciated

EDIT: the image names in the css i.e Accessforum_old are the names of the prefixes as they are currently in use.
__________________
Kind regards,
Simon Microsoft Office Help
My Mods: Find my modifications here
Please do not pm me for support unless i have invited you to!

Last edited by Simon Lloyd; 02 May 2013 at 23:53.
Reply With Quote
  #2  
Old 03 May 2013, 03:52
Lynne's Avatar
Lynne Lynne is offline
 
Join Date: Sep 2004
Real name: Lynne
You basically tell it where the upper left point is via x y position and then give the height and width from there.

http://www.w3schools.com/css/css_image_sprites.asp
__________________
Former vBulletin.org Staff Member

Try a search before posting for help. Many users won't, and don't, help if the question has been answered several times before.
W3Schools -
Online vBulletin Manual
If I post some CSS and don't say where it goes, put it in the additional.css template.
I will NOT help via PM (you will be directed to post in the forums for help.)
Reply With Quote
  #3  
Old 03 May 2013, 03:55
Simon Lloyd's Avatar
Simon Lloyd Simon Lloyd is offline
 
Join Date: Aug 2008
Real name: Simon
I've had limited success using <td id="td"> but it just shows the entire sprite, even if i then do <td id="td" class="$forum[imageprefix]forum_$forum[statusicon]"> i cant get it to show that particular part of the sprite, just using $forum[imageprefix]forum_$forum[statusicon] in the template shows the correct name for the sprite portion but no image?

--------------- Added 03 May 2013 at 05:00 ---------------

i've made further modifications and have much better success although some of the images aren't showing correct and i think thats down to the generated image and css, i'll have a play now that i can actually see whats going on - thanks Lynne
__________________
Kind regards,
Simon Microsoft Office Help
My Mods: Find my modifications here
Please do not pm me for support unless i have invited you to!
Reply With Quote
  #4  
Old 03 May 2013, 14:46
darnoldy darnoldy is offline
 
Join Date: Dec 2004
Part of the problem may be that IDs have to be unique on a page. It appears that you're trying to have a <td id="td"> for each row in your forumhome table.

Put the {background: url(forumsprite.png) no-repeat top left;} into each of the class definitions and eliminate the #td selector altogether.

You might also try putting some content into the td— like a &nbsp; Table cells act weirdly when they are empty.

--don
Reply With Quote
Reply



Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off


New To Site? Need Help?

All times are GMT. The time now is 04:06.

Layout Options | Width: Wide Color: