resolvedhi i would like to know what to do in the codes, to make the social icons on the top header next to the search field box, to always stay on, pretty much no need to have the mouse cursor over the social icon for it to show the round buttonwith colors.
in otherwords the hover effect the it does to always stay on.
Nick
Moderator
Hi ,
To reverse that CSS would be too time consuming. It would be easier to just take 3 screenshots and use them since nobody would know the difference. If you are going that route , you might as well take a look at the hundreds of free and premium plugins available for social media on codecanyon.com or wordpress free plugin repository. Lets us know how you want to handle this.
Thanks,
Nick
to be honest i mean its a customer request, so for me css changes i love to do, but if i decide to change the png itself of the button and put it the color i want , do you think that it is a good idea. And id rather do it the code way seriously cause its something im expecting from support too , like any other changes that people ask form support, whether its small code change or not, when we begin to get support for a minor code change we look at theprincipal of it so im expecting no matter what to get the code to change and do it. Cause dont forget too that i baught the template because its well built and very nice and its not the only one i invest on from kreisi. So the way i want to go is the css
Ismael
Moderator
Hi,
You can open css > layout.css and find this code
.social_bookmarks_rss a{ background: transparent url(../images/icons/icon-rss.png) center 0px no-repeat; }
Now find this code for the rss hover
.social_bookmarks_rss:hover a, div .social_bookmarks_rss .css_3_hover {background-position: center -43px ; background-color:#ffa133; }
Notice the background color? Get that and place it on our first code, something like this
.social_bookmarks_rss a{ background: transparent url(../images/icons/icon-rss.png) center 0px no-repeat; background-color:#ffa133; }
Do this for every social icons. Though changing the color of the actual image will work too.
Regards,
Ismael
doesngt work
pretty much wheni do the steps you required, what happens is the Letter F for facebook dissapears then when i put my mouse cursor over it where its suppose to be located, the hover effect takes in place , so pretty much all WHAT it does is take off the FLetter for facebook
;-S
Devin
Moderator
Hi capmaticenvato,
For each of the social icons you have you will need to add css like this to your custom.css file or Quick CSS:
#top .social_bookmarks_rss a {
background-position: center -43px;
background-color: #ffa133 !important;
-webkit-border-radius: 40px;
-moz-border-radius: 40px;
border-radius: 40px;
}Make sure that the color gets !important and that the class selector is appropriate for the icon (ie what it shows in layout.css lines 408-424 for the class selector name)
You won't get the exact same look (IE no slight shadow on the icon) as when you hover but this is the only way I see of removing the hover effect.
Regards,
Devin
walili
Member
I also wanted to display the icons with a color filled in the background, but it does not work, I changed the line:
.social_bookmarks .twitter{background: transparent url(../images/layout/icon-twitter.png) 0 center no-repeat; }
by
.social_bookmarks .twitter{background: transparent url(../images/layout/icon-twitter.png) 0 center no-repeat; background-color:#37589b;}
but it did not work :(
You must log in to post.
Please start by registering an account for this forum here
Create a new thread and tell me what problems you are encountering and what you want to know.
There is no step 3 :)
We try to answer all questions within a day, monday-friday.
