Social media icons in the Graphene top bar looks more elegantly if you add hover effect to it. For example, if you mouseover the twitter icon in top bar, it gets highlighted. Move your pointer over social media icons in my top bar for a live action or look at these images.
This is how social media icons look usually.
Graphene social media icons in normal condition.
This is a good example for hovering effect in top bar icons. Look at the twitter icon which is being highlighted.
Hover effect when mouseovering twitter icon.
Holy $***! How did you do that? I want to try this in my site!!
Well, that’s the most asked question on my private mail in this week. This can be done by adding opacity property to the top bar icons. Here is a ready to use CSS code. If you’re using child theme, then add this to your style sheet. Otherwise go to Graphene options –> Display –> Custom CSS and put this there.
#profiles a { opacity:0.6;filter:alpha(opacity=60); } #profiles a:hover{ opacity:1;filter:alpha(opacity=100); } |
Here I’m using opacity 0.6 for normal elements and 1.0 for hovering effect. You can change this to suite your needs.
Follow these topics Graphene, WordPress
Short Link:
Loading tweets...
9 comments
Skip to comment form ↓
Helmut
February 17, 2012 at 4:34 am (UTC 5.5) Link to this comment
THX! Worx GREAT! EASY to do!
Where I do ad some space about the Content..?
(Like on this blog)
Prasanna SP
February 17, 2012 at 10:07 am (UTC 5.5) Link to this comment
Thanks Helmut!
To add some space at the top of the page, add this to Custom CSS,
Manuel
March 14, 2012 at 3:33 am (UTC 5.5) Link to this comment
thanks for this post. tried it on my site and it worked. I simply love it
Manuel
March 16, 2012 at 4:29 pm (UTC 5.5) Link to this comment
does it work with other themes too?
Prasanna SP
March 19, 2012 at 6:04 pm (UTC 5.5) Link to this comment
Yes, it should work with other themes as well. But, you’ve to target the correct class.
Medical Billing and Coding School
April 10, 2012 at 4:34 pm (UTC 5.5) Link to this comment
Thanks will use this on my site!
Ian Walters
June 20, 2012 at 12:47 am (UTC 5.5) Link to this comment
Just to let you know that #rss has changed to #top-bar in later versions of Graphene.
Still works a treat with that minor change…
#top-bar a {opacity:0.6;filter:alpha(opacity=60);
}
#top-bar a:hover{
opacity:1;filter:alpha(opacity=100);
}
Prasanna SP
June 23, 2012 at 8:40 am (UTC 5.5) Link to this comment
Hi, Ian! #rss is now changed to #profiles. Thanks for your notification. I’ve updated the post.
Josh
July 3, 2012 at 2:30 am (UTC 5.5) Link to this comment
Love all your hover affects Prasanna. Subtle, yet effective!! I especially like the widgets and the footer hovers. Nice