 Joomla log-in css stijlen
De log-in module bestaat uit een aantal onderdelen. De inputvelden om de gebruikersnaam en het wachtwoord in te vullen. Verder zijn er 3 hyperlinks in de module opgenomen, gebruikersnaam vergeten, wachtwoord vergeten en registreren. De pagina's achter deze links zijn opgenomen onder het volgende hoofdstuk 5. L. Gebruiker / user. De log-in module heeft in de voorbeeld website een module class suffix: "_login". Na het inloggen toont de module een loguit button (voor stijling zie onderaan deze pagina).
Zonder aanvullende stijling ziet de module er als volgt uit.
Structuur
div.moduletable_login
h3 Log-in
form#form-login
fieldset.input
p#form-login-username label Gebruikersnaam
input.inputbox#modlgn_username p#form-login-password label Wachtwoord
input.inputbox#modlgn_passwd p#form-login-remember label Automatisch inloggen
input.inputbox#modlgn_remember input.button
ul
li a Wachtwoord vergeten?
li a Gebruikersnaam vergeten?
li a Registreer
stijlen
We stijlen eerst het het log-in formulier. We stijlen top-, bottomborders en marges om de log-in module te onderscheiden van de andere modules in de rechterkolom. Verder verwijderen we de fieldset, we maken de inputvelden even lang (in IE tonen de inputvelden een ongelijke lengte), maken de tekstgrootte van de hyperlinks onderaan iets kleiner en verwijderen de background-image van de checkbox (Automatisch inloggen). De stijlen zijn hieronder aangegeven.
div.moduletable_login {
margin: 0 15px 15px 0;
padding: 10px 0 10px 0;
border-top: 1px #660000 dotted;
Border-bottom: 1px #660000 dotted;
}
form#form-login {
width: 100%;
}
/* Fieldset */
div.moduletable_login form#form-login fieldset.input {
border: none;
}
/* Paragraaf instellingen label en inputvelden */
p#form-login-username,
p#form-login-password,
p#form-login-remember {
margin: 0 0 5px 0;
padding: 0;
}
/* inputveld gebruikersnaam en wachtwoord */
input#modlgn_username, input#modlgn_passwd {
width: 150px;
height: 18px;
border: 1px #8a9aa7 solid;
}
/* checkbox automatisch inloggen */
input#modlgn_remember {
background: none;
}
/* ongenummerde lijst login formulier */
div.moduletable_login ul { }
div.moduletable_login li a,
div.moduletable_login li a:active {
font-family: Arial;
font-size: 11px;
}
div.moduletable_login li a:hover {
font-family: Arial;
font-size: 11px;
}
Na stijling ziet de module er als volgt uit.
Een horizontale weergave van de log-in module
Het is vanzelfsprekend ook mogelijk om de login module horizontaal weer te geven. Bijvoorbeeld in de top van de website (zie onderstaand voorbeeld en stijlgegevens).
div.moduletable_login {
float: right;
margin: -8px 0 0 0;
padding: 0 20px 0 0;
}
div.moduletable_login h3 {
float: left;
color: #fff;
font-size: 14px;
line-height: 14px;
padding-top: 13px;
}
form#form-login {
float: left;
margin-left: 10px;
}
/* Fieldset */
div.moduletable_login form#form-login fieldset.input {
float: left;
border: none;
}
div.moduletable_login form#form-login fieldset.input input.button {
float: left;
}
/* Paragraaf instellingen label en inputvelden */
p#form-login-username,
p#form-login-password,
p#form-login-remember {
float: left;
margin: 0 0 0 0;
padding: 0;
}
/* Geen labels */
p#form-login-username label,
p#form-login-password label,
p#form-login-remember label {
Display: none;
}
/* inputveld gebruikersnaam en wachtwoord */
input#modlgn_username, input#modlgn_passwd {
float: left;
width: 90px;
height: 15px;
font-family:Arial, Helvetica, sans-serif;
font-size: 10px;
padding-top: 2px;
border: 1px #8a9aa7 solid;
margin: -14px 3px 0 0;
}
/* checkbox automatisch inloggen */
input#modlgn_remember {
display: none;
}
/* ongenummerde lijst login formulier */
div.moduletable_login ul {
display: none;
}
Log uit
Na het inloggen toont de module een log-uit button. Zonder aanvullende stijling ziet de module er als volgt uit.
Structuur
div.moduletable_login
h3 Log-in
form#form-login
div Hallo admin
div (align="center) input.button
De uitlog-button staat in een div die gecentreerd wordt. Dat is op zich vreemd, omdat in de inlog module alles links is gelijnd. We kunnen dit met stijling oplossen.
div.moduletable_login form#form-login div input.button {
float: left;
}
Na stijling ziet de module er als volgt uit.
|
Ik heb aan de linkerkant op mijn site een menu onder de main die heet Bucket fans. Daar onder een menuitem die naar login verwijst. Hoe kan ik zorgen dat ik als menuitem het loginscherm krijg dus niet dat ik eerst moet klikken en het login form op een pagina wordt getoond.