Zum Inhalt springen

Login Design mit TemplaVoila

Erstellt am 9. August 2007 · 9 Antworten · letzte Antwort am 20. August 2007

Tags: Templates & Layouts, felogin, Frage

timmy2007 ·

Habe mir das Howto (#60688) durchgelesen.

Ich habe im sog. Teaser die DIV-Klasse login eingefügt.

Dann habe ich den TS-Code aus dem HowTo umgeändert, damit Templa-Voila was damit anfangen könnte:

 ###
# LOGIN
####
# action url
lib.url = TEXT
lib.url.typolink.parameter.field = uid
lib.url.typolink.returnLast = url
 
# LOGOUT
[usergroup = *]
lib.login = COA
lib.login.5 = TEXT
lib.login.5 {
        value = eigene Daten bearbeiten
        wrap = <div class="logout">
        # 73 Seite mit Plugin von sr_feuser_register
        typolink.parameter = 73
        typolink.additionalParams = &tx_srfeuserregister_pi1[cmd]=edit
}
# form begin
lib.login.10 = TEXT
lib.login.10.value = <form action="

lib.login.20 < temp.url
lib.login.30 = TEXT
lib.login.30.value (
    " method="post"> 
      <fieldset>
        <input class="submit" type="submit" value="Logout" />
        <input type="hidden" name="logintype" value="logout" /> 
      </fieldset>
    </form>
  </div>
)
 
# LOGIN
[else] 
lib.login = COA
lib.login.10 = TEXT
lib.login.10.value = <div class="login"> <form action="

lib.login.20 < temp.url
lib.login.30 = TEXT
lib.login.30.value (
  " method="post" > 
    <fieldset>
      <input name="user" class="user" type="text" title="Benutzername" value="Username" onfocus="if (this.value==this.defaultValue) this.value=''" size="12" />
      <input name="pass" class="pw" type="password" title="Passwort" value="****" onfocus="if (this.value==this.defaultValue) this.value=''" size="12" />      
      <input type="hidden" name="logintype" value="login" /> <input type="hidden" name="pid" value="4" /> 
      <input class="submit" name="image" type="submit" value="Login" title="Login" />   
    </fieldset>               
  </form> 
</div>
)
#lib.login.50 = TEXT
#lib.login.50.value = Registrierung
#lib.login.50.typolink.parameter = 73
[global]

Dann habe ich das Mapping in TemplaVoila mit den Feld "field_login" und den nötigen ausgefüllten Feldern erweitert und das Update gespeichert.

Im Template ist die div-Klasse so im Teaser eingefügt:

<div class="login">Einloggen</div>

Das Einloggen-Wort sieht man in der Preview in TV, nur auf der eigentlichen Seite nicht. Ist das in Ordnung?

Eigentlich sollte da ja das aus den HowTo stammende Login Feld zu sehen sein.

Was habe ich falsch gemacht?

timmy2007 ·
ThomasRawiel schrieb

Hast du in templaVoila das div als typoscript Object gemappt und als Name lib.login eingetragen?

Ja, das habe ich.

Der EL Name ist Einloggen. Dann kommt field_login; Map to DIV class login; <div>INNER.

Im Html-Code, den man sich ansehen kann ist dann folgendes zu sehen:

<!-- #main: Beginn Inhaltsbereich -->
        <div id="main">
            <div id="teaser" class="clearfix">
                <div class="block1">[ = ClickPath = ]</div>
                <div class="langMenu">[ = Language Menu = ]</div>
                <div class="selectFontSize">[ = Select Fontsize = ]</div>
                <div class="aktDatum">[ = Current Date and Time = ]</div>
                                <div class="login">[ = Einloggen = ]</div>
            </div>

Das Einloggen ist ja da und in der Preview wird das "[ = Einloggen = ]" auch angezeigt, neben all den anderen Markern.

Ich verstehe nicht, warum es dann nicht auf der FE Seite erscheint? #angry#

laser ·

Hallo Martin,

wie versprochen hier der Link:

Klick mich

Hoffe es ist einigermaßen verständlich, falls was unklar sein sollte, sag bescheid.

Gruß
Martin

timmy2007 ·

Danke für Deine Antwort und dem Tutorial. Aber warum geht denn das erste Beispiel-Typoscript nicht? Fehlt da was oder ist das ursprünglich nicht auf TemplaVoila anwendbar?

Habe auch in der Datenstruktur´bei der Angabe TypoScriptobject das lib.login nicht gespeichert. Habe es manuell nachgetragen.

Was mich auch noch dazu wissen möchte: Im HowTo was ich hier erwähnte, ist ja kein CSS angegeben und die Ansicht der Eingabefelder wird wohl nur über TypoScript definiert und sind kleiner. Kann man denn Dein Beispiel nicht auch ohne CSS darstellen, damit es so ausschaut wie im HowTo?

just2b ·
timmy2007 schrieb

Was mich auch noch dazu wissen möchte: Im HowTo was ich hier erwähnte, ist ja kein CSS angegeben und die Ansicht der Eingabefelder wird wohl nur über TypoScript definiert und sind kleiner.

naja das CSS hab ich nicht angegeben, weil es da irgendwie nicht dazugehört und sowieso in jedem Projekt anders ist. Größe , Aussehen. Farben,... kannst du dann alles per CSS stylen

georg

laser ·

Das machst du wie gesagt alles im Template! Oder meinst du wie du es über TypoScript machst?

Jedenfalls ist der Code folgender:

<!--###FORGOTP_VALID###-->
<!--###FORGOTP_LINK###--><img alt="" src="fileadmin/templates/spacer.gif" style="width:15px; height:1px;" />###FORGOT_PASSWORD###<!--###FORGOTP_LINK###-->
<!--###FORGOTP_VALID###-->

Hab ich jetzt bei mir rauskopiert, hau einfach nur das IMG-Tag raus.