Zum Inhalt springen

newloginbox Anpassung im Template

Erstellt am 14. Juli 2007 · 3 Antworten · letzte Antwort am 18. Juli 2007

Tags: felogin, Frage

timmy2007 ·

Ich versuche gerade, aber ohne Erfolg, meine newloginbox im Template anzupassen.

Da stellt sich auch die Frage:

Wenn man sich folgenden Code anschaut aus dem Template:

<form action="###ACTION_URI###" target="_top" method="post" onSubmit="###ON_SUBMIT###">
	<table>
		<tbody>
			<tr>
				<th><label for="user">###USERNAME_LABEL###</label></th>
				<td><input type="text" id="user" name="user" value="" /></td>
			</tr>
			<tr>
				<th><label for="pass">###PASSWORD_LABEL###</label></th>
				<td><input type="password" id="pass" name="pass" value="" /></td>
			</tr>
			<!--###PERMALOGIN_VALID###-->
			<tr>
				<th><label for="permalogin">###PERMALOGIN###</label></th>
				<td>
					<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;" />
				</td>
			</tr>
			<!--###PERMALOGIN_VALID###-->
		</tbody>
		<tfoot>
	 		<tr>
	 			<td></td>
	 			<td>
	 				<input type="submit" name="submit" value="###LOGIN_LABEL###" />
	 			</td>
	 		</tr>
		</tfoot>
	</table>
	<input type="hidden" name="logintype" value="login" />
	<input type="hidden" name="pid" value="###STORAGE_PID###" />
	<input type="hidden" name="redirect_url" value="###REDIRECT_URL###" />
	###EXTRA_HIDDEN###
</form>

Bei www.templateworld/free_templates.html sieht man weiter unten das Template green_solutions. So wie dort im Template diese Login-Box ausschaut, so soll mal mein Template ausschauen. Aber wenn man dann den Tabellencode im newloginbox-Template in dieses div-Werk umbaut, werden alle beiden Textfelder nebeneinandert dargestellt und im Passwort-Feld sieht man die Buchtstaben, keine Sternchen. Und auch Login klappt dann nicht. Der Link scheint dann tod zu sein.

Ich erspare mir mal den Code hier von dem Template, da es sich jeder live oder auf eigenen Rechner anschauen kann.

Würde mich über Hilfe freuen.

timmy2007 ·

Ich dachte heute morgen, daß mein Problem mit der newloginbox Anpassung beendet sei: Doch da täuschte ich mich leider.

Wie gesagt, von www.templateworld.com/free-templates.html habe ich vom dortigen Template green_solutions das Login-Box-Tempate entnommen, um es in Typo3 für die newloginbox einzubauen.

Habe die CSS Dateien importiert und angepasst. Auf dem angehängten Bild kann man diese Loginbox nun sehen.

Der Template-Code für den neuen Look ist folgender:

<a name="template_login"></a><h1>TEMPLATE_LOGIN</h1>
<p>This is the template for the login form with/without the 'forgot password' link.</p>

<!--###TEMPLATE_LOGIN###-->


<!--###HEADER_VALID###-->
<h3>###STATUS_HEADER###</h3>
<!--###HEADER_VALID###-->

<!--###MESSAGE_VALID###-->
<p>###STATUS_MESSAGE###</p>
<!--###MESSAGE_VALID###-->
<div class="tx-newloginbox-p1">

<h2>member <span>login</span></h2>
<form action="###ACTION_URI###" target="_top" method="post" onSubmit="###ON_SUBMIT###">

	<label>###USERNAME_LABEL###</label>
	  <input type="text" name="textfield" />
	  <label for="pass">###PASSWORD_LABEL###</label>
<input type="password" id="pass" name="pass" value="" />

<!--###PERMALOGIN_VALID###-->
		<label for="permalogin">###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;" />
			<!--###PERMALOGIN_VALID###-->

		
	<input type="hidden" name="pid" value="###STORAGE_PID###" />
	<input type="hidden" name="redirect_url" value="###REDIRECT_URL###" />
	   <div id="leftPango"><p class="textposition"><a href="#">Resister now</a></p><input type="submit" class="gobutton" value=###LOGIN_LABEL### />
	</form>
	</div>	

<!--###FORGOTP_VALID###-->
<p><!--###FORGOTP_LINK###-->###FORGOT_PASSWORD###<!--###FORGOTP_LINK###--></p>
<!--###FORGOTP_VALID###-->

<!--###TEMPLATE_LOGIN###-->

Die CSS dazu ist:

