LogIn - Design verändern

Moin zusammen,

ich möchte in meinem neuen Projekt ein LogIn - Bereich für ein paar Mitglieder erstellen. Ich habe über Contao das Modul LogIn bereits eingebaut, dennoch würde ich gerne ein paar Sachen verändern und zwar so ziemlich alles. Ich möchte z.B. "Benutzername" und "Passwort" bereits in der Textzeile drin haben (so wie man das bei gewöhnlichen LogIn - Bereiche kennt). Ich möchte auch den Absendebutton verändern.

Allgemin fragt: wie kann ich Details an dem LogIn - Bereich verändern. Die Css-Datei .mod_login kenn ich bereits aber damit ich z.B. nur die Farbe verändern.

Weiß jemand mir zu helfen ?

Lieben Gruß Max

Schau mal hier, das ist eine Seite, die gerade ein Relaunch erfährt.

Ortsfeuerwehr Bizau/

Meinst du das so?

hi bizon,

je genau so. ein einfacher und schlichter log-in bereich. genauso finde ich es klasse. :)

kannst du mir helfen?

Hallo maximum,

Mein Login ist eine Kombination aus dem Contao Modul "Login-Formular", das die INPUT-Felder erstellt und der Erweiterung "cleardefault", die bei onfocus den Standardwert der Eingabefelder löscht, bzw. bei onblur wieder einfügt, falls kein Eintrag erfolgt ist.

Der Aufruf von cleardefault erfolgt direkt im Template des Loginformulars, wobei ich die beiden Defaultwerte direkt ins Template geschrieben habe. Da die Seite aber eh nur einsprachig ist, konnte ich auf die Spachvariablen verzichten.

Klingt alles kompliziert, ist es aber dank dem Contao-Core-Modul und der Erweiterung von Andreas Schempp nicht. Also:

Erweiterung "cleardefault" installieren.
Modul "Login-Formular" mit einspaltigem Layout anlegen.
Das Template für die einspaltige Formularausgabe muss angepasst werden. Kopiere dazu den folgenden Code und speichere ihn unter /templates/mod_login_1cl.tpl

Das Template muss so heißen, weil es beim Modul Login-Formular keine Templateauswahl, außer ein - oder zweispaltig gibt.

HTML-Code:

---

<!-- indexer::stop -->
<div class="<?php echo $this->class; ?> one_column tableless login block"<?php echo $this->cssID; ?><?php if ($this->style): ?> style="<?php echo $this->style; ?>"<?php endif; ?>>
<?php if ($this->headline): ?>

<<?php echo $this->hl; ?>><?php echo $this->headline; ?></<?php echo $this->hl; ?>>
<?php endif; ?>

<form action="<?php echo $this->action; ?>" id="tl_login" method="post">
<div class="formbody">
<?php if ($this->message): ?>
<p class="error"><?php echo $this->message; ?></p>
<?php endif; ?>
<input type="hidden" name="FORM_SUBMIT" value="tl_login" />

<input type="text" name="username" id="username" class="text" maxlength="64" onfocus="if (this.value=='Benutzer...') { this.value=''; $(this).removeClass('cleardefault'); this.select(); }" onblur="if (this.value=='') { this.value='Benutzer...'; $(this).addClass('cleardefault'); }" value="Benutzer..." class="text cleardefault" /><br />

<input type="text" name="password" id="password" maxlength="64" onfocus="if (this.value=='Passwort...') { this.type='password'; this.value=''; $(this).removeClass('cleardefault'); this.select(); }" onblur="if (this.value=='') { this.type='text'; this.value='Passwort...'; $(this).addClass('cleardefault'); }" value="Passwort..." class="text cleardefault" />

