Implementing CSS sprites

I'm redoing my buttons and I want to use CSS sprites so I don't have a gazillion server requests. I'm having some interesting problems with it.

The first thing I tried was swapping over my navbar, it's currently:

Spoiler:

Even though the sprite classes exist for these buttons, they won't display. My sprite image, and sizes are all correct, but they don't seem to be being loaded. I've also tried using a variation of my original navbar classes, as it works for the separate images, even if the sprite classes aren't removed. It also doesn't work.

Furthermore, if I turn off the basic CSS then the

Spoiler:

no longer works, even though it is specified in my CSS.

I'm probably missing something really basic I would really love some help to get it resolved.

To sum up:

I'm on phpbb3,
Can't get sprites to work,
If I turn off the basic CSS, the sprites that were working will no longer work, even though they are specified in my CSS.

With rollover over effects, there are likely going to be around 100 images, which will really slow things up if I can't get sprites working

EDIT: I've got the CSS sprite to work for my navbar

Spoiler:

It seems the problem was the styling of the background (the no-repeat stuff I had), and that the sprite IDs don't do anything, but the ones I've used do.

Next big problem, is I can't switch off the basic CSS and have the sprite for the the tiny buttons (some I would like to keep) and I've also noticed the "share" icons go bye byes as well.

It is specified in my CSS, so I don't understand why I lose it, furthermore what on earth am I meant to use as an ID for the buttons, if the code that was working, no longer works.

Any help greatly appreciated on this

what software are you using to create them?


here thsi if this helps, there is a lot of different ways to create them.

Googled Sprites

I really just use GIMP, and sometimes, if I have a stack of images I'll use on an online generator. The problem isn't so much creating them it's what I link them too. As I say, when I deactivate the basic CSS the sprite images already in place for the RSS module, and small navigation buttons, no longer works. So their .sprite-icon_whatever class no longer works. I will try later on to see if I can replace them with a #i_icon_whatever ID. I'm not sure what forum topic buttons are under either, but I'm assuming the cp associates an ID with them, so I can style the links in pic management?

*Bump*

Still not found a way to implement my own sprites for the buttons. I still can't switch off the basic CSS without losing the addthis buttons in "share".

Perhaps, I'm asking about this in the wrong way - how do you get rollover effects for multi-quote, quote, edit, etc?

How do you change the icons in addthis/"share", and their rollover effects?

Why do the sprites already in place as standard only work with the basic CSS switched on, even though it's specified in my CSS?

Why is a job that should have taken a few hours, taking days?

I know sprites aren't the be all and end all, but it's a practice I've become accustomed to.

CSS Sprites are generally finicky. You may want to go to http://www.csstricks.com and search "CSS Sprites". This has several tools you can use.

Thanks for that, but the creation of them, and the CSS that goes with them isn't the problem.

The problem is, even though I have the right elements to add the CSS to, they won't do anything. In fact, the sprites already in place, the original ones that came with the theme are still being loaded.

My first thought was the basic CSS was taking priority, and all that needed to happen was disabling it and replacing it with my own.

Well, their sprites do get disabled, and even though I have my own specified, one of which is their code and their sprite - I get nada. My code isn't wrong, my alignment isn't wrong, the elements I'm targetting aren't wrong. I have even gone to the extent of setting up a dummy page to see if it will work there - and IT DOES. I'm not using Opera, the image width is less than 2042px, even if I was. I'm also not viewing a cached copy of my site - that's all been cleared and I'm forcing it to load the newest version (that makes surfing very slow).

I've tried playing around with the pics display to see if I could add new classes/ids (bad coding I know for things that are already specified) - but that doesn't do anything.

I've gone through all the scripts on the site to see if something is taking precedent -"share" uses jscript to do the addthis stuff, but is still using a sprite for it's images (at***, etc), nothing seems to be, though their does appear to be multiple sprites of the same thing loading (new one on me - and both versions look fine for dynamic environs - not sure why a horizontal and vertical version is needed????).

The guys over at the phpbb3 forums are sorting out the prosilver skin - refactoring, adding sprites, etc. I had a look over their code and it is in essence what I've been trying to add.

What I'm doing *should* be working, but there is a mysterious element X that seems to override it - apart from the navbar sprite that's running fine.

It may not seem like a huge difference - fast broadband nowadays and all that - but for the navbar rollover there is a delay without using the sprite, where all you see - until you take off the pointer and move back over it - is a white space. With the sprite there is no delay and no white spaces.

Furthermore, it doesn't seem rollover effects for the "quote", "multi-quote", "edit", "new topic", etc will be possible without using jscript - which is a stupid way round for a shortcut, as it adds in more weight, more images and another declaration for those with jscript turned off. Fair enough there probably won't be the lag with the jscript as images are preloaded, but the first visit will still be slowed down. I also have my doubts as to whether it will work, as the ids and classes associated with the images I'm trying to sprite don't seem to do anything outside of the basic CSS.

It's more than a little irritating

The really funny thing is, pretty much automatic spriting would be easy to implement in the admin cp. It's just a little jscript. That addition would not only make me a happy bunny - think of the thousands upon thousands of unnecessary server requests being cut down. I'm assuming forumotion is primarily monetised by using the free forums as an advertising network? Surely, cutting down their server costs would be of benefit? Also, the high volume forums would be faster, which would mean higher new customer retention, which could have the knock on effect of more ads converting. It's almost a no-brainer.

/end rant

/end rant

LOL

Yes, this is beginning to look very wierd. I wonder if you are the first to try sprites on a forumotion forum? Maybe you should try making a new test forum and checking to see if it still wont work.

I agree with you about having forumotion implement css sprites into the admin panel. Sprites, being the best all-around way to do rollovers, it seems that they would have already thought of that...

I will test with some other themes on a test forum (nod). It's the only thing I've not done, and perhaps if something is "cracked" in my current theme I can do a fresh install of a clean theme. I have back-ups of my scripts and CSS so wouldn't take long to redo.

I find it hard to believe I'm the only that's wanted to do this, though. Sprites have been around for a good few years and are pretty much the standard for background images. At the end of the day, it's something that would be easily sorted with direct access to the HTML.

EDIT: It doesn't work on the test forum either ;( It works perfectly when I set up snippets of the same HTML and CSS, though. I really don't get it.

Very wierd. I think this is a topic that needs to be moved to the "Need a technician" forum.

If it can't be solved I'm just going to have have single images for my buttons At least I've got the navbar to work as a sprite - not exactly wonderful, but better than nothing.

great postttttttttt









Spam Removed ~ Base

Road9494 wrote:great postttttttttt









Coach Jewelry killed discount coach outlet but saved office 2010

I guess the new update is not turn on here. Joined: 07/26/2011

see i dont use sprites, i use spy-menues and phpbb2,
i would have to look into it more for you and try to understand a little bit better.

slg wrote:

Road9494 wrote:great postttttttttt









Coach Jewelry killed discount coach outlet but saved office 2010

I guess the new update is not turn on here. Joined: 07/26/2011

yeah lol.
turkey is banned now.