Title: Help Needed: Adding CSS Sprites into WordPress Child Theme: Sprite Me Method
Last modified: August 21, 2016

---

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

 *  [aspirationalist](https://wordpress.org/support/users/aspirationalist/)
 * (@aspirationalist)
 * [12 years, 7 months ago](https://wordpress.org/support/topic/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:
 * > 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/coolrunni…/spriteme1.png](http://www.jaredhirsch.com/coolrunni…/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.
 * 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.

The topic ‘Help Needed: Adding CSS Sprites into WordPress Child Theme: Sprite Me
Method’ is closed to new replies.

## Tags

 * [CSS Sprites](https://wordpress.org/support/topic-tag/css-sprites/)

 * 0 replies
 * 1 participant
 * Last reply from: [aspirationalist](https://wordpress.org/support/users/aspirationalist/)
 * Last activity: [12 years, 7 months ago](https://wordpress.org/support/topic/help-needed-adding-css-sprites-into-wordpress-child-theme-sprite-me-method/)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics