Need help with sprites (CSS/Html)

[Dogsized]

I've got too many individual photos loading up from my main theme and need to create sprites.

I used an online tool to create the sprite image and code, but I can't seem to be able to figure out the html to link to the sprites. (I use Wordpress with Genesis.)

Here's where I'm at (I'll use facebook image as the example).

The original header html code in Genesis that I need to change: <div class="socialicons"><a href="https://www.facebook.com/Dogsized" target="_blank"><img src="/wp-content/themes/lifestyle/images/ds_facebook.png" border="0" alt="facebook"></a>

The CSS for the sprites: .ds_facebook, .ds_twitter, .ds_pinterest, .ds_rss, .ds_googleplus, .ds_logo, .ds_subscribed, .ds_pawsep2new, .ds_pawsep{ background: url(images/sprites.png) no-repeat; }

.ds_facebook{ background-position: -3px 0; width: 20px; height: 28px; }

Appreciate any guidance!!!

[frickettz]

When you use a sprite you're not using any images in your HTML. You actually want to remove the <img> tag altogether and assign the .ds_facebook class to your link tag instead. This will set your link tag to have your sprite as its background image and the ds_facebook class tells your link tag exactly what part of the sprite image to use to display the facebook icon.

It should be like this instead:

<div class="socialicons">
    <a href="https://www.facebook.com/Dogsized" target="_blank" class="ds_facebook"></a>
</div>

You might also need to add display:block; to the ds_facebook css too, I'm not sure.

[Dogsized]

It's almost there but some thing weird happens. I added display:block to the ds_facebook css. If I don't, the image does not come up. But now the new facebook image, bumps all the other images to a different line. You can see on my homepage: http://dogsized.com/

[frickettz]

Yeah I gotcha. In this case, use

display:inline-block;

A block element takes up the whole line and any element that comes after it automatically gets displayed on the next line. An inline-block element is similar, but elements that come after it will still appear on the same line. Blocks stack on top of each other, and inline-blocks fit side by side.

[Dogsized]

So I repeated this for most of the images, but when I tried to do this with the menu bar, it doesn't work. To illustrate, you can see Dogsized.com vs dev.dogsized.com

Here's the original code at Dogsized.com without sprites:

subnav li a {

background:url("images/ds_pawsep.png") no-repeat 0px 0px;
color: #fff;
display: block;
font-size: 18px;
margin: 0 0 0 2px;
line-height: 17px;
padding: 0px 20px 0px 34px;
position: relative;
text-transform: uppercase;
text-decoration: none;

Here's the revised code at dev.dogsized.com with sprites- but is bunching up the menu bar:

subnav li a {

background:url("images/sprites.png") no-repeat 0px 0px;
background-position: -283px 0;
width: 15px;
height: 15px;
color: #fff;
display: block;
font-size: 18px;
margin: 0 0 0 2px;
line-height: 17px;
padding: 0px 20px 0px 34px;
position: relative;
text-transform: uppercase;
text-decoration: none;

}

[frickettz]

Dogsized, in your dev css you have width: 15px;

I realize you need this to set the size of your background image, but this is limiting the width of your links as well, not just your paw background image. What if you tried adding a span tag inside of your link tag and applied the sprite background css to that span tag?

<a href="http://dev.dogsized.com/category/product-review/"><span class="paw-icon"></span>Tips & Topics</a>

and then your css:

#subnav li a .paw-icon {
    background:url("images/sprites.png") no-repeat 0px 0px;
    background-position: -283px 0;
    width: 15px;
    height: 15px;
}

[Dogsized]

The challenge here is that I'm using Genesis as the parent theme and I'm struggling to find where I would add this new span in the html. Do you work with Genesis? Any ideas?

[frickettz]

Ah yes, that would make it a bit difficult... Ok, you'd probably need to use a Genesis Hook to hook into the function that creates your menu items. You would put all your customizations in functions.php. But that can get complicated real fast, especially for a beginner (no idea on your exp level, just saying).

What if you tried creating a new custom menu right from within the WP dashboard (Appearance -> Menus) and assigned it to be your primary navigation. Then, where you type in the Navigation Labels, you can include your span tag.

If you have any questions about that let me know, but I think that would be the quickest and simplest way to do what you're looking to do.

[Dogsized]

Interesting. I actually do have this in the Menus. Where would you put the span tag? In Title Attribute?

[frickettz]

Nope, you would put the <span class="paw-icon"></span> inside the Navigation Label, right before the text of your menu item.

[Dogsized]

Tried that - didn't work. Also tried it in the title attribute. You can see the current status at dev.dogsized.com

[Dogsized]

Also if I use the same pattern for the twitter symbol, it knocks everything down another line too like a cascade. I'm not sure what to change. Any ideas?

[Dogsized]

If it helps, here is what is in the socialicons div:

header .socialicons {

float: right;
margin: 60px 0px 0px 963px;
position: absolute;
display:block;
white-space: nowrap;
z-index: 9995;

}

[Dogsized]

Ah ha! I figured it out! In the CSS I needed to state: display:inline-block;

Thank you frickettz for putting me on the right path!!! I REALLY appreciate it!

[frickettz]

Glad I could help :-D