Frontend-Login - Layout anpassen

Hier können Tipps und Tricks rund um die Verwendung von BlackCat CMS gepostet werden.
Antworten
Benutzeravatar
shadowcat
Administrator
Beiträge: 5283
Registriert: Di 5. Feb 2013, 10:36
Kontaktdaten:

Frontend-Login - Layout anpassen

Beitrag von shadowcat »

Grob gesagt geht es hier um alles, was im Unterverzeichnis ./account platziert ist.

Um die Optik anzupassen, bitte _nicht_ die Templates im Unterordner ./account/templates/default anpassen! Wie man es richtig macht, steht weiter unten.

Liste der Templates
  • account_forgot_form.tpl - Darstellung der "Kennwort vergessen" Seite
  • account_forgot_mail_body.tpl - Inhalt der "Kennwort vergessen" Mail
  • account_login_form.tpl - Darstellung der Login-Seite
  • account_preferences_form.tpl - Darstellung der Profil-Einstellungen
  • account_signup_form.tpl - Darstellung der Signup-Seite
  • account_signup_mail_admin_body.tpl - Inhalt der Info-Mail an den Admin
  • account_signup_mail_body.tpl - Inhalt der Mail an den Registrierenden
CSS Klassen

Am einfachsten ist es, die vorhandenen Templates zu verwenden und diese per CSS zu gestalten.
  • account_form - verwendet für <fieldset>
  • account_label - verwendet für <label>
  • account_input - verwendet für <input> (text, password)
  • account_button - verwendet für submit und reset Buttons
  • account_message - verwendet für Hinweistexte (<div>)
Tipp: Im eigenen CSS (also dem zum Frontend-Template) das CSS aus dem account-Verzeichnis einbinden:

Code: Alles auswählen

@import url(../../../account/css/preferences.css);
(Achtung, der Pfad muß ggfs. angepaßt werden! Er ist relativ zum einbindenden CSS anzugeben. Alternativ in der headers.inc.php des Templates angeben.)

Eigene Templates

Voraussetzungen:
  • Im Pfad des Frontend-Templates muß ein Unterverzeichnis ./templates/default existieren
  • Die Templates müssen im Dwoo-Format erstellt werden
  • Der Dateiname des Original-Templates darf nicht verändert werden
Um die Optik umfangreicher anzupassen, als es mit CSS möglich ist, das jeweilige Template in das Verzeichnis ./templates/<Frontend Template>/templates/default kopieren. Dieses kann dann nach Wunsch angepaßt werden. Die notwendigen und unterstützten Variablen sind im jeweiligen Vorlage-Template zu finden.

Ist das Template im o.g. Verzeichnis nicht vorhanden, wird automatisch das Standard-Template verwendet.
Dateianhänge
Ansicht des Login-Formulars - hier beispielhaft mit einer Fehlerausgabe
Ansicht des Login-Formulars - hier beispielhaft mit einer Fehlerausgabe
2013-04-16_164337.png (5.43 KiB) 4157 mal betrachtet
My software never has bugs, it just develops random features.
If it’s not broken, keep fixing it until it is
Benutzeravatar
shadowcat
Administrator
Beiträge: 5283
Registriert: Di 5. Feb 2013, 10:36
Kontaktdaten:

Re: Frontend-Login - Layout anpassen

Beitrag von shadowcat »

Noch ein wichtiger Hinweis für das Frontend Login in eigenen Templates. Bisher wurde dafür oft folgender (oder ähnlicher) Code verwendet (Beispiel aus Template "lepton"):

Code: Alles auswählen

<?php
if (FRONTEND_LOGIN == 'enabled' && VISIBILITY != 'private' ) { ?>
	{if get_session('USER_ID') == ''}
	<!-- login form -->
	<form name="login" id="login1" action="<?php 
		echo LOGIN_URL; ?>" method="post">
		<fieldset>
			<legend>{$TEXT.LOGIN}:</legend>
			<label for="username" accesskey="1">
			{$TEXT.USERNAME}:</label>
			<input type="text" name="username" id="username" 
				style="text-transform: lowercase;" /><br />
			<label for="password" accesskey="2">{$TEXT.PASSWORD}:</label>
			<input type="password" name="password" id="password" /><br />
			<input type="submit" name="wb_login" id="wb_login" value="{translate('Login')}"/><br />
	
			<!-- forgotten details link -->
			<a href="<?php echo FORGOT_URL; ?>">{$TEXT.FORGOT_DETAILS}</a>

			<!-- frontend signup -->
			<?php
if (is_numeric(FRONTEND_SIGNUP) && (FRONTEND_SIGNUP != 0 )) { ?>
			<a href="<?php echo SIGNUP_URL; ?>">{$TEXT.SIGNUP}</a>
			<?php } ?>
		</fieldset>
	</form>
    {/if}
<?php 
} 
Das funktioniert so nicht mehr!

Um Spammern und Hackern das Handwerk zu erschweren, müssen die Namen für die Eingabefelder generiert werden. Die Klasse class.frontend.php setzt automatisch Templatevariablen hierfür. Daher ist sowas hier zu verwenden:

Code: Alles auswählen

<input type="text" name="{$username_fieldname}" id="{$username_fieldname}" />
<input type="password" name="{$password_fieldname}" id="{$password_fieldname}" />
Als Vorlage kann die Datei account_login_form.tpl im Verzeichnis ./account/templates/default verwendet werden.
My software never has bugs, it just develops random features.
If it’s not broken, keep fixing it until it is
Antworten