LogIn Formular in Toolbar (Adminbar) einer Wordpress Seite anpassen

pcklick

Hallo liebes Forum
Ich habe ein, ich sag mal ziemlich schön Wordpress Seite erstellt
Zusätzlich möchte ich ein LogIn Formular erstellen, dass oben bei der Toolbar erscheint. Soweit hat es auch funktioniert, nur mit dem Design komme ich nicht zurecht. Das Ganze läuft dann noch über eine Php-Datei, die damit nichts zu tun hat. Hier mal der Code für die Toolbar meiner Seite:
http://www.pcklick.net (Meine Seite)
Der CSS-Code:

CSS

#adminloginform p {
    display: inline;
}


#adminloginform .login-username input,
#adminloginform .login-password input {
    font: 11px/24px sans-serif;
    height: 12px;
    border: none;
    color: #555;
    text-shadow: 0 1px 0 #fff;
    background-color: rgba( 255, 255, 255, 0.9 );
    -webkit-border-radius: 3px;
    border-radius: 3px;
}


#adminloginform #wp-submit {
    position: relative;
    cursor: pointer;
    overflow: visible;
    text-align: center;
    white-space: nowrap;
    background: #ccc;
    background: -moz-linear-gradient(bottom, #aaa, #ccc);
    background: -webkit-gradient(linear, left bottom, left top, from(#aaa), to(#ccc));
    padding: 10px 10px;
    height: 24px;
    font: bold 12px sans-serif !important;
    color: #444 !important;
    text-shadow: 0px 1px 0px #ddd !important;
    border: 1px solid #626262;
    -moz-border-radius: 1em;
    -webkit-border-radius: 1em;
    border-radius: 1em;
}


#adminloginform #wp-submit:active {
    background: #aaa;
    background: -moz-linear-gradient(bottom, #bbb, #ddd);
    background: -webkit-gradient(linear, left bottom, left top, from(#999), to(#bbb));
    -moz-box-shadow: inset 2px 2px 0 rgba(0,0,0,0.2);
    -webkit-box-shadow: inset 2px 2px 0 rgba(0,0,0,0.2);
    box-shadow: inset 2px 2px 0 rgba(0,0,0,0.2);
}


#adminloginform #wp-submit:hover {
    color: #000 !important;
}


#wp-admin-bar-register a {
    font-weight: bold;
}

Alles anzeigen

Nun mein Problem, oder meine Vorstellung:
- Eingabefelder für Benutzername und Passwort kleiner, in der Höhe zentriert
- Schrift, bzw. Text ebenfalls in der Höhe zentriert. Dh. "Benutzername", "Passwort" und "Anmelden" muss... etwas nach oben versetzt werden.

Uff
Ich hoffe, ich konnte das gut beschreiben
Ausserdem würde ich mich sehr, sehr über schnelle & gute Hilfe freuen, wer weiss, evtl. schreibe ich mal einen Artikel über diese tolle Seite
Spass beiseite, ich würde mich über Lösungen sehr freuen

LG Tarek

SinnlosS

Mit display:table-cell und vertical-align:middle auf #adminloginform sollte das hinhauen. Evtl. musst der form auch noch die Höhe deiner Toolbar geben (28px;).
Die p-Tags um die einzelnen form-Elemente brauchst du nicht.

Code

#adminloginform {
    display:table-cell;
    height:28px;
    vertical-align:middle;
  }