Help Needed: Adding CSS Sprites into Wordpress Child Theme: Sprite Me Method

Luke_Corden · November 7, 2013, 5:23pm

Hi there

I am trying to create a basic css sprite with spriteme.com and then add it to my wordpress theme.

I have managed to get as far as creating the sprite but then when I export the css I am hit with a ton of confusing code after the following advice:

Here are the CSS changes you need to integrate back into your web site.

Make sure to download these sprite images to your own server. These URLs are temporary and will eventually be removed! Replace these URLs with the URLs where you host the images.

http://www.jaredhirsch.com/coolrunnings/public_images/b11fa6e333/spriteme1.png

http://www.lukecorden.com/wp-includes/css/admin-bar.min.css?ver=3.7.1
Merge these changes into the CSS rules in http://www.lukecorden.com/wp-includes/css/admin-bar.min.css?ver=3.7.1:
This is one of multiple rules that use this background image:
#wpadminbar .menupop .menupop > .ab-item {
  background-image: url("../images/admin-bar-sprite.png?d=20120830");
  background-image: url("http://www.jaredhirsch.com/coolrunnings/public_images/b11fa6e333/spriteme1.png");
  background-position: -10px -86px;
}
This is one of multiple rules that use this background image:
#wpadminbar .ab-top-secondary .menupop .menupop > .ab-item {
  background-image: url("../images/admin-bar-sprite.png?d=20120830");
  background-image: url("http://www.jaredhirsch.com/coolrunnings/public_images/b11fa6e333/spriteme1.png");
  background-position: -10px -86px;
}
This is one of multiple rules that use this background image:
#wpadminbar #adminbarsearch .adminbar-input {
  background-image: url("../images/admin-bar-sprite.png?d=20120830");
  background-image: url("http://www.jaredhirsch.com/coolrunnings/public_images/b11fa6e333/spriteme1.png");
  background-position: -10px -86px;
}
This is one of multiple rules that use this background image:
#wp-admin-bar-wp-logo > .ab-item .ab-icon {
  background-image: url("../images/admin-bar-sprite.png?d=20120830");
  background-image: url("http://www.jaredhirsch.com/coolrunnings/public_images/b11fa6e333/spriteme1.png");
  background-position: -10px -86px;
}
This is one of multiple rules that use this background image:
#wp-admin-bar-updates > .ab-item .ab-icon {
  background-image: url("../images/admin-bar-sprite.png?d=20120830");
  background-image: url("http://www.jaredhirsch.com/coolrunnings/public_images/b11fa6e333/spriteme1.png");
  background-position: -10px -86px;
}
This is one of multiple rules that use this background image:
#wp-admin-bar-comments > .ab-item .ab-icon {
  background-image: url("../images/admin-bar-sprite.png?d=20120830");
  background-image: url("http://www.jaredhirsch.com/coolrunnings/public_images/b11fa6e333/spriteme1.png");
  background-position: -10px -86px;
}
This is one of multiple rules that use this background image:
#wpadminbar #wp-admin-bar-new-content > .ab-item .ab-icon {
  background-image: url("../images/admin-bar-sprite.png?d=20120830");
  background-image: url("http://www.jaredhirsch.com/coolrunnings/public_images/b11fa6e333/spriteme1.png");
  background-position: -10px -86px;
}
http://www.lukecorden.com/wp-content/plugins/metro-style-social-widget/CSS/metro.css?ver=3.7.1
Merge these changes into the CSS rules in http://www.lukecorden.com/wp-content/plugins/metro-style-social-widget/CSS/metro.css?ver=3.7.1:
This is one of multiple rules that use this background image:
.metro-social .metro-googleplus {
  background-image: url("../images/google.png");
  background-image: url("http://www.jaredhirsch.com/coolrunnings/public_images/b11fa6e333/spriteme1.png");
  background-position: 32.5px -240px;
}
This is one of multiple rules that use this background image:
.metro-social .googleplus-one {
  background-image: url("../images/google.png");
  background-image: url("http://www.jaredhirsch.com/coolrunnings/public_images/b11fa6e333/spriteme1.png");
  background-position: 32.5px -240px;
}
This is one of multiple rules that use this background image:
.metro-social .metro-twitter {
  background-image: url("../images/twitter.png");
  background-image: url("http://www.jaredhirsch.com/coolrunnings/public_images/b11fa6e333/spriteme1.png");
  background-position: 27.5px -314.5px;
}
This is one of multiple rules that use this background image:
.metro-social .twitter-one {
  background-image: url("../images/twitter.png");
  background-image: url("http://www.jaredhirsch.com/coolrunnings/public_images/b11fa6e333/spriteme1.png");
  background-position: 27.5px -314.5px;
}
This is one of multiple rules that use this background image:
.metro-social .twitter-one-extend {
  background-image: url("../images/twitter.png");
  background-image: url("http://www.jaredhirsch.com/coolrunnings/public_images/b11fa6e333/spriteme1.png");
  background-position: 27.5px -314.5px;
}
This is one of multiple rules that use this background image:
.metro-social .twitter-extend-one {
  background-image: url("../images/twitter.png");
  background-image: url("http://www.jaredhirsch.com/coolrunnings/public_images/b11fa6e333/spriteme1.png");
  background-position: 27.5px -314.5px;
}
This is one of multiple rules that use this background image:
.metro-social .metro-rss {
  background-image: url("../images/feed.png");
  background-image: url("http://www.jaredhirsch.com/coolrunnings/public_images/b11fa6e333/spriteme1.png");
  background-position: 37px -389px;
}
This is one of multiple rules that use this background image:
.metro-social .rss-feed {
  background-image: url("../images/feed.png");
  background-image: url("http://www.jaredhirsch.com/coolrunnings/public_images/b11fa6e333/spriteme1.png");
  background-position: 37px -389px;
}
This is one of multiple rules that use this background image:
.metro-social .metro-youtube {
  background-image: url("../images/youtube.png");
  background-image: url("http://www.jaredhirsch.com/coolrunnings/public_images/b11fa6e333/spriteme1.png");
  background-position: 37.5px -458px;
}
This is one of multiple rules that use this background image:
.metro-social .youtube-one {
  background-image: url("../images/youtube.png");
  background-image: url("http://www.jaredhirsch.com/coolrunnings/public_images/b11fa6e333/spriteme1.png");
  background-position: 37.5px -458px;
}

