Support » Fixing WordPress » Rollover/ hover text and reordering social icons

  • Resolved waynestiles

    (@waynestiles)


    How can I:

    1. reorder the social media icons

    2. put rollover/hover text over the social media icons as well as over the category buttons? For example, hovering my mouse over the FaceBook icon makes the text “Connect with me on FaceBook” come up.

    http://www.waynestiles.com/

    Thanks.

Viewing 11 replies - 1 through 11 (of 11 total)
  • 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.

    WPyogi

    (@wpyogi)

    Forum Moderator

    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.

    WPyogi

    (@wpyogi)

    Forum Moderator

    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

    WPyogi

    (@wpyogi)

    Forum Moderator

    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.

    WPyogi

    (@wpyogi)

    Forum Moderator

    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!

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘Rollover/ hover text and reordering social icons’ is closed to new replies.