<?php if ($this->autologin): ?>
<div class="checkbox_container">
<input type="checkbox" name="autologin" id="autologin" value="1" class="checkbox" />
<label for="autologin"><?php echo $this->autoLabel; ?></label>
</div>
<?php endif; ?>
<div class="submit_container">
<input type="submit" class="submit" value="<?php echo $this->slabel; ?>" />
</div>
</div>
</form>
<?php if ($this->hasError): ?>

<script type="text/javascript">
<!--//--><![CDATA[//><!--
window.scrollTo(null, ($('tl_login').getElement('p.error').getPosition().y - 20));
//--><!]]>
</script>
<?php endif; ?>

</div>
<!-- indexer::continue -->

---

Das Modul Login-Formular ins Seitenlayout einbinden oder, wie in meinem Fall, per

Code:

---

{{insert_module::ID des Moduls}}

---

in den Footer einbauen.

Mit CSS formatieren und fertig ist es.

Viel Spaß damit.
Kannst ja mal einen LINK mit dem Ergebnis posten.

Lieber Bizon,

vielen vielen dank für deine Hilfe. Es hat super geklapt und ich bin mit dem Ergebnis sehr zufrieden. Die Site ist noch nicht online aber dafür habe ich ein Schnappschuss gemacht.

Aber vlt. kannst du mir noch bei einer kleinen feinheit helfen: Ich mag den AbsendeButton nicht so gern. Kann man da noch spezifisch etwas verändern?

Max

super habe das problem mit dem Absende-Button dank Fierbug und deiner Site hingekriegt.

Vielen Dank nochmal.

Freut mich, dass es gefällt.

Den Button kannst du auch per CSS formatieren. zB
#left .mod_login input .submit {
border:none; /* setzt alle borders für den Button auf null*/
und jetzt die Anweisungen wie bei den anderen INPUT
...
}

EDIT: UUUHHHPPS ZU LANGSAM

Gratulation, dass du es selbst gelöst hast.

moin bizon,

ich habe nochmal eine frage an dich. wie lautet die css für logout? denn wenn ich mich erfolgreich angemeldet habe, dann verrückt allesdnu laut fierbug ist für logout alles verstellt?

lieben gruß max

Hallo maximum,

Eigentlich ist kein extra CSS nötig, denn der Abmeldebutton erbt die Einstellung von der Anmeldung. Das einzige, das du anpassen kannst, ist die Login-Info: "Sie sind angemeldet als...". Ich musste aber nur die Schriftfarbe für unten stehende Klasse einstellen, dann hat schon alles gepasst.

Code:

---

p.login_info {color:#EEOOOO;}

---

Hallo Leute

Ich habe gespannt diesen Beitrag verfolgt und bei einem Projekt ähnlich umgesetzt.
Nun habe ich festgestellt, dass im IE das Passwortfeld nicht mehr korrekt funktioniert -> Passwort wird angzeigt.
(Der type des Eingabe-Feldes lässt sich im IE scheinbar nicht so ohne weiteres verändern)

Hat hierzu schon jemand eine Lösung gefunden?

Habe in der Zwischenzeit selber etwas rechechiert und bin auf folgenden Ansatz gestossen.

Umgesetzt in contao würde dies etwa so lauten:

HTML-Code:

---

<div id="div1">
<input name="pass_temp" type="text" value="Ihr Passwort" maxlength="64" class="text cleardefault" onfocus="changeBox()" />
</div>
<div id="div2" style="display:none">
<input name="password" id="password" type="password" value="" maxlength="64" class="text password" onBlur="restoreBox()"  />
</div>

---

Code:

---

<script language="javascript">
 function changeBox()
 {
    document.getElementById('div1').style.display='none';
    document.getElementById('div2').style.display='';
    document.getElementById('password').focus();
 }
 function restoreBox()
 {
    if(document.getElementById('password').value=='')
    {
      document.getElementById('div1').style.display='';
      document.getElementById('div2').style.display='none';
    }
 }
</script>

---

Vieleicht stört sich ja sonst noch jemand am sichtbaren Passwort im IE ;)