Hi,
I want to cancel hoover effect on social icons and make the icons bigger? Could you please help me...
thanks,
- Toby
How can I cancel hoover effect on social icons and make the icons bigger?
6 posts from 4 voices- Started 7 months ago by villumtobe
- Latest reply from Dude
- This topic is not a support question
-
Posted 7 months ago #
-
Ismael
ModeratorHello,
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,
IsmaelPosted 7 months ago # -
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?
Posted 7 months ago # -
Nick
ModeratorHi,
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
Posted 7 months ago # -
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.
Posted 7 months ago #
Reply
You must log in to post.
Create a new thread and tell me what problems you are encountering and what you want to know. 
There is no step 3 :) 
