Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #16752

    Hi,

    I want to cancel hoover effect on social icons and make the icons bigger? Could you please help me…

    thanks,

    - Toby

    #92736

    Hello,

    To remove hover effect, just edit css > layout.css and find this code

    #top .social_bookmarks .rss:hover	 {background-position:  -47px center; background-color:#ffa133;}
    #top .social_bookmarks .facebook:hover{background-position: -47px center; background-color:#37589b;}
    #top .social_bookmarks .twitter:hover {background-position: -47px center; background-color:#46d4fe;}
    #top .social_bookmarks .mail:hover {background-position: -47px center; background-color:#9fae37;}
    #top .social_bookmarks .dribbble:hover{background-position: -47px center; background-color:#e44885;}
    #top .social_bookmarks .linkedin:hover{background-position: -47px center; background-color:#419cca;}
    #top .social_bookmarks .search:hover {background-position: -47px center; background-color:#222222;}
    #top .social_bookmarks .gplus:hover {background-position: -47px center; background-color:#de5a49;}

    Replace it with

    /*
    #top .social_bookmarks .rss:hover {background-position: -47px center; background-color:#ffa133;}
    #top .social_bookmarks .facebook:hover{background-position: -47px center; background-color:#37589b;}
    #top .social_bookmarks .twitter:hover {background-position: -47px center; background-color:#46d4fe;}
    #top .social_bookmarks .mail:hover {background-position: -47px center; background-color:#9fae37;}
    #top .social_bookmarks .dribbble:hover{background-position: -47px center; background-color:#e44885;}
    #top .social_bookmarks .linkedin:hover{background-position: -47px center; background-color:#419cca;}
    #top .social_bookmarks .search:hover {background-position: -47px center; background-color:#222222;}
    #top .social_bookmarks .gplus:hover {background-position: -47px center; background-color:#de5a49;}

    #top .social_bookmarks li:hover a{background: transparent url(../images/layout/icon-social-reflect.png) 0 -10px no-repeat;}
    */

    Regards,

    Ismael

    #92737

    Hi Ismael,

    Thanks. This removed the hoover effect, but I would like to keep the colors from before. Is this possible and can I make them bigger?

    #92738

    Hi,

    Yes you can do it if you know how to make CSS Sprites, since bigger images will cause the coordinates of each individual image within the sprite to shift. You can learn more here, as well as automatically create sprites http://spriteme.org/ , however if you know nothing about css or html (at the minimum) you will have a steep learning curve.

    If you want to keep the hover effect and get rid of the color effect, you would need to modify this png file ‘images/layout/icon-social-reflect.png’ to take the colors off.

    Thanks,

    Nick

    #92739

    Thanks for your help. I think i’m just gonna stick with the current size:-)

    What I really want to do is cancel the hoover effect, but keep the colors that appears from the current hoover effect. If they could have colors constantly it would be great.

    Sorry if I was a bit unclear about that before.

    #92740

    Hi!

    So you want to remove the reflection effect / png image? If yes add following code to css/custom.css:

    #top .social_bookmarks li:hover a{background: transparent;}

    Best regards,

    Peter

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

The topic ‘How can I cancel hoover effect on social icons and make the icons bigger?’ is closed to new replies.