Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #1171

    Hi,

    I’d like to add floating social icons to the right side of my avisio site. Example: http://www.urlgone.com/ff1f61/

    How can I do this? I have the image files, but I don’t know how to create that hovering effect.

    Thanks!

    #34284

    The site uses following css rules for bookmarks:

    /* FLOATING SOCIAL icons ON SIDE OF SITE  */
    .custom #bookmarks {background: transparent; width: 7.1em; position: fixed; top: 15%; right: 0.55%;}
    .custom #bookmarks a {display: block; text-indent: -9999px; height: 7.1em;}

    .custom #bookmarks #twitter {background: url('/wp-content/uploads/Chrome-Twitter.png')}
    .custom #bookmarks #facebook {background: url('/wp-content/uploads/Chrome-Facebook.png')}
    .custom #bookmarks #delicious {background: url('/wp-content/uploads/Chrome-Delicious.png')}
    .custom #bookmarks #stumbleupon {background: url('/wp-content/uploads/Chrome-Stumbleupon.png')}
    .custom #bookmarks #digg {background: url('/wp-content/uploads/Chrome-Digg.png')}
    .custom #bookmarks #reddit {background: url('/wp-content/uploads/Chrome-Reddit.png')}

    Please be aware that css style rules can be copyright protected.

    The Dude

    #34285

    Hey Dude,

    thanks. I inserted the code into the styles.css and saved it. Then I inserted links to the social icons in the header.php (all the stuff between the opening and closing <div id=”bookmarks”> div area). But that just puts the links horizontally somewhere inside the header, instead of floating at the right site.

    What can I do to get it right?

    Thanks!

    #34286

    Try to remove the class custom – so it looks like:

    /* FLOATING SOCIAL icons ON SIDE OF SITE  */
    #bookmarks {background: transparent; width: 7.1em; position: fixed; top: 15%; right: 0.55%;}
    #bookmarks a {display: block; text-indent: -9999px; height: 7.1em;}

    #bookmarks #twitter {background: url('/wp-content/uploads/Chrome-Twitter.png')}
    #bookmarks #facebook {background: url('/wp-content/uploads/Chrome-Facebook.png')}
    #bookmarks #delicious {background: url('/wp-content/uploads/Chrome-Delicious.png')}
    #bookmarks #stumbleupon {background: url('/wp-content/uploads/Chrome-Stumbleupon.png')}
    #bookmarks #digg {background: url('/wp-content/uploads/Chrome-Digg.png')}
    #bookmarks #reddit {background: url('/wp-content/uploads/Chrome-Reddit.png')}

    The style rule “position: fixed; top: 15%; right: 0.55%” should float the images to the right.

    The Dude

    #34287

    Hi Dude,

    thanks, but still not working. Is the header.php the correct file where to put the div code with all the bookmark links?

    Is there maybe some particular position where to add the code in the file?

Viewing 5 posts - 1 through 5 (of 5 total)

The topic ‘Floating Social Icons – How to add them to the side?’ is closed to new replies.