NOOB editing custom Wordpress CSS

social media in header

[thunderwoman]

I just can't figure out how the previous designer added the social media buttons in the header of this website.

The only image I find is social_sprite.png with both the FB and Twitter icons in it, but there are separate links in the actual header. Additionally, the code shows "connect with us on facebook" and "follow us on twitter," however that text shows no where on the page.

I need to add two more icons and I seriously need help. I think you can get the jist of it by looking at the page source code. If not, let me know what else you might need.

Thanks sooo much.
dk

[edited by: tedster at 6:46 am (utc) on Feb 21, 2013]
[edit reason] sorry, no specfiic domains [/edit]

[Andy Langton]

What you're describing sounds like it is probably CSS sprites. See here for one of the discussions on WebmasterWorld:

[webmasterworld.com...]

[thunderwoman]

Thanks for your response. This is obviously going to be a learning curve for me. Well, here I go.
Thanks again.
dk

[Andy Langton]

CSS sprites is a good technique for speeding up your webpages (since one image loads faster than many small ones). But it certainly isn't the easiest approach if you're new to HTML.

Here's another discussion that may help you along:

[webmasterworld.com...]

[thunderwoman]

Thanks again. Can you look at this current code, let me know if it is appropriate to follow it for my additions, please?

<a class="icon" href="http://facebook.com/thiswebsite"><span id="fb_icon"><p>Connect on Facebook</p></span></a>
<a class="icon" href="http://twitter.com/#!/thiswebsite"><span id="tw_icon"><p>Follow us on Twitter</p></span></a>

The this is the CSS code:

#fb_icon {
display: block;
position: relative;
top: 18px;
left: 455px;
background: url( /web_images/social_sprite.png ) no-repeat transparent scroll 0 0;
width: 20px;
height: 20px;
color: black;
}



a.icon {
width: 30px;
display:block;

}

#fb_icon p {
display: none;
}



#tw_icon {
display: block;
position: relative;
top: -2px;
left: 431px;
background: url( /web_images/social_sprite.png ) no-repeat transparent scroll -23px 0;
width: 20px;
height: 20px;
color: black;
}

#tw_icon p {
display: none;
}

Really, I appreciate your time.
dk

[edited by: tedster at 5:33 am (utc) on Feb 22, 2013]
[edit reason] no spcifics leading to the website, please [/edit]

[thunderwoman]

OK, I have worked and worked and truly need some guidance. I create a new sprite in Fireworks and uploaded it. I created a new id for each in the CSS and added all the links in the header file. My problem is that I cannot get the entire sprite visible. There are five icons and while it shows five separate icons, it shows each as the same last two in the sprite. I've adjusted the width in the CSS...and I'm sure none of this is making any sense without a visual, but I'm obviously in dire need.

[lucy24]

My problem is that I cannot get the entire sprite visible. There are five icons and while it shows five separate icons, it shows each as the same last two in the sprite.

Sounds like a typo. The kind where you kick yourself for missing it. Been there. Done that.

Generic sprite CSS, here using a graphic made up of five adjoining 16x16 blocks (the clever reader will deduce that I used my system default 16-color palette):

div.icons {margin: 0; padding: 0; text-align: right;}

div.icons a {display: inline-block; margin: 0; padding: 0; width: 16px; height: 16px; background-repeat: no-repeat; background-image: url("sprites.png"); padding: 0;}
#yellow {background-position: 0 0;}
#orange {background-position: -16px 0;}
#red {background-position: -32px 0;}
#pink {background-position: -48px 0;}
#blue {background-position: -64px 0;}

Generic sprite HTML:

<div class = "icons">
<a id = "yellow">&nbsp;</a><a id = "orange">&nbsp;</a><a id = "red">&nbsp;</a><a id = "pink">&nbsp;</a><a id = "blue">&nbsp;</a>
</div>

"display" has to be set to "inline-block" because only block-level elements have a width. No line breaks in the raw html because these will be interpreted as spacing between elements. nbsp because many things are safer when they have content of some kind, even if it isn't visible.

Sprites make me happy because when I first looked them up I found out that I already know how to do them. Eons ago when I made games, I used the identical system mutatis mutandis to collect groups of related images-- like, say, a wiggly thing slithering across the floor-- into a single resource file.

[thunderwoman]

lucy24 - the thing is that there is already code there (see above). I would think that when I replace the sprite with the new one, it would show, however it looks like the two from the original are still there and overlapped with the new. I'm wondering if I should just replace all the code and start from scratch.
dk

[lucy24]

If you collect all your related sprites into a single image class-- or, alternatively, something like a "div#my-sprites-here a" construction --then you only have to name the background image once. This, in turn, means that if you rename the image you only have to change the text in one place. (And this, in turn, is a basic principle of stylesheets and almost everything else having to do with computers: If you have to say the exact same thing twice, you're saying it in the wrong place.)

If the new code is showing the old image, there are basically two explanations. One is that some of the old code hasn't been changed; see above. The other is that the old version is still in your browser's cache.

The universal Fix For What Ails You is to empty your browser's cache. And also always try the code in multiple browsers. If the problem crops up in a browser you haven't used since October of 2011, you can safely say the problem is in the code. If the problem only occurs in your current first-choice browser, the problem is in the browser.