1

[Anonymous]

Anonymous

#1980

Hey Syahir, I ran across some neat, different colored icons for the slider. They fit absolutely perfectly over the original sprite images. I mean, like a glove!!

I was only able to find five different colors. But I thought it might be a cool option.

You can see what I mean here:

http://www.joshlobe.com

[Kenneth John Odle]

Kenneth John Odle

#18079

Oh, cool. How did you pull that one off?

[Anonymous]

Anonymous

#18080

Thanks Ken.

I found a few button icons on a website. When I opened up sprite_master.psd in photoshop, and resized the button icons I downloaded, they happened to fit EXACTLY over the original white and gray icons (shading, and everything). I just added a new layer, overlapped the two, and hid the original layer (Thanks Syahir for the link to your psd’s).

I currently have four different colors (blue, green, orange, red) if anyone is interested.

[Kenneth John Odle]

Kenneth John Odle

#18081

Thanks. I thought it was some kind of CSS thing. I haven’t really played around with sprites. A whole new world of possibilities is now open.

[Anonymous]

Anonymous

#18082

I know, right?! I’m just now learning about it as well. I don’t think it matters much on small websites, such as my own (in regards to loading time). However, I can certainly see the advantage on large websites with thousands of graphics. Still, pretty cool.

So, I had some time to stumble around your site the other day. Very well put together. I’m also into cooking and photography. I went to some link and really liked a picture I saw… “Forgotten Loveseat” or something like that… Awesome! I love old “memories” photos like that.

Anyways, just wanted to say I enjoyed the twenty or so minutes I was there.

[Syahir Hakim]

Syahir Hakim

#18083

Quote:

I don’t think it matters much on small websites, such as my own (in regards to loading time).

It matters a lot, actually. If your site has like 20 or so images and icons, loading them separately will take a lot more time than loading just a single image file that contains all 20 images. This is due to the overheads associated with every HTTP request made to the server. And if you delve into web optimisation, you’ll see that reducing HTTP requests is among the highest priority items in the list of recommendations to speed up your site.

[Anonymous]

Anonymous

#18084

Well, I stand corrected 🙂

Definitely a useful technique I was unaware of until now. I’ll certainly be using it in future developments. And thanks again for those psd’s!

[Kenneth John Odle]

Kenneth John Odle

#18085

Web optimisation is a good goal, and altering the sprite file is a good way to reduce overhead. But won’t this mean altering the theme’s core files? Is there a way to achieve this with a child theme or with custom CSS? I’ve spent a couple of hours trying to figure this out and I’m not having much luck.

[Anonymous]

Anonymous

#18086

I suppose you could copy the css elements which call the images from your parent css to your child css. And then change the url to your modified sprite images in your child css.

Would that work?

[Kenneth John Odle]

Kenneth John Odle

#18087

Yeah, I could copy the sprite master file to my child theme folder and make changes to that. Then just copy css over and remove “images/”. Yeah, I think that would work.

I’ll play around with that some more this weekend. I’ve been dissatisfied with the look of my bookblog and I think this approach might be one of the things I’m going to try out. Thanks, Josh.