.tx-newloginbox-p1 {width:237px; height:196px; position:relative; margin:0 auto; padding:0; border:1px solid #DCDAC2; background:#fff; color:#000;}
.tx-newloginbox-p1 h2{height:48px; background:url("http://www.mjfc-jam.com/jam2/fileadmin/img/symbol4.gif") 0 0 no-repeat #fff; display:block; position:relative; padding:0 0 0 57px; margin:12px 0 20px 13px; font:16px/48px  Georgia,"Times New Roman", Times, serif; color:#5EA000; text-transform:uppercase;}
.tx-newloginbox-p1 h2 span{background:#fff; color:#3D3C2C;}
.tx-newloginbox-p1 form{width:220px; height:108px; background:#EBE9D7; padding:0; margin:0 0 0 8px; color:#333227;}
.tx-newloginbox-p1 form label{width:72px; display:block; float:left; padding:14px 15px 0 16px; }
.tx-newloginbox-p1 form label.emailpadding{padding:2px 15px 0 16px;}
.tx-newloginbox-p1 form input{ float:left; display:block; width:101px; height:16px; margin:10px 0 9px 0}
.tx-newloginbox-p1 form input.fieldpadding{margin:2px 0 9px 0}
.tx-newloginbox-p1 form input.gobutton{float:right; background:url("http://www.mjfc-jam.com/jam2/fileadmin/img/arrow4.gif") no-repeat 30px 0 #63614F; border:none; width:45px; height:21px; display:block; margin:-10px 0 0 0; padding:0 0 0 5px; text-decoration:none; color:#fff; font:14px/21px "Trebuchet MS",Arial, Helvetica, sans-serif; text-transform:uppercase; text-align:left;}

.tx-newloginbox-p1 #leftPango{width:220px; height:25px; position:absolute; top:160px; left:8px; border-top:1px solid #fff; background:#B0AD93; display:block; padding:0; margin:0; font-size:12px; color:#FFFFFA; line-height:23px; font-weight:bold;}
.tx-newloginbox-p1 #leftPango p.textposition a{float:left; padding:0 0 0 20px; margin:0; text-decoration:none; color:#FFFFFA; background:#B0AD93;}
.tx-newloginbox-p1 #leftPango p.textposition a:hover{text-decoration:underline; background:none;}
.tx-newloginbox-p1 #leftPango a:hover{background:url("http://www.mjfc-jam.com/jam2/fileadmin/img/arrow4.gif") no-repeat 30px 1px #333229; text-decoration:none; color:#fff;}

Mein Problem ist nun folgendes: Was man leider hier nicht so gut erkennen kann, ist, daß durch die STORAGE_PID und REDIRECT_URL diese leeren Felder in der Box im Firefox zu sehen sind. Roter Kreis im Bild 1! Ganz leicht.

Dadurch ist auch keine Anmeldung möglich, als Frontend User. Wenn ich aber das "normale" Template verwende, dann klappt alles.

Im Internet Explorer sieht man es nicht. Dafür ist dieser Submit Button etwas nach oben verrückt! Bild 2.

Ich bin total überfragt und weiß nicht, warum im FF was anderes zu sehen ist als im IE.

Würde mich über jede Hilfe freuen.

BILD1Bild: watermanffm.wa.funpic.de/newloginbox.gif
BILD2Bild: watermanffm.wa.funpic.de/newloginbox_ie.gif
[/img]

timmy2007 ·

Mir ist noch etwas im Quelltext aufgefallen.

Wenn ich das ursprüngliche Template nehme, funktioniert alles tadellos. Im Quelltext steht immer zuerst <div class="tx-newloginbox-p1">.

Im Template selber wird dies nirgends erwähnt.

Bei der Abänderung des Templates habe ich aber diese div Klasse hinzugefügt und dann wird im Quelltext der Eintrag der div Klasse zweimal hintereinander eingefügt. Es scheint aber keinen Fehler optisch zu verursachen und die Änderungen werden angezeigt. Lasse ich im Template die Angabe der div Klasse weg, verursacht dies einen Fehler und es wird die geänderte Darstellung mit der Box und den Bildern nicht angezeigt. Obwohl diese div Klasse trotzdem einmal "automatisch" im Quelltext erscheint.

Meine CSS Dateien dazu stehen in einer extra Datei.

Ich habe im BE in der Template Extension zu der newloginbox nichts gefunden, was mir als Hinweis diese automatische Anzeige der div Klasse erklären könnte.

Hier das Setup:

plugin.tx_newloginbox_pi1._CSS_DEFAULT_STYLE >
plugin.tx_newloginbox_pi3._CSS_DEFAULT_STYLE >
plugin.tx_newloginbox_pi3._CSS_DEFAULT_STYLE = .tx-newloginbox-pi3-listrow TD { background-color:#eeeeee; padding-left: 3px; padding-right: 3px; }

.tx-newloginbox-pi3-listrow TR.tx-newloginbox-pi3-listrow-header TD { background-color:#cccccc; }

.tx-newloginbox-pi3-listrow TR.tx-newloginbox-pi3-listrow-header TD P { font-weight:bold; }

.tx-newloginbox-pi3-listrow TR.tx-newloginbox-pi3-listrow-odd TD { background-color:#f6f6f6; }
plugin.tx_newloginbox_pi1._LOCAL_LANG {  

de {

oLabel_header_welcome = 

oLabel_msg_welcome = 

oLabel_header_logout = Sie haben sich abgemeldet

oLabel_msg_logout = 

oLabel_header_error = Anmeldefehler

oLabel_msg_error = Bitte ernuet versuchen

oLabel_header_success = Anmeldung erfolgreich

oLabel_msg_success = Sie sind angemeldet als ###USER###

oLabel_header_status = 

oLabel_msg_status =  

username = User:

password = Passwort:

login =  Login

logout = Abmelden

send_password = Passwort senden

your_email = Ihre Email-Adresse:

forgot_password = Passwort vergessen?

}

}

plugin.tx_newloginbox_pi1.storagePid = 4
plugin.tx_newloginbox_pi1.storagePid =

Wie kann ich das Problem lösen?