WordPress.org

Support

Support » How-To and Troubleshooting » [Resolved] Rollover/ hover text and reordering social icons

[Resolved] Rollover/ hover text and reordering social icons

  • waynestiles
    Member

    @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)
  • broadleon
    Member

    @broadleon

    2. Place this in style sheet and style accordingly

    ul.social_icons li a:hover {
    }
    waynestiles
    Member

    @waynestiles

    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?

    broadleon
    Member

    @broadleon

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

    Add after a } closing curly bracket

    Add

    ul.social_icons li a:hover {
    }

    waynestiles
    Member

    @waynestiles

    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
    Forum Moderator

    @wpyogi

    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
    Forum Moderator

    @wpyogi

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

    broadleon
    Member

    @broadleon

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

    WPyogi
    Forum Moderator

    @wpyogi

    Can you do what the OP asked with CSS?

    waynestiles
    Member

    @waynestiles

    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
    Forum Moderator

    @wpyogi

    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…

    waynestiles
    Member

    @waynestiles

    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 ‘[Resolved] Rollover/ hover text and reordering social icons’ is closed to new replies.