WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Rollover/ hover text and reordering social icons (12 posts)

  1. waynestiles
    Member
    Posted 2 years ago #

    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.

  2. broadleon
    Member
    Posted 2 years ago #

    2. Place this in style sheet and style accordingly

    ul.social_icons li a:hover {
    }
  3. waynestiles
    Member
    Posted 2 years ago #

    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?

  4. broadleon
    Member
    Posted 2 years ago #

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

    Add after a } closing curly bracket

    Add

    ul.social_icons li a:hover {
    }
  5. waynestiles
    Member
    Posted 2 years ago #

    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.

  6. WPyogi
    Volunteer Moderator
    Posted 2 years ago #

    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.

  7. WPyogi
    Volunteer Moderator
    Posted 2 years ago #

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

  8. broadleon
    Member
    Posted 2 years ago #

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

  9. WPyogi
    Volunteer Moderator
    Posted 2 years ago #

    Can you do what the OP asked with CSS?

  10. waynestiles
    Member
    Posted 2 years ago #

    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.

  11. WPyogi
    Volunteer Moderator
    Posted 2 years ago #

    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...

  12. waynestiles
    Member
    Posted 2 years ago #

    Success!

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

    Thanks much, WPyogi!

Topic Closed

This topic has been closed to new replies.

About this Topic