CSS sprites social icons « Support Forum | Kriesi.at - Wordpress Themes and HTML Templates

Support Forum » Choices

CSS sprites social icons

3 posts from 2 voices

Started 3 months ago by angelomaldito
Latest reply from angelomaldito
This topic is closed
This topic is not a support question

Tags:

angelomaldito
Member
Hi, there,

I'm looking forward to improve my site's speed. Accordingly to Google's PageSpeed recommendations, I need to combine the [choices'] social media icons into a single CSS sprite.

The good: - I've found a nice tool for making the CSS sprites ( http://spritepad.wearekiss.com/ ), and I was able to select the social icons from choices theme that I'm actually using (twitter, facebook, Gplus, LinkedIn, RSS, and mail), drag them into the tool's canvas and combine them into a single CSS sprite.

The bad: Unfortunately, the CSS code automatically provided by that tool (not surprisingly) doesn't take into account responsive design. It has provided me the following code:
```
.icon-facebook, .icon-rss, .icon-mail, .icon-gplus, .icon-linkedin, .icon-twitter{
	background: url(sprites.png) no-repeat;
}

.icon-facebook{
	background-position: -43.5px 0;
	width: 42px;
	height: 84px;
}

.icon-rss{
	background-position: -173px 0;
	width: 42px;
	height: 84px;
}

.icon-mail{
	background-position: -216px 0;
	width: 42px;
	height: 84px;
}

.icon-gplus{
	background-position: -87px 0;
	width: 42px;
	height: 84px;
}

.icon-linkedin{
	background-position: -130px 0;
	width: 42px;
	height: 84px;
}

.icon-twitter{
	background-position: 0 0;
	width: 42px;
	height: 84px;
}
```
QUESTION: Is there an relatively easy fix to adapt the CSS code above to work on choices' responsive layout? If yes, how could I do that?

Thank you very much!

Angelo
Posted 3 months ago #
Devin
Moderator

Hi Angelo,

The background position doesn't matter for the responsive features. I think the issue is that you need to re-do all the hover effects using the new sprite.

So in the layout.css you can see in lines 408-444 all of the social icons have their background image set and then the background image gets moved -43px when you hover over each on.

What you should do is instead of using a program, just make your sprite image a single long image but the same width as the icon files are now. Basically stacking each image on top.

Then you can modify each items background position to start at the correct point. Just add all the css changes to your custom.css unless you want to add in the css to the layout.css file again each time you make a theme update.

Honestly though, its a lot of work to reduce your requests by 6 (in my opinion). If you really want to push for page speed, wordpress itself will be your biggest hurdle. Using something like wp super cache or w3 cache will get you far but getting it set up can take some serious tweaking.

Regards,

Devin

Posted 3 months ago #
angelomaldito
Member

Hi Devin, thank you for your prompt response.

Yeah, I think you're quite right, it's a lot of work for little benefit. I was hoping that there was an easier fix for that, but CSS sprites are definitely a little complicated for my current knowledge in this field. Anyway, I may try that in future. I'm actually already using w3 cache (for two days now), and it has indeed improved my page speed score dramatically (from 52 to 90!) but I was trying to improve it even further, and Google's PageSpeed labeled the CSS sprites job as a "high priority" thing to do. It seems a little exaggerated though. Certainly my website has other priorities which I shall address first, such as content.

Thank you very much for your attention, once again!

Regards,

Angelo

Posted 3 months ago #