Customize an iframe for Wordpress OneAll Social Login Plugin

0
votes

I just installed the OneAll Social Login Plugin for my Wordpress blog (https://wordpress.org/plugins/oa-social-login/).

This plugin allows user to login into my website using their social media account. I picked Facebook, Twitter and Google for my website. 

<div class="frame" id="social_login_frame">     
        <div id="content">
            <div id="providers" class="providers_unpaginated"><div class="providers_group" id="providers_group_1"><div class="providers_block"><div class="providers_row"><div class="provider" id="provider_facebook"><a class="button" id="button_facebook" href="#" rel="nofollow" title="Login with Facebook" alt="Login with Facebook"><span class="tick"></span></a><div class="name" id="name_facebook">Facebook</div></div><div class="provider" id="provider_google"><a class="button" id="button_google" href="#" rel="nofollow" title="Login with Google" alt="Login with Google"><span class="tick"></span></a><div class="name" id="name_google">Google</div></div><div class="provider" id="provider_twitter"><a class="button" id="button_twitter" href="#" rel="nofollow" title="Login with Twitter" alt="Login with Twitter"><span class="tick"></span></a><div class="name" id="name_twitter">Twitter</div></div></div></div></div></div>         
        </div>  
        <div class="clear"></div>           
        <div class="footer">            

                <div id="branding">
                    <a href="http://www.oneall.com/services/social-login/?utm_source=mywebsite_login_frame&amp;utm_medium=banner&amp;utm_campaign=branding" target="_blank">Powered&nbsp;by <span class="plugin_title">OneAll&nbsp;Social&nbsp;Login</span></a>
                </div>

            <div id="message"></div>
        </div>  
    </div>


.plugin {
margin: 0;
padding: 0 0 20px 0;
background-color: transparent;
font-size: 12px;
color: #333;
font-family: Helvetica, Tahoma, Arial, sans-serif;
}

.plugin #content {
overflow: hidden;
}

.plugin #providers {
float: left;
position: relative;
}

.plugin #providers .providers_group {
float: left;
}

.plugin #providers.providers_unpaginated .providers_group .providers_block {
padding: 0 !important;
}
.plugin #providers .providers_group .providers_block {
overflow: hidden;
clear: both;
padding: 0 20px;
}

plugin #providers .providers_group .providers_block .providers_row {
clear: both;
}
.plugin #providers .providers_group .providers_block {
overflow: hidden;
clear: both;
padding: 0 20px;
}

.plugin #providers .provider {
width: 35px;
}

.plugin #providers .provider {
float: left;
width: 62px;
text-align: center;
padding: 2px 2px 4px;
outline: 0;
}


.plugin #providers .provider #button_facebook {
background-position: -76px -1px;
}


.plugin #providers .provider .button {
width: 35px;
height: 35px;
background-image: url("/img/api/socialize/providers/logo/sprite_35_35.png");
cursor: pointer;
display: block;
margin: 0 auto;
position: relative;
z-index: 9998;
outline: 0;
}

Which looks like this:

social login

If I uncheck

background-image: url("/img/api/socialize/providers/logo/sprite_35_35.png");

in my Chrome Developer Tools, all of the 3 social media icons disappear.

My goal would be to be able to change these icons for custom 160x32 icons stacked one over eachother, remove Powered by OneAll Social Login and be able to customize with CSS Login With.

Is there any way I can attribute my own CSS class to elements inside an iframe?

2
csswordpressiframeattributes
How to display buttons in the .tpl file ? i have tried <div id="oneall_social_login"></div> and <div id="oneall_social_login_box"></div> as well but no luck i can not see login with facebook button. – Shashank Shah

2 Answers

2
votes

Login to https://app.oneall.com/signin

Go to implementation tab and then select social login wizard. enter image description here Select "use custom theme" from the "Select your theme:" dropdown enter image description here

Upload your css file on your own domain and give a path in the custom css field and then you can add your own social icons styles. enter image description here

Hope the answer helps.

0
votes

PHP code If you are using shortcode into theme

<div class="hide-pby">
     <?php echo do_shortcode("[oa_social_login]"); ?>
</div>

Else If you using on any plugin or others

<div class="hide-pby">
    <?php echo do_action('oa_social_login'); ?>
</div>

CSS 

.hide-pby {
    position: relative;
}
.hide-pby::before {
    position: absolute;
    width: 200px;
    height: 25px;
    content: "";
    left: 0;
    bottom: 0;
    background-color: #f3f4f6;
}