How to customize social login icons

Tejas_Hapani

February 2015 in ZenCart

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

Bob_DamanMemberModerator

February 2015 Answer ✓

Hi Tejas,

custom icons are only available with our Basic (or a higher) Plan:
https://www.oneall.com/pricing-and-plans/

Have you already upgraded your OneAll site?

Regards,

Answers

Tejas_HapaniMember

February 2015

Hi Bob,

Thanks for your quick reply.

I am using "Freemium Plan" for now.
Bob_DamanMemberModerator

February 2015

Thee free plan unfortunately does not offer icon customisation. Sorry!
Test_UserMember

July 2023

Can I add custom css into Freemium Plan?

Welcome!

Please sign in to your OneAll account to ask a new question or to contribute to the discussions.

Please click on the link below to connect to the forum with your OneAll account.

Ask a question

Information

Documentation

How to customize social login icons

Best Answer

Answers

Welcome!

Information

Products & Services

Categories