How to customize social login icons

Hi

I am trying to customize the social login icons with custom css using below code, but it is not customizing the icons whereas when i use the custom css here: https://app.oneall.com/applications/application/implementation/wizard/social-login/?applicationid=315522
its working fine.

But not working when i apply the same code on the website.

<script type="text/javascript"> var oa = document.createElement('script'); oa.type = 'text/javascript'; oa.async = true; oa.src = '//mysubdomain.api.oneall.com/socialize/library.js' var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(oa, s) </script> <div id="oa_social_login_container"></div> <script type="text/javascript"> /* Replace #your_callback_uri# with the url to your own callback script */ var your_callback_script = my_callback_url'; /* Embeds the buttons into the container oa_social_login_container */ var _oneall = _oneall || []; _oneall.push(['social_login', 'set_providers', ['facebook', 'twitter', 'linkedin']]); _oneall.push(['social_login', 'set_callback_uri', your_callback_script]); _oneall.push(['social_login', 'set_custom_css_uri', 'my_full_path_to_custom_css/stylesheet.css']); _oneall.push(['social_login', 'do_render_ui', 'oa_social_login_container']); </script> /* here is the custom css that i am using */ .plugin #providers .provider { width: 52px !important; margin-bottom: 0px !important; padding: 0 !important; } .plugin #providers .provider .name { display: none !important; } .plugin #providers .provider .button { background: url("../images/social_icons.png") no-repeat scroll 0 0 transparent !important; height: 51px !important; width: 52px !important; } .plugin #providers .provider #button_facebook { background-position: 0 0px !important; } .plugin #providers .provider #button_twitter { background-position: -104px 0px !important; } .plugin #providers .provider #button_linkedin { background-position: -52px 0 !important }

Can anyone help me on this? what's doing wrong here?

Thanks in adv.
Tejas

Best Answer

Answers

Sign In or Register to comment.