I guess what I need to know is three fold.

how or where do I need to edit this code?
where do I place it in my wordpress site? (my theme [iconic one] has a custom.css file)
once this code is placed correctly do I need to delete previous images that made up the sprite, if so where are they?

Thanks so much for any help offered.

ralphm · November 7, 2013, 11:06pm

Hm, it’s one thing to get an external service to generate a sprite image for you, but I wouldn’t accept code from them too. I’d say load the sprite image on your site and then look at writing your own code for it as required. WP makes it easy to upload a new image, and then look at adding the custom code as needed.

Luke_Corden · November 8, 2013, 11:25pm

Hi Ralph,

Thanks so much for the reply. The creation of the sprite is not really my issue. It is what to do with it once I have it. I am unsure

a) where to put the code (I think maybe in my custom.css file?) and
b) what to do with the now redundant .css code that individually made up the sprite?

Uploading an image to wordpress would just mean there was the some image in my media folder. This wouldn’t (in my admittedly very basic understanding) help. I feel perhaps I am missing something and not explaining myself. Apologies if this is the case.

ralphm · November 9, 2013, 12:42am

Yes, that should be fine. I’m not sure what that code is based on, though. I can’t see how the image generator can know what code you need for your site, but that my just be my ignorance. Anyhow, you will certainly need to edit the code when adding it to your custom CSS file. For one thing, there’s raw text in there that you need to remove, or at least comment out. for example, placing this in the CSS file as is will cause an error:

background-position: -10px -86px;
}
[COLOR="#FF0000"]This is one of multiple rules that use this background image:[/COLOR]
#wpadminbar .ab-top-secondary .menupop .menupop > .ab-item {

Either remove that text in red, or comment it out, like so:

[COLOR="#FF0000"]/*[/COLOR] This is one of multiple rules that use this background image: [COLOR="#FF0000"]*/[/COLOR]

what to do with the now redundant .css code that individually made up the sprite?

Not quite sure what you mean, but if there is code in your style sheet that no longer applies to the new situation, you can just delete it (or even leave it there, though there’s no point in having redundant code lying around).

Uploading an image to wordpress would just mean there was the some image in my media folder. This wouldn’t (in my admittedly very basic understanding) help. I feel perhaps I am missing something and not explaining myself. Apologies if this is the case.

