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&utm_medium=banner&utm_campaign=branding" target="_blank">Powered by <span class="plugin_title">OneAll Social 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?