WordPress Login und Registrierung mit eigenem Design (Teil 3)

Im dritten Teil dieses Tutorial wird nun der obere Textabsatz (blau) durch einen DIV-Container ersetzt, der so gestaltet werden kann, dass die Login-Seite möglichst viel Ähnlichkeit mit dem Frontend-Design der Webseite bekommt oder je nach eigenem Geschmack auch ganz anders angepasst werden kann.

In diesem Beispiel wird der DIV-Container mit einem Header-Bereich und einer Navigationsleiste gefüllt, die einen Link zur Startseite und zwei weitere Beispiel-Links enthält. Somit wird der Link "Zurüch zu Blogtitel" unterhalb der Eigabefelder überflüssig und kann entfernt werden.

Auch die graue Hintergrundfarbe der Seite soll geändert werden, in diesem Beispiel einfach weiß. Die Eingabefelder erscheinen auch weiterhin horizontal mittig zentriert auf der Seite, jedoch ohne eine sichtbare Begrenzung des rechteckigen Formularkastens (Form-Element). Dieses ist zwar immer noch vorhanden, aber eben nicht mehr sichtbar. Dazu wird der Schatteneffekt des Form-Elements entfernt.

Der Textabsatz im mittleren Teil des Eigabeformulars erhält einen Link, beispielsweise "weitere Infos". Die Links "Registrieren | Passwort vergessen?" erscheinen horizontal mittig auf der Seite. Auch der Footer-Bereich wird angepasst und bekommt eine schwarze Hintergrundfarbe und eine hellgraue Schrift mit Link.

Das Ergebnis soll dann so aussehen:

<?php
/*
Plugin Name: Design Login-Seite
Description: Eigenes Plugin zur Anpassung der Login- und Registrierungs-Seite
Version: 1.0
Author: Name
*/

//CSS-Angaben einbinden
function design_login_styles() {
echo '<style type="text/css">
html{font-size:62.5%}
html,body{height:101%}
body{font-family:Arial,Helvetica,sans-serif;font-size:160%;font-weight:400;
line-height:normal;color:#444;background-color:#000}
body.login div#login{width:100%;padding:0;margin:0;background-color:#fff}
body.login div#login p.message,body.login div#login div#login_error{
border:1px solid #ff0000;-webkit-box-shadow:none;box-shadow:none;
margin:20px auto 0 auto;margin:2rem auto 0 auto;
width:auto;height:auto;max-width:500px;max-width:50rem}
body.login div#login h1{display:none}
body.login div#login form#loginform,
body.login div#login form#registerform,
body.login div#login form#lostpasswordform{margin:0 auto 0 auto;
padding:26px 10px 20px 10px;padding:2.6rem 1rem 2rem 1rem;
width:auto;height:auto;max-width:300px;max-width:30rem;
-webkit-box-shadow:none;box-shadow:none}
body.login div#login p#backtoblog{display:none}
div#header{background-color:#884D99;height:77px;height:7.7rem}
div.wrap{max-width:1200px;max-width:120rem;margin:0 auto;padding:0}
div#header div.wrap h2{margin:0;padding:18px 0 0 16px;padding:1.8rem 0 0 1.6rem;
font-size:30px;font-size:3rem;
border:none;text-shadow:none;
line-height:16px;line-height:1.6rem}
div#header div.wrap h2 a{color:#fffbff;text-decoration:none}
div#header div.wrap h2 a:hover{color:#ff00ff}
div#header div.wrap span.description{margin:0;padding:0 0 12px 16px;padding:0 0 1.2rem 1.6rem;
font-weight:700;font-size:15px;font-size:1.5rem;color:#e2bfe9}
div#nav-main{border-top:1px solid #ab8bb4;background-color:#44264c;
margin:0;padding:8px 0px 6px 0px;padding:0.8rem 0rem 0.6rem 0rem}
div#nav-main div.wrap{text-align:center}
div#nav-main div.wrap a{font-weight:700;color:#fff;text-decoration:none;
margin:0 8px 0 8px;margin:0 0.8rem 0 0.8rem;
padding:4px;padding:0.4rem;line-height:200%}
div#nav-main div.wrap a:hover{background-color:#a192a5;color:#000000}
p#p-login-middle,
p#p-register-middle{padding-bottom:16px;padding-bottom:1.6rem;margin-top:10px;margin-top:1rem;
font-size:14px;font-size:1.4rem;font-weight:700;font-style:italic;text-align:center}
p.submit{text-align:center}
p.submit input#wp-submit.button.button-primary.button-large{float:none;padding:0 80px 0 80px;padding:0 8rem 0 8rem}
.login #nav{margin:0;padding-bottom:36px;padding-bottom:3.6rem;
text-align:center;font-weight:700;font-size:16px;;font-size:1.6rem;color:#999}
.login #nav a{color:#0073aa}
div#login-footer{background-color:#000;padding:20px 0;padding:2rem 0;}
div#login-footer p#p-login-bottom{text-align:center;font-size:12px;font-size:1.2rem}
div#login-footer p#p-login-bottom a{color:#999}
</style>';
}
add_action('login_head', 'design_login_styles');

//Text oberhalb des Login-Formulars
function design_login_before() {
echo '<div id="header">
<div class="wrap">
<h2><a href="#">Blogtitel</a></h2>
<br /><span class="description">Beschreibung</span>
</div>
</div>
<div id="nav-main">
<div class="wrap">
<a href="#">Startseite</a>
<a href="#">Beispiel-Seite 1</a>
<a href="#">Beispiel-Seite 2</a>
</div>
</div>';
}
add_action('login_message', 'design_login_before');

//Text in der Mitte des Login-Formulars
function design_login_middle() {
echo '<p id="p-login-middle">weitere <a href="#" target="_blank">Info´s</a> ...</p>';
}
add_action('login_form', 'design_login_middle');

//Text in der Mitte des Registrierungs-Formulars
function design_register_middle() {
echo '<p id="p-register-middle">weitere <a href="#" target="_blank">Info´s</a> ...</p>';
}
add_action('register_form', 'design_register_middle');

//Text unterhalb des Login-Formulars
function design_login_footer() {
echo '<div id="login-footer"><p id="p-login-bottom">&copy; 2012 -&nbsp;'; 
echo date("Y");
echo '&nbsp;by Blogtitel - <a href="#">Impressum</a> - All Rights Reserved -</p></div>';
}
add_action('login_footer', 'design_login_footer');
?>

« zurück zu Teil 2

 

Galerien / Präsentationen...

city001-sidebar

link-icon002 Galerien-Übersicht...

Kategorien

Alle Artikel

(Inhaltsverzeichnis)

link-icon002 alphabetisch geordnet...

link-icon002 nach Datum geordnet...

soziale Netzwerke...

"Cogniclip" ist auch auf folgenden sozialen Netzwerken vertreten:

Cogniclip auf Twitter Cogniclip auf Google+
 

Per RSS Beiträge abonnieren:

RSS-Feed von Cogniclip
 

Kalender

Dezember 2017
M D M D F S S
 123
45678910
11121314151617
18192021222324
25262728293031
« Feb