Ich habe vor folgende Login-Dropdownbox in mein Template mit einzubinden: http://www.red-team-design.com/wp-content/uploads/2011/10/simple-and-effective-dropdown-login-box-demo.html#
In meinem Template (ohne Typo3) habe ich die Box im oberen Bereich zwischen dem Logo und der Hauptnavigation in einem extra div-Container gespeichert, die CSS Dateien und das Javascript richtig eingebunden.
Dann habe ich ein extra Logintemplate mit den HTML-Code der Loginbox erstellt. Hier der Auszug des Login-Codes:
<!--###TEMPLATE_LOGIN###-->
<!-- LOGIN-DROPDOWN-->
<div class="login-dropdown">
<nav>
<ul>
<li id="login">
<a id="login-trigger" href="#">
Log in <span>▼</span>
</a>
<div id="login-content">
<form action="###ACTION_URI###" target="_top" method="post" onsubmit="###ON_SUBMIT###">
<fieldset id="inputs">
<input id="username" type="email" name="Email" placeholder="###USERNAME_LABEL###" required>
<input id="password" type="password" name="Password" placeholder="###PASSWORD_LABEL###" required>
</fieldset>
<fieldset id="actions">
<input type="submit" id="submit" value="###LOGIN_LABEL###">
<label><input type="checkbox" checked="checked"> ###PERMALOGIN###</label>
<input name="permalogin" value="0" type="hidden" ###PERMALOGIN_HIDDENFIELD_ATTRIBUTES### id="permaloginHiddenField" />
<input name="permalogin" value="1" type="checkbox" ###PERMALOGIN_CHECKBOX_ATTRIBUTES### id="permalogin" onclick="document.getElementById('permaloginHiddenField').disabled = this.checked;" />
<div class="felogin-hidden">
<input type="hidden" name="logintype" value="login" />
<input type="hidden" name="pid" value="###STORAGE_PID###" />
<input type="hidden" name="redirect_url" value="###REDIRECT_URL###" />
<input type="hidden" name="###PREFIXID###[noredirect]" value="###NOREDIRECT###" />
###EXTRA_HIDDEN###
</div>
<!--###FORGOTP_VALID###-->
<p><!--###FORGOT_PASSWORD_LINK###-->###FORGOT_PASSWORD###<!--###FORGOT_PASSWORD_LINK###--></p>
<!--###FORGOTP_VALID###-->
</fieldset>
</form>
</div>
</li>
<li id="signup">
<a href="">Sign up FREE</a>
</li>
</ul>
</nav> </div>
<!-- END LOGIN-DROPDOWN -->
<!-- ###LOGIN_FORM### -->
<!--###TEMPLATE_LOGIN###-->
Ich habe das Javascript im Header der Typo3-Seite eingebunden.
Die Originalausgabe des Quelltextes meiner NICHT-Typo3-Seite ist (Auszug):
<!-- HEADER -->
<header>
<div class="wrapper cf">
<div id="logo">
<a href="index.html"><img src="img/logo.png" alt="Simpler"></a>
</div>
<div>
<!-- nav -->
<ul id="nav" class="sf-menu">
<li class="current-menu-item"><a href="index.html">HOME</a></li>
<li><a href="blog.html">BLOG</a></li>
<li><a href="page.html">ABOUT</a>
<ul>
<li><a href="page-elements.html">Elements</a></li>
<li><a href="page-icons.html">Icons</a></li>
<li><a href="page-typography.html">Typography</a></li>
</ul>
</li>
<li><a href="portfolio.html">WORK</a></li>
<li><a href="contact.html">CONTACT</a></li>
</ul>
</div>
<div id="combo-holder"></div>
<!-- ends nav -->
<!-- LOGIN-DROPDOWN-->
<div class="login-dropdown">
<nav>
<ul>
<li id="login">
<a id="login-trigger" href="#">
Log in <span>▼</span>
</a>
<div id="login-content">
<form>
<fieldset id="inputs">
<input id="username" type="email" name="Email" placeholder="Your email address" required>
<input id="password" type="password" name="Password" placeholder="Password" required>
</fieldset>
<fieldset id="actions">
<input type="submit" id="submit" value="Log in">
<label><input type="checkbox" checked="checked"> Keep me signed in</label>
</fieldset>
</form>
</div>
</li>
<li id="signup">
<a href="">Sign up FREE</a>
</li>
</ul>
</nav> </div>
<!-- END LOGIN-DROPDOWN -->
Nun habe ich dieses TS in Setup gespeichert:
#LOGIN-DROPDOWN
lib.logindropdown = COA
lib.logindropdown {
20 = COA
20 {
10 < plugin.tx_felogin_pi1
10 {
feloginBaseURL = xxx
storagePid = 118
templateFile = fileadmin/templates/login/login-dropdown.html
showForgotPasswordLink = 1
#welcomeHeader_stdWrap >
#welcomeMessage_stdWrap >
#logoutHeader_stdWrap >
#logoutHeader_stdWrap >
#successHeader_stdWrap >
showLogoutFormAfterLogin = 1
noSuccessMessageAfterLogin = 1
dateFormat = d.m.Y
redirectMode = login
#_CSS_DEFAULT_STYLE >
}
}
}
Der Auszug meines Seitenquellcodes lautet nun:
<!-- HEADER -->
<header>
<div class="wrapper cf">
<div id="logo"><a href="index.php?id=2" ><img src="fileadmin/zeni-files/HTML/img/logo.png" /></a></div>
<div><ul id="nav" class="sf-menu"><li class="current-menu-item"><a href="index.php?id=2" title="Der Fan-Club in Deutschland bietet aktuelle Nachrichten, Services und weitere Informationen über den King of Pop - die Nr.1 bei Infos & News!" >Home</a><ul><li><a href="index.php?id=1004" >Login/Logout</a></li><li><a href="index.php?id=1005" >Registrieren</a></li></ul></li><li><a href="index.php?id=227" title="Aktuelles" >Nachrichten</a><ul><li><a href="index.php?id=600" >News</a></li><li><a href="index.php?id=597" >Teilnahmebedingungen</a></li></ul></li><li><a href="index.php?id=75" title="King of Pop" >Michael</a><ul><li><a href="index.php?id=1285" >Auszeichnungen</a></li><li><a href="index.php?id=1263" >Interviews</a></li><li><a href="index.php?id=1230" >Biographie</a></li><li><a href="index.php?id=1068" >Discographie</a></li><li><a href="index.php?id=1023" >Videographie</a></li><li><a href="index.php?id=1017" >Konzerte</a></li><li><a href="index.php?id=1008" >Wohltätigkeit Engagement</a></li><li><a href="index.php?id=879" >Vitiligo</a></li></ul></li><li><a href="index.php?id=74" title="MJFC JAM" >Fan-Club</a><ul><li><a href="index.php?id=894" >Team</a></li><li><a href="index.php?id=893" >FAQ</a></li><li><a href="index.php?id=892" >Umfragen/Gewinnspiele</a></li><li><a href="index.php?id=887" >Support</a></li><li><a href="index.php?id=882" >Online-Shop</a></li><li><a href="index.php?id=881" >Archiv</a></li></ul></li><li><a href="index.php?id=100" title="Bereich" >Spezial</a><ul><li><a href="index.php?id=965" >Projekte</a></li><li><a href="index.php?id=964" >MJFC FAMILY</a></li><li><a href="index.php?id=960" >FLY</a></li><li><a href="index.php?id=957" >Feedback</a></li><li><a href="index.php?id=935" >Sonderausgaben</a></li><li><a href="index.php?id=930" >TII</a></li><li><a href="index.php?id=913" >Videospiele</a></li><li><a href="index.php?id=598" >EXKLUSIV: Giovanni Zarrella Interview</a></li></ul></li><li><a href="index.php?id=372" title="Mitgliederbereich" >Community</a><ul><li><a href="index.php?id=997" >Mein Profil</a></li></ul></li></ul></div>
<div id="combo-holder"></div>
<!-- ends nav -->
<!-- LOGIN-DROPDOWN-->
<div class="login-dropdown"><div class="tx-felogin-pi1">
<!-- LOGIN-DROPDOWN-->
<div class="login-dropdown">
<nav>
<ul>
<li id="login">
<a id="login-trigger" href="#">
Log in <span>▼</span>
</a>
<div id="login-content">
<form action="index.php?id=2" target="_top" method="post" onsubmit="">
<fieldset id="inputs">
<input id="username" type="email" name="Email" placeholder="Benutzername:" required>
<input id="password" type="password" name="Password" placeholder="Passwort:" required>
</fieldset>
<fieldset id="actions">
<input type="submit" id="submit" value="Anmelden">
<label><input type="checkbox" checked="checked"> ###PERMALOGIN###</label>
<input name="permalogin" value="0" type="hidden" ###PERMALOGIN_HIDDENFIELD_ATTRIBUTES### id="permaloginHiddenField" />
<input name="permalogin" value="1" type="checkbox" ###PERMALOGIN_CHECKBOX_ATTRIBUTES### id="permalogin" onclick="document.getElementById('permaloginHiddenField').disabled = this.checked;" />
<div class="felogin-hidden">
<input type="hidden" name="logintype" value="login" />
<input type="hidden" name="pid" value="118" />
<input type="hidden" name="redirect_url" value="" />
<input type="hidden" name="tx_felogin_pi1[noredirect]" value="0" />
</div>
<!--###FORGOTP_VALID###-->
<p><a href="index.php?id=2&tx_felogin_pi1%5Bforgot%5D=1" rel="nofollow">Kennwort vergessen?</a></p>
<!--###FORGOTP_VALID###-->
</fieldset>
</form>
</div>
</li>
<li id="signup">
<a href="">Sign up FREE</a>
</li>
</ul>
</nav> </div>
<!-- END LOGIN-DROPDOWN -->
<!-- ###LOGIN_FORM### -->
</div>
</div>
<!-- END LOGIN-DROPDOWN -->
Die "<div class="login-dropdown">" wird zweimal ausgegeben.
Das "permalogin" funktioniert nicht.
Wie kann ich es richtig machen?