Joomla gebruiker / user css stijlen

Deze module heeft betrekking op de pagina's en processen achter de hyperlinks van de log-in module (wachtwoord vergeten, gebruikersnaam vergeten en registreer).

Wachtwoord vergeten

Wanneer op de hyperlink wachtwoord vergeten wordt geklikt, wordt het volgende scherm getoond.

Structuur

Stijlen

div.componentheading
Deze stijl is al eerder besproken: div.componentheading

form.josForm.form-validate
Dit formulier heeft 2 stijlen "josForm" en "form-validate". De laatst genoemde zijn we al tegen gekomen bij weergave contact persoon. "josForm" is een nieuwe stijl. Bij "form-validate" zijn voor de voorbeeld website geen stijlen ingevuld. Voor deze pagina zijn ook geen aanvullende stijlen nodig.

table.contentpane
Deze stijl is al eerder besproken: table.contentpane. De stijlen die reeds ingevuld zijn:

table.contentpane {
   border: 1px #999 dotted;
}

table.contentpane td {
   padding: 0 5px 2px 6px;
}

Voor de voorbeeld website zijn de volgende stijlen ingevuld.

form.form-validate { }

table.contentpane { }
table.contentpane td { }

table.contentpane td label.hasTip {
   font-weight: bold;
} 

table.contentpane td p { }

table.contentpane td input.required { }
table.contentpane td input.validate-email { }

table.contentpane td input#email {
   width: 300px;
}

form.form-validate button.validate {
   margin-top: 10px;
}

Na stijling ziet de pagina er als volgt uit.

Bevestig uw account

Nadat het emailadres is ingevuld en op de "Voeg toe" button is geklikt, komt er een nieuw scherm.

Deze pagina bevat dezelfde stijlen als de vorige pagina "Wachtwoord vergeten", behalve het inputveld waar de code moet worden ingeplakt input.required#token. Voor de voorbeeld website hebben we dit input veld wat langer gemaakt. Dit is echter in de praktijk niet nodig en dient alleen als voorbeeld.

table.contentpane td input#token {
   width: 400px;
}

Herstel uw wachtwoord

Na het invullen van de code, die per email is toegestuurd, en het verzenden van het formulier wordt het volgende scherm getoond. 

Ook dit formulier lijkt veel op de voorgaande formulieren. De nieuwe stijlen zijn weer de inputvelden input.required.validate-password#password1 en input.required.validate-password#password2. We vullen hier geen aanvullende stijlen in.

Log-in pagina

Na het invullen van de nieuwe wachtwoorden, wordt een log-in scherm getoond, dat er als volgt uitziet. 

Structuur 
Dit formulier lijkt qua structuur erg op de inlogmodule, maar de id's zijn anders.

We nemen de stijlen over van de inlog module en laten de afbeelding met de sleutels weg. Deze afbeelding past niet bij het ontwerp van deze website.

form#com-form-login {}
table.contentpane { }

form#com-form-login table.contentpane {
   margin: 11px 0 15px 0;
}

/* Geen afbeelding die bij de stijl van de website past */
table.contentpane td div img {
   display: none;
}

form#com-form-login fieldset.input {
   border: none;
}

/* Paragraaf instellingen label en inputvelden */
p#com-form-login-username, 
p#com-form-login-password, 
p#com-form-login-remember {
   margin: 0 0 5px 0;
   padding: 0;
}

/* inputveld gebruikersnaam en wachtwoord */
input#username, input#passwd {
   width: 150px;
   height: 18px;
   border: 1px #8a9aa7 solid;
}

/* checkbox automatisch inloggen */
input#remember {
   background: none;
}

/* ongenummerde lijst login formulier */
form#com-form-login ul { }

form#com-form-login li a,
form#com-form-login li a:active  {
   font-family: Arial;
   font-size: 11px;
}

form#com-form-login li a:hover {
   font-family: Arial;
   font-size: 11px;
}

input.button {}

Na het toepassen van deze stijlen ziet de log-in pagina er als volgt uit. 

Gebruikersnaam vergeten

De tweede link in de log-in module is "gebruikersnaam vergeten". Wanneer op deze link wordt geklikt verschijnt het volgende scherm.

Deze pagina heeft exact dezelfde indeling als de pagina "wachtwoord vergeten". Er zijn geen vervolgpagina's, want de gebruikersnaam wordt per email toegezonden. 

Registreer

De derde link in de log-in module is "Registreer". Wanneer op deze link wordt geklikt verschijnt het volgende scherm.

Structuur

