User Profile
Print screen without additional CSS
Structure with classes and id's
div.login h1 form fieldset div.login-fields label#username-lbl.required span.star input#username.validate-username.required div.login-fields label#password-lbl.required span.star input#password.validate-password.required button.button
CSS
/* -------------
User profile
-------------- */
/* Login screen user */
div.login {}
div.login h1 {
margin: 0 0 15px 0;
}
div.login form fieldset {
border: 1px #999 solid;
padding: 10px;
float: left;
}
div.login form fieldset div.login-fields {
padding: 0 0 7px 0;
}
div.login form fieldset div.login-fields label {
display: block;
}
Print screen after applying CSS
After logged in you see the following page.
Structure with classes and id's
div.profile h1 fieldset#users-profile-core legend dl dt dd dt dd dt sd dt dd fieldset#users-profile-custom legend dl dt dd dt dd dt sd dt dd dt dd dt dd a
CSS
/* ----------------------------
User profile after logged in
------------------------------- */
div.profile h1 {
margin: 0 0 15px 0;
}
div.profile fieldset {
display: block;
padding: 6px;
border: 1px #999 solid;
margin: 0 0 15px 0;
}
div.profile fieldset legend {
font-weight: bold;
font-size: 13px;
}
div.profile fieldset dl dt {
float: left;
width: 200px;
}
/* Item helpsite */
div.profile fieldset#users-profile-custom dl dd a {
padding: 0;
float: none;
background: none;
font-style: normal;
border: none;
text-decoration: underline;
color: #660000;
margin: 0;
}
div.profile fieldset#users-profile-custom dl dd a:hover {
padding: 0;
float: none;
background: none;
font-style: normal;
border: none;
text-decoration: underline;
color: #ff0000;
margin: 0;
}
/* Button change profile */
div.profile a {
display: block;
float: left;
padding: 3px 10px 3px 10px;
color: #666;
font-style: italic;
background-color: #e5e5e5;
border: 1px #999 solid;
text-decoration: none;
margin: 10px 0 0 0;
}
div.profile a:hover {
color: #000;
}
Print screen after applying CSS
When we click on the button to change the profile ("Wijzigen profiel") you see the following page.
Structure with classes and id's
div.profile-edit h1 form#member-profile.form-validate fieldset legend dl dt label#jform_name-lbl.hasTip.required span.star dd input#jform_name.required dt label#jform_username-lbl.hasTip.required span.star dd input#jform_username.validate-username.required dt label#jform_password1-lbl.hasTip span.optional dd input#jform_password1.validate-password dt label#jform_password2-lbl.hasTip span.optional dd input#jform_password2.validate-password dt label#jform_email1-lbl.hasTip.required span.star dd input.validate-email.required#jform_email1 dt label#jform_email2-lbl.hasTip.required span.star dd input.validate-email.required#jform_email2 fieldset legend dl dt label#jform_params_editor-lbl.hasTip span.optional dd select#jform_params_editor option dt label#jform_params_timezone-lbl.hasTip span.optional dd select#jform_params_timezone option dt label#jform_params_language-lbl.hasTip span.optional dd select#jform_params_language option dt label#jform_params_admin_style-lbl.hasTip span.optional dd select#jform_params_admin_style option dt label#jform_params_admin_language-lbl.hasTip span.optional dd select#jform_params_admin_language option value dt label#jform_params_helpsite-lbl.hasTip span.optional dd select#jform_params_helpsite option div button.validate span a
CSS
/* Change User profile */
div.profile-edit h1 {
margin: 0 0 15px 0;
}
div.profile-edit form#member-profile fieldset {
display: block;
padding: 6px;
border: 1px #999 solid;
margin: 0 0 15px 0;
}
div.profile-edit form#member-profile fieldset legend {
font-weight: bold;
font-size: 13px;
padding: 0 0 3px 0;
}
div.profile-edit form#member-profile fieldset dl dt {
float: left;
width: 250px;
padding: 0 0 2px 0;
}
div.profile-edit form#member-profile fieldset dl dd {
padding: 0 0 2px 0;
}
div.profile-edit form#member-profile fieldset dl dd input {
width: 210px;
}
div.profile-edit form#member-profile fieldset dl dd select {
width: 210px;
}
Print screen after applying CSS
