These forums are your way of communicating with the community of people developing and using tools provided by the OneAll platform. The forums are run by the community and moderated by the OneAll team during office hours.
Please stick to technical issues - and remember, no confidential information - these are public forums!

How to customize social login icons


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:
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 = '//' 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.

Best Answer


Sign In or Register to comment.