Comment contourner les coins dans une page de connexion WordPress?

Question

J'utilise le plugin Custom Login Page Customizer dans mon site WordPress et cela a fait une très belle page de plugin. Avec CSS, je suis capable de contourner les coins de mon logo mais je n'arrive pas à comprendre comment arrondir les coins du formulaire de connexion. Tout le reste sur le site a des coins arrondis. Le CSS suivant est ce que j'ai essayé mais ça ne marche pas. Pour une raison quelconque, seule la ligne de spécification de bordure est incluse dans le CSS dans l'en-tête de la page rendue et le border-radius est laissé de côté. Le code HTML est créé par les paramètres du plugin. J'ai demandé cela dans leur forum de support il y a 4 semaines et je n'ai pas eu de réponse. J'espère que quelqu'un ici pourra m'aider. Merci.

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

J'ai découvert la réponse à ma question est dans les paramètres de personnalisation pour le plug-in Customizer page de connexion personnalisée. CSS pour personnaliser le plugin a dû être mis dans la boîte CSS personnalisée du plugin et non dans le panneau CSS WordPress supplémentaire. J'avais utilisé le panneau CSS supplémentaire de WordPress Customizer pour essayer plusieurs choses suggérées dans les réponses et les commentaires à cette question mais ils n'étaient pas la solution. J'ai également installé un plugin supplémentaire qui a fait beaucoup de choses, y compris arrondir la boîte de connexion (mais c'était tout ce que j'avais besoin de faire). J'ai décidé que je ne voulais pas un plugin plus gros juste pour éditer un plugin. J'ai supprimé ce plugin supplémentaire et étudié les paramètres du plugin Custom Login Page Customizer et trouvé la réponse.

Dans le Customizer WordPress, naviguez jusqu'au menu "Login Customizer". Dans le menu Login Customizer, accédez à l'élément de menu «Other» en bas du menu Custom Customizer. Cet autre élément de menu a une case pour CSS personnalisé. J'ai enlevé un nouveau CSS je mettrais dans le panneau CSS supplémentaires de WordPress Customizer qui n'a pas travaillé, et collé dans la boîte pour le CSS personnalisé dans Autre menu du Connexion 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; 
    } 

Après avoir enregistré que dans la mesure CSS dans le Customizer de connexion, le formulaire de connexion avait arrondi les coins.

Answer 2

C'est parce que vous ne donnez pas la couleur d'arrière-plan de formulaire de connexion section.You peut essayer :)

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

Peut être dans wordpress il ne le fait pas parce que css écraser dans wordpress, alors vous pouvez utiliser mon code mis à jour ie

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

}

Et si elle est encore face au problème alors me fournir en direct url je ferai.

Merci!

Answer 3

Vous pouvez utiliser,