Voor de voorbeeld website zijn de volgende stijlen toegepast.

form.form-validate { }
form#josForm { }

div.componentheading { }

table.contentpane { }
table.contentpane td { }

table.contentpane td label#namemsg {
   display: block;
   margin-top: 10px;
}

table.contentpane td input.inputbox  { }
table.contentpane td imput.required { }
table.contentpane td input#name {
   width: 300px;
   margin-top: 10px;
}

table.contentpane td label#usernamemsg {
   display: block;
   margin-top: 10px;
}

table.contentpane td input.inputbox  { }
table.contentpane td input.required { }
table.contentpane td input.validate-username { }
table.contentpane td input#username {
   width: 300px;
   margin-top: 10px;
}

table.contentpane td label#emailmsg {
   display: block;
   margin-top: 10px;
}

table.contentpane td input.inputbox  { }
table.contentpane td input.required { }
table.contentpane td input.validate-email { }
table.contentpane td input#email {
   width: 300px;
   margin-top: 10px;
}

table.contentpane td label#pwmsg {
   display: block;
   margin-top: 10px;
}

table.contentpane td input.inputbox  { }
table.contentpane td input.required { }
table.contentpane td input.validate-password { }
table.contentpane td input#password {
   width: 300px;
   margin-top: 10px;
}

table.contentpane td label#pw2msg {
   display: block;
   margin-top: 10px;
}

table.contentpane td input.inputbox  { }
table.contentpane td input.required { }
table.contentpane td input.validate-passverify { }
table.contentpane td input#password2 {
   margin-top: 10px;
}

form.form-validate button.button { }
form.form-validate button.validate { }
form#josForm button.button { }
form#josForm button.validate { }

Na het toepassen van de stijlen ziet de pagina er als volgt uit.

Na het invullen van het registratie formulier keert de website terug naar de homepagina, zonder verdere mededelingen. Wel ontvangt de geregistreerde een email met een link naar de activatie pagina, die er als volgt uitziet. 

Voor deze pagina is geen verdere stijling nodig.

• Toevoegen
• Zoeken

Commentaar (4)

• |77.164.120.xxx |04-05-2010 22:28:36 Lianne Lambregts  - inloggen met emailadres en wachtwoord
  Hoe kun je er voor zorgen dat je niet met de gebruikersnaam, maar met je email-adres in combinatiie met wachtwoord kunt inloggen? En hoe voeg je captha toe en kun je deze naar maat maken (bijvoorbeeld op de website van Kluun, de schrijver, moet je een flauwe vraag over zijn oeuvre beantwoorden, veel 'leuker'natuurlijk als zo'n standaard (als ook hieronder wordt gebruikt)
  • 0
  • 0

  Antwoorden

• |81.34.168.xxx |05-05-2010 08:16:28 Rob van Oudheusden  - email en wachtwoord
  Voor vragen over de functionaliteit van Joomla en/of extensies verwijs ik je naar het dutchjoomla forum. Deze website heeft alleen betrekking op de css van joomla.
  • 0
  • 0

  Antwoorden

• |194.171.88.xxx |30-06-2010 09:17:18 Erwin  - styling van required velden bij fout
  Waar of hoe kan je de styling aanpassen wanneer de gebruiker een verplicht veld verkeerd invult en hij nu standaard een rode omlijsting van het veld krijgt. Stel de kleur of de wijze wilt aanpassen, waar kan je dat doen? Dus bijv. bij het registreren als een e-mail foutief invult krijg je een rode omlijsting om het veld...
  
  • 0
  • 0

  Antwoorden

• |81.37.224.xxx |30-06-2010 14:30:24 Rob van Oudheusden  - Styling required veld
  Dit is te vinden in het css betand onder templates/system/css/general.css.
  De class is "invalid". Deze stijl kan worden overschreven door een template. In de standaard template.css van Joomla "rhuk_milkyway" komt deze stijl ook voor. Deze template.css wordt ingelezen na de general.css, dus aanpassen in general.css heeft geen zin. Aanpassen dus, in dit voorbeeld, in template.css van "rhuk_milkyway". Ik hoop dat je hiermee uit de voeten kunt.
  
  • 0
  • 0

  Antwoorden

Schrijf commentaar

Uw contact gegevens:

Naam:

Email: geen bericht bij reactiehoud me op de hoogte bij reactie

Website:

Commentaar:

Onderwerp:

Bericht:

Beveiliging

Voer de anti-spam code in die in het plaatje staat.

Powered by !JoomlaComment 4.0 beta2