Wie kann ich die Ecken in einer WordPress-Login-Seite abrunden?

Question

Ich benutze das Custom Login Page Customizer-Plugin in meiner WordPress-Site und es machte eine sehr schöne Plugin-Seite. Mit CSS kann ich die Ecken meines Logos abrunden, aber ich kann nicht herausfinden, wie man die Ecken des Login-Formulars abrundet. Alles andere auf der Website hat abgerundete Ecken. Das folgende CSS ist, was ich versucht habe, aber es funktioniert nicht. Aus irgendeinem Grund wird in der Kopfzeile der gerenderten Seite nur die Rahmenspezifikationslinie in den CSS eingeschlossen, und der Rahmenradius wird weggelassen. Der HTML-Code wird durch die Einstellungen des Plugins erstellt. Ich habe dies in ihrem Support-Forum vor 4 Wochen gefragt und habe keine Antwort bekommen. Ich hoffe, dass jemand hier mir helfen kann. Vielen Dank.

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

ich die Antwort auf meine Frage gefunden ist in den Anpassungseinstellungen für die benutzerdefinierte Login-Seite Customizer Plugin. CSS zum Anpassen des Plugins musste in das Custom CSS-Feld des Plugins und nicht in das WordPress Additional CSS-Panel eingegeben werden. Ich hatte das zusätzliche CSS-Panel des WordPress-Customizers benutzt, um verschiedene Dinge auszuprobieren, die in Antworten und Kommentaren zu dieser Frage vorgeschlagen wurden, aber sie waren nicht die Lösung. Ich habe auch ein zusätzliches Plugin installiert, das viele Dinge erledigt hat, einschließlich der Abrundung der Login-Box (aber das war alles, was ich tun musste). Ich entschied, dass ich kein weiteres fettes Plugin wollte, nur um ein Plugin zu bearbeiten. Ich löschte dieses zusätzliche Plugin und untersuchte die Einstellungen des Custom Login Page Customizer Plugin und fand die Antwort.

Navigieren Sie im WordPress Customizer zum Menü "Login Customizer". Navigieren Sie im Menü "Login Customizer" zum Menüpunkt "Other" am unteren Rand des Login Customizer-Menüs. Dieser Menüeintrag Andere enthält ein Feld für benutzerdefiniertes CSS. Ich entfernte einig neue CSS ich in die Wordpress-Customizer des zusätzlichen CSS-Panel setzen würde, die nicht gearbeitet hatte, und klebte es in das Feld für benutzerdefinierte CSS in der anderen Menü Anmeldung Customizer:

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

Nach dem Speichern dass im Custom CSS im Login Customizer, das Login-Formular hatte abgerundete Ecken.

Answer 2

Dies ist, weil Sie nicht die Hintergrundfarbe der Login-Formular nicht geben section.You versuchen können, diese :)

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

sein kann in WordPress ist es nicht, weil das CSS in WordPress überschreiben, dann können Sie meinen aktualisierten Code verwenden, dh

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

}

Und wenn noch vor dem Problem, dann geben Sie mir Live-URL ich tun werde.

Danke !!

Answer 3

Sie können verwenden,