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

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:

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;

Code (markup):

I guess what I need to know is three fold.

1) how or where do I need to edit this code?

2) where do I place it in my wordpress site? (my theme [iconic one] has a custom.css file)

3) 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.

 

Hi if you are going to be editing files in your theme folder I would strongly recommend using a child theme instead of directly editing the theme files. WordPress has a good write up on child themes you should check out!

 

Here´s an great tutorial in css sprites. Old as hell but still works

http://alistapart.com/article/sprites

 

That code is gibberish -- in particular one of the image declaration is redundant to the second... that train wreck of positioning, fractional pixels, and host of other "CSS, what's that?" code means whatever it is you're working from, FORGET IT!

Though without seeing the garbage turdpress is vomiting up and calling markup, it's hard to say what the right CSS would be.