我如何繞過WordPress登錄頁面的角落？

Question

我在我的WordPress網站中使用了自定義登錄頁面定製器插件，它製作了一個非常漂亮的插件頁面。使用CSS我可以圍繞我的徽標的角落，但我無法弄清楚如何舍入登錄表單的角落。網站上的其他內容都有圓角。以下CSS是我嘗試過的，但它不起作用。出於某種原因，只有邊框規範行被包含在渲染頁面的頭部的CSS中，並且邊框半徑保持不變。 HTML由插件的設置創建。我在4周前在他們的支持論壇上問過這個問題，但沒有得到答案。我希望這裏有人能幫助我。謝謝。

CSS

/*-------------------------------------------------------------- 
7.1 Login form 
--------------------------------------------------------------*/ 

.login #login form#loginform { 
    border: 5px double #999 !important; 
    border-radius: 16px !important; 
} 

#login ul.square { 
    color: #fefdff !important; /*----Splashed white ----*/ 
    background-color: transparent; 
    margin: 0 0 0 22px; 
    padding: 0 0 0 22px; 
    } 

#login ul.square li { 
    color: #fefdff !important; /*----Splashed white ----*/ 
    background-color: transparent; 
    list-style: square outside !important; 
    margin: 0 0 0 10px; 
/* padding: 1em 0 0.3em -1em !important; */ 
    padding: 3px 5px !important; 
    } 

#login p#backtoblog a:link { 
    color: #2662ef; /* Bright blue */ 
    background-color: transparent; 
    font-size: 90%; 
    font-weight: 400; 
} 

#login p#backtoblog a:hover, #login p#backtoblog a:focus { 
    color:#ddff22; /* vivid yellow */ 
    background-color: transparent; 
    font-size: 90%; 
    font-weight: 400; 
} 

#loginform { 
    border-radius:16px; 
} 

#login .loginform { 
    border-radius:16px; 
} 

HTML

<div id="login"> 
     <h1><a href="https://botanical-art.baeecorp.org" title="Botanical Artists for Education &amp; the Environment (BAEE)" tabindex="-1">Botanical Artists for Education &amp; the Environment (BAEE)</a></h1> 

<form name="loginform" id="loginform" action="https://botanical-art.baeecorp.org/wp-login.php" method="post"> 
    <p> 
     <label for="user_login">Username or Email Address<br> 
     <input name="log" id="user_login" class="input" value="" size="20" type="text"></label> 
    </p> 
    <p> 
     <label for="user_pass">Password<br> 
     <input name="pwd" id="user_pass" class="input" value="" size="20" type="password"></label> 
    </p> 
     <p class="forgetmenot"><label for="rememberme"><input name="rememberme" id="rememberme" value="forever" type="checkbox"> Remember Me</label></p> 
    <p class="submit"> 
     <input name="wp-submit" id="wp-submit" class="button button-primary button-large" value="Log In" type="submit"> 
     <input name="redirect_to" value="https://botanical-art.baeecorp.org/wp-admin/" type="hidden"> 
     <input name="testcookie" value="1" type="hidden"> 
    </p> 
</form> 

Answer 1

我的答案發現我的問題是在自定義登錄頁面定製插件自定義設置。 CSS自定義插件必須放入插件的自定義CSS框中，而不是放在WordPress附加CSS面板中。我已經使用WordPress Customizer的額外CSS面板來嘗試在這個問題的答案和評論中提出的幾件事情，但他們不是解決方案。我還安裝了一個額外的插件，做了很多很多事情，包括四捨五入的登錄框（但這是我所需要的）。我決定我不想再添加一個胖插件來編輯一個插件。我刪除了額外的插件並調查了自定義登錄頁面定製器插件的設置並找到了答案。

在WordPress定製器中，導航到「登錄定製器」菜單。在Login Customizer菜單中，導航到Login Customizer菜單底部的「Other」菜單項。這個其他菜單項有一個自定義CSS框。我刪除了一些新的CSS我會投入到那些沒有工作的WordPress的定製的附加CSS面板，貼吧到在登錄定製的其他菜單自定義CSS盒子：

form#loginform, form#lostpasswordform, form#resetpassform, form#registerform { 
    -moz-border-radius: 16px !important; 
    -webkit-border-radius: 16px !important; 
    -ms-border-radius: 16px !important; 
    -o-border-radius: 16px !important; 
    border-radius: 16px !important; 
    padding: 20px; 
    overflow: hidden; 
} 

dl.login-hello dt { 
    color: #fefdff !important; /*----Splashed white ----*/ 
    background-color: transparent; 
    font-size: 100%; 
    font-weight: normal; 
    margin: 0 0 0.4em 0; 
} 

dl.login-hello dd { 
    color: #fefdff !important; /*----Splashed white ----*/ 
    background-color: transparent; 
    font-size: 98%; 
    font-weight: normal; 
} 

dl dd:before { 
    content: " \2014 " ; 
    font-style: oblique; 
    margin: 0; 
    padding: 0; 
    } 

保存在自定義後登錄定製器中的CSS，登錄表單有圓角。

Answer 2

這是因爲你沒有給登錄表單的背景顏色section.You可以試試這個:)

#loginform { 
    -moz-border-radius: 16px; 
    -webkit-border-radius: 16px; 
    -ms-border-radius: 16px; 
    -o-border-radius: 16px; 
    border-radius: 16px; 
    background-color: red; /* specify the color which u want to gave in bg */ 
    padding: 20px; 
} 

可能在wordpress中它並不是因爲那個css覆蓋在wordpress中，那麼你可以使用我的更新代碼，即

#loginform { 
-moz-border-radius: 16px!important; 
-webkit-border-radius: 16px!important; 
-ms-border-radius: 16px!important; 
-o-border-radius: 16px!important; 
border-radius: 16px!important; 
background-color: red; //specify the color which u want to gave in bg 
padding: 20px; 

}

如果仍然面臨的問題，然後提供我住的網址，我會做的。

謝謝！

Answer 3

可以使用，