Yes, uploading it doesn’t do anything in itself, except make it available for use, of course. You then have to tell your style sheet what to do with it, such as adding it to various elements as a background image.

If you like we can help you with this. Upload the image and give us the direct link to it, and then show us the page(s) where you want to add it in as a background image, and on what elements, and we’ll help you write the code you need.

Luke_Corden · November 11, 2013, 2:35pm

Hi Ralph,

Again, let me first offer my thanks for your time and effort in reply.

I think I might just be beginning to get my head around this but I would like to take you up on your offer of help.

The sprite in question can be seen here:

[B]http://www.lukecorden.com/?attachment_id=65[/B]

and it needs to be applied to every regular page of the site. As you can see from visiting the home page the components of this sprite are uniform throughout:

http://lukecorden.com

One concern I have is that this image doesn’t seem to contain any colors except in the youtube image. Is this something you can help me code in?

I have attached a screen capture that might help too:

Perhaps the best way to do this is to start me off at the beginning and walk me through.

I am equally happy to learn this from scratch if you could recommend a decent resource. Although, the monthly charge of the learnable package is a bit off putting to me. I have been looking at udemy courses on dreamweaver but for now I would just like to understand how to make this work the spriteme way so I can blog about it as a quick fix. Anyway, I digress.

Thanks again.I look forward to learning this!

ralphm · November 11, 2013, 10:42pm

The question, of course, is How. The idea of a sprite is that you display a small part of it on various elements as a background image. So we need to know where you want each bit to appear.

One concern I have is that this image doesn’t seem to contain any colors except in the youtube image. Is this something you can help me code in?

If the image isn’t the color you want, you’ll need to recreate it. Unless you mean that you want background color, which is easy enough, because the sprite has a transparent background, so you can put any color you like behind it.

Here’s an example of how you’d use it (run this in your browser, and hover over the logo):

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>

span {
    width: 22px; 
    height: 22px; 
    background-image: url(spriteme2.png);
    background-position: -10px -112px;
    background-color: rgb(255,0,0);
    display: inline-block;
}

span:hover {
    background-position: -10px -83px;
}

</style>
</head>
<body>

<p><span></span></p>
			
</body>
</html>

Luke_Corden · November 11, 2013, 11:20pm

Unless you mean that you want background color, which is easy enough, because the sprite has a transparent background, so you can put any color you like behind it.

Yeah, i realized that once I posted. The backgrounds are the important colours.

Here’s an example of how you’d use it (run this in your browser, and hover over the logo):

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>

span {
    width: 22px;
    height: 22px;
    background-image: url(spriteme2.png);
    background-position: -10px -112px;
    background-color: rgb(255,0,0);
    display: inline-block;
}

span:hover {
    background-position: -10px -83px;
}

</style>
</head>
<body>

<p><span></span></p>
			
</body>
</html>

Regarding this code. I pasted it into an html sandbox [htmlsandbox.com] and I just found a red box displayed. Is this what you meant by running it in my browser?

I have a feeling this is going to pan out with me going back to square one and learning this from the very beginning. So with this in mind I have attached a screen capture of the issue I am trying to resolve.

The images GT metrix is referrring to are purely related to the metro plugin on the site and I figured a sprite was the correct solution.

Perhaps this will make it clearer as to what I’m trying to achieve. If you run gtmetrix for www.lukecorden.com you’ll be able to get into these results for yourself and can perhaps we can start afresh!

Really sorry, I haven’t communicated this very well.

Thanks.

ralphm · November 11, 2013, 11:37pm

No, because that won’t include the sprite image. Just place the sprite image in the same folder as the page, so that it can be loaded. Or just place the sprite image on your desktop, along with a .html file that you open in your browser.

I have a feeling this is going to pan out with me going back to square one and learning this from the very beginning.

That’s what I’d recommend, as you need to be clear what a sprite image does and how it works. http://css-tricks.com/css-sprites/

If you run gtmetrix for www.lukecorden.com …

I don’t know what that means, I’m afraid.

Luke_Corden · November 11, 2013, 11:53pm

If you go to http://gtmetrix.com/ and enter my site http://www.lukecorden.com you will see what I mean and why I’m trying to Combine images using CSS sprites.

I will return to this thread tomorrow night. It’s late here in the uk and regular words are not making sense let alone code.

Really grateful for your patience and perseverance!

system · October 8, 2014, 5:09am