Rollover/ hover text and reordering social icons

2. Place this in style sheet and style accordingly

ul.social_icons li a:hover {
}

Thanks, broadlean, but I’m so new at this I need a little more direction. Can you be more specific after my style sheet is open?

Find ul.social_icons in your style sheet around line 127?

Add after a } closing curly bracket

Add

ul.social_icons li a:hover {
}

Here is the code in that area:

ul.social_icons {margin: 0 auto !important; overflow: hidden;}
ul.social_icons img {position: absolute; left: 0; top: 0; border: 0;}
ul.social_icons .small {display: inline; top: 8px; left: 8px;}
ul.social_icons, ul.social_icons li {list-style: none; padding: 0; margin: 0;}
ul.social_icons li {width: 32px; height: 32px; float: left; line-height: 32px; text-align: center; position: relative;}
ul.large_icons li { width: 45px; height: 45px; }
ul.social_icons li, ul.social_icons li img {float: right;}
ul.social_icons li strong {position: absolute; left: -9000px;}

I can add the code you recommend, but I still don’t know how to specify the hover text for Facebook, Twitter, etc.

Actually, the answer to your #2 question is that that text (that shows when you rollover the image) is entered inside the image tags in the title attribute.

So for example, you might have the following image code in some content:

<img src="smiley.gif" alt="Smiley face" width="42" height="42" title="smiley face pop up" />

The last part (title=”smiley face pop up”) is what you are asking about. There is probably a place to enter the title data when you upload a photo — but you can also change this in the html code editor.

Broadleon’s answer refers to styling text links. You can’t add actual pop-up text using CSS.

You can do more than style a text link with css, you could add a popup image. like sexy bookmarks

Can you do what the OP asked with CSS?

I’ve looked around inside a number of files, but I can’t find one that has title= in it. These social icons came as part of the Standard Theme package.

The title attribute is MISSING for those images — that’s what you need to add! It looks like the social networking icons are added in a text widget, but I don’t know what file is generating the code that includes the images code that you need to change — looks like a widget function… Presumably, however, you customized that widget content as it includes your personal links — so wherever you did that, see if there is a place to add a title attribute to the image info. Or that would at least help you find which function or file you need to change. Sorry I can’t be of more help…

Success!

For any other Standard Theme 2 users, the file is called socialnetworking.php

Thanks much, WPyogi!