How would i go about adding a new social medea icon into the social medea section in salient options? For photo sharing 500px.com is a massive site these days, would be great to have it added into my site.
You will have to replace the image on a exsting icon. Please upload a icon image and provide us the page url so i can write up custom css to replace that particular icon.
Please upload the png via the media library and provide link and select the github icon to show on the website so i can write up the css to replace it.
The above code plus some padding worked great to place the icon in nicely. However the on hover colour change effect is not working?
Also, the icon colour is slightly off, i tried to match this in photoshop but couldn't get it exact. Does this colour change with the theme or are the icons always the same shade of grey (if the latter can supply us with the exact color code?)
The hover effect works now but upon moving the cursor across the 500px icon it disappears momentary then displays the 'blue hover' icon (per your css code above), doesn't look nice at all. Any idea how to fix this? The size of each icon is 5kb so its not a bandwidth issue.
Anyway to 'globally' turn off the hover effect on the social icons then? If all the social icons are just grey in the footer then that will be ok, i just want them to all look consistently the same. As opposed to the one 500px having an odd momnetary loading effect upon hover.
Hi Guys,
How would i go about adding a new social medea icon into the social medea section in salient options? For photo sharing 500px.com is a massive site these days, would be great to have it added into my site.
Cheers
Kerrin
Hey Kerrin!
You will have to replace the image on a exsting icon. Please upload a icon image and provide us the page url so i can write up custom css to replace that particular icon.
Thanks
ThemeNectar Support Team
Hey Tahir,
please overwrite 'GitHub' in exchange for the 500 px social icon. Icon attached below in PNG, page url follows
Cheers
Kerrin
Hey Again!
Please upload the png via the media library and provide link and select the github icon to show on the website so i can write up the css to replace it.
Thanks
ThemeNectar Support Team
hey tahir,
hitgub icon added to footer now, 500px icon now in media library with link below
cheers,
kerrin
Hey!
.icon-github-alt:before { opacity: 0; } i.icon-github-alt { background: url(http://ticksy_attachments.s3.amazonaws.com/8881703611.png); background-repeat: no-repeat; background-size: 100%; }
ThemeNectar Support Team
Hey Tahir,
The above code plus some padding worked great to place the icon in nicely. However the on hover colour change effect is not working?
Also, the icon colour is slightly off, i tried to match this in photoshop but couldn't get it exact. Does this colour change with the theme or are the icons always the same shade of grey (if the latter can supply us with the exact color code?)
Cheers,
Kerrin
Hey!
You need to set a hover background image as well.
i.icon-github-alt:hover { background: url(http://ticksy_attachments.s3.amazonaws.com/8881703611.png); background-repeat: no-repeat; background-size: 100%; }
ThemeNectar Support Team
Hi,
The hover effect works now but upon moving the cursor across the 500px icon it disappears momentary then displays the 'blue hover' icon (per your css code above), doesn't look nice at all. Any idea how to fix this? The size of each icon is 5kb so its not a bandwidth issue.
Thanks,
Kerrin
Hey!
a[href^="http://500px"]:hover { background: url(http://ticksy_attachments.s3.amazonaws.com/8881703611.png); background-repeat: no-repeat; background-size: 100%; }
ThemeNectar Support Team
hey tahir,
i added the the latest css code above to replace the previous, but now the hover icon is appearing behind the main icon.
The code for all this i have pasted below
/*add new social icon main*/
.icon-github-alt:before {
opacity: 0;
}
i.icon-github-alt {
background: url(http://kerrinrowemedia.com/wp-content/uploads/2014/11/500-Px-256-Main-Grey-PNG-e1415037408522.png);
background-repeat: no-repeat;
background-size: 100%;
}
/*add new social icon hover*/
a[href^="http://500px"]:hover {
background: url(http://kerrinrowemedia.com/wp-content/uploads/2014/11/500-Px-256-Hover-Blue-PNG-e1415037429328.png);
background-repeat: no-repeat;
background-size: 100%;
}
Hey!
Add in this revised css and remove the above :
/*add new social icon main*/ a[href^="http://500px"] i { opacity: 0 !important; } a[href^="http://500px"] { background: url(http://kerrinrowemedia.com/wp-content/uploads/2014/11/500-Px-256-Main-Grey-PNG-e1415037408522.png); background-repeat: no-repeat; background-size: 100%; width: 32px !important; background-position-y: -2px !important; } /*add new social icon hover*/ a[href^="http://500px"]:hover { background: url(http://kerrinrowemedia.com/wp-content/uploads/2014/11/500-Px-256-Hover-Blue-PNG-e1415037429328.png); background-repeat: no-repeat; background-size: 100%; }
Thanks
ThemeNectar Support Team
ok, i added the new block of css code above in, removing the previous.
The hover icon appears on top now, but the momentary delay upon hovering over the icon is still prevalent.
Hey Again!
I am afraid i am out of ideas. Please consider hiring a freelancer for futher customization of the theme.
Best,
-T
ThemeNectar Support Team
Anyway to 'globally' turn off the hover effect on the social icons then? If all the social icons are just grey in the footer then that will be ok, i just want them to all look consistently the same. As opposed to the one 500px having an odd momnetary loading effect upon hover.
Hey!
html body #footer-outer #copyright li a i:hover { color: #777777!important; }
ThemeNectar Support Team
ok nice, looks consistent now. Thanks again tahir.
Cheers
Kerrin
Hi to everyone,
my solution for this was only with this lines, and It work perfectly:
#header-outer #social-in-menu i.fa-github-alt:before, #header-outer #social-in-menu i.fa-github-alt:after { content: ''; background: url(http://kerrinrowemedia.com/wp-content/uploads/2014/11/500-Px-256-Main-Grey-PNG-e1415037408522.png); background-repeat: no-repeat; background-size: 19px; width: 19px; height: 19px; background-position: center; display: inline-block; } /* hover translation effect */ #header-outer #social-in-menu a i.fa-github-alt:after { transform: translate3d(50%,0,0); }Hope this can help someone =)
trying to do exactly this - code didn't work for my site though :/