為Wordpress OneAll社交登錄插件自定義iframe

Question

我剛剛為我的Wordpress博客（ https://wordpress.org/plugins/oa-social-login/ ）安裝了OneAll社交登錄插件。

該插件允許用戶使用其社交媒體帳戶登錄我的網站。 我選擇了Facebook，Twitter和Google作為我的網站。

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

看起來像這樣：

如果我取消選中

背景圖片：url（“ / img / api / socialize / providers / logo / sprite_35_35.png”）;

在我的Chrome開發者工具中，所有3個社交媒體圖標都消失了。

我的目標是要能夠將這些圖標更改為一個堆疊在一起的自定義160x32圖標，刪除Powered by OneAll社交登錄，並能夠使用CSS Login With進行自定義。

有什么辦法可以將我自己的CSS類歸因於iframe中的元素？

Answer 1

登錄到https://app.oneall.com/signin

轉到實施選項卡，然后選擇社交登錄向導。 從“選擇主題：”下拉列表中選擇“使用自定義主題”

將您的CSS文件上傳到您自己的域中，並在自定義CSS字段中提供路徑，然后您可以添加自己的社交圖標樣式。

希望答案有所幫助。

Answer 2

PHP代碼（如果在主題中使用簡碼）

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

否則，如果您在任何插件或其他上使用

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