Log-in

  • Print

Print screen without any additional CSS

 

Log-in module ongestijld

 

Structure with classes and id's

Module class suffix is: "_login".

 

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

 

CSS

 

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

 

Print screen after applying CSS

 

Log-in module na stijling

 

A login screen in horizontal styling

 

Log-in formulier horizontaal

 

 

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 out

After a user has logged in the module displays a log out button.

 

Log uit zonder aanvullende stijling

 

Structure with classes and id's


div.moduletable_login
h3 Log-in
form#form-login
div Hallo admin
div (align=center) input.button

 

The log out button is centered. We want to style it to the left.

 

div.moduletable_login form#form-login div input.button {
   float: left;
}

 

Print screen after applying CSS

 

Log uit button gestijld

Comments (0)
Post a commment or ask a question!
Your Contact Details:
Comment:
Security
Please input the anti-spam code that you can read in the image.