Customize an iframe for Wordpress OneAll Social Login Plugin

Question

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:

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?

Answer 1

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

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

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.

Hope the answer helps.

Answer 2

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;
}