8 Tipps und Techniken zur Modifizierung von Joomla!-Vorlagen

German (Deutsch) translation by Władysław Łucyszyn (you can also view the original English article)

Beginnen Sie gerade mit der Erstellung eines Joomla! Vorlage und verwirrt darüber, wie man es wirklich in den Griff bekommt, es zu ändern? Schauen Sie sich diese einfachen Tipps und Tricks an, mit denen Sie Ihre Joomla-Website besser steuern können.

Als ich anfing, Joomla-Vorlagen zu erstellen, gab es einige Dinge, über die ich verwirrt war. Wie soll ich nur eine Seite ändern, ohne andere zu beeinflussen? Wie ändere ich die Struktur eines Moduls, damit es einfacher zu gestalten ist? In diesem Artikel werden wir uns mit der Behebung dieser Probleme befassen und uns andere schnelle Lösungen ansehen, mit denen Sie Ihre Joomla-Vorlagenentwicklung beschleunigen können.

Lektionsübersicht:

Einrichten einer localhost Joomla-Installation.
Wählen Sie ein gutes Vorlagen-Framework für die Arbeit (damit Sie das Rad nicht neu erfinden).
Verwenden von URL-Daten aus dem Browser zum Gestalten einzelner Seiten in Joomla.
Modulpositionen reduzieren.
Eingeloggtes Styling.
Verwenden von Modulklassensuffixen, um Module eindeutig zu machen.
Ändern Sie die Modulvorlagen so, dass sie einfacher zu gestalten sind.
Fügen Sie normale alte IE-Bedingungen hinzu, um Internet Explorer-Fehler zu beheben

Tipp 1: Installation von Localhost Joomla

Bevor Sie Ihre Vorlage ändern und entwickeln können, benötigen Sie eine Joomla-Installation, mit der Sie arbeiten können. Mit WAMP für Windows oder MAMP für Mac (in diesem Beispiel verwende ich WAMP) erstellen wir eine einfache Joomla-Installation, die direkt auf Ihrem Computer gehostet wird, damit Sie mit Vorlagenänderungen beginnen können.

Gehen Sie zunächst zu www.wampserver.com/en. Klicken Sie auf der Startseite auf "Laden Sie die neueste Version von Wampserver 2 herunter".

Klicken Sie nun auf den Download-Link für die 32-Bit-Version oder die 64-Bit-Version von WAMP (je nachdem, welche Windows-Version Sie haben). Wenn Sie nicht wissen, welche Version Sie haben, klicken Sie auf die Startkugel und geben Sie "dxdiag" in das Suchfeld ein. Im DirectX-DiagnoseWerkzeug erfahren Sie, welche Version Sie neben dem Betriebssystem ausführen. Laden Sie WAMP herunter und führen Sie die EXE-Datei aus, um das Programm im Standardverzeichnis von C:\wamp zu installieren. Es wird auch gefragt, welchen Browser Sie für die Standardvorschau verwenden möchten, aber ich verwende diesen nie. Wählen Sie einfach explorer.exe. Wir werden weder SMTP noch E-Mail verwenden. Belassen Sie diese Werte einfach als Standardwerte und starten Sie WAMP.

In der Taskleiste Ihrer Taskleiste für WAMP wird ein Symbol angezeigt, das orange sein sollte. Dies bedeutet, dass der localhost-Server offline ist. Um es online zu schalten (damit Sie damit arbeiten können), klicken Sie mit der linken Maustaste auf das Symbol und wählen Sie "Alle Dienste starten". Klicken Sie dann erneut mit der linken Maustaste auf das Symbol und wählen Sie "Online stellen". Dadurch wird der localhost-Server auf Ihrem Computer gestartet.

Hinweis: Wenn auf Ihrem Computer beispielsweise Skype oder Teamviewer ausgeführt werden, kann WAMP dadurch nicht online geschaltet werden. Deaktivieren Sie diese Programme, bevor Sie versuchen, den lokalen Host zu starten.

Nachdem wir den localhost-Server eingerichtet haben, können wir die neueste Joomla-Installation herunterladen, mit der wir arbeiten können. Die neueste Version von Joomla ist derzeit 1.7, aber wir werden Joomla 1.5 für dieses Tutorial verwenden. Es ist stabiler und verfügt über die meisten verfügbaren Erweiterungen und Vorlagen.

Gehen Sie zu www.joomla.org. Dort klicken Sie auf die Schaltfläche "Joomla herunterladen" in der Mitte rechts auf der Seite. Scrollen Sie nach unten und suchen Sie nach der neuesten Version von Joomla 1.5. Zum Zeitpunkt dieses Schreibens ist es 1.5.23 und wir möchten das vollständige Paket. Klicken Sie also auf den Link "ZIP", um es herunterzuladen. Wechseln Sie nun in das Verzeichnis C:\wamp\www und erstellen Sie einen neuen Ordner mit dem Namen "joomla". Kopieren Sie die gerade heruntergeladene Joomla-Zip-Datei in diesen Ordner und extrahieren Sie sie mit einem Werkzeug wie 7zip oder WinRAR, die beide von download.com heruntergeladen werden können. Dadurch wird das gesamte Joomla-Paket in dieses Verzeichnis extrahiert und Sie können es installieren.

Um Joomla zu installieren, gehen Sie in Ihren Browser und geben Sie "localhost/joomla/installation" ein. Wenn alles gut gegangen ist, wird die Seite "Sprache auswählen" angezeigt. Wählen Sie Ihre Sprache und klicken Sie auf die Schaltfläche "Weiter" in der oberen rechten Ecke. Für die Überprüfung vor der Installation sollten Sie nichts ändern müssen. Klicken Sie daher auf "Weiter". Klicken Sie erneut auf "Weiter", um die öffentliche GNU-Lizenz zu akzeptieren.

Hier kommt der wichtigste Teil der Installation: Erstellen der Datenbank und des Benutzers. Wir haben derzeit noch keine eingerichtet, daher werden wir diese jetzt erstellen.

Um die Datenbank und den Datenbankbenutzer zu erstellen, verwenden wir PHPmyadmin für WAMP. Klicken Sie mit der linken Maustaste auf das WAMP-Symbol in Ihrer Taskleiste und wählen Sie "PHYmyadmin" oben im Popup. Dadurch wird PHPmyadmin in Ihrem Browser angezeigt. Auf dem ersten Bildschirm erstellen wir die Datenbank für Joomla.

Geben Sie im Feld "Neue Datenbank erstellen" den Datenbanknamen Ihrer Wahl ein. So etwas wie "Vorlage" wird ausreichen. Die Datenbank wird jetzt erstellt und zeigt Ihnen, dass sich derzeit keine Tabellen darin befinden. Der nächste Schritt besteht darin, einen Benutzer mit allen Berechtigungen zu erstellen, damit Joomla auf die Datenbank zugreifen kann. Gehen Sie oben zur Registerkarte "Berechtigungen" und klicken Sie auf "Neuen Benutzer hinzufügen".

Geben Sie in diesem neuen Bildschirm den Benutzernamen ein, den Sie verwenden möchten. Ich habe "template_user" als Benutzernamen und "1234" als Passwort gewählt. Natürlich möchten Sie auf einem echten Server etwas sichereres als dies für Ihren Benutzer und Ihr Passwort verwenden, aber für localhost ist dies nicht sehr relevant. Geben Sie für das Hostfeld "localhost" ein. Darunter, wo Datenbank für Benutzer steht, sollte der Standard das letzte Optionsfeld sein. Wenn dies nicht der Fall ist, klicken Sie auf das letzte Optionsfeld mit der Aufschrift "Alle Berechtigungen für die Datenbankvorlage erteilen". Klicken Sie direkt darunter neben Global Privileges auf den Link "Check All" und dann auf die Schaltfläche "Go" in der unteren rechten Ecke.

Unten sehen Sie ein Beispiel, wie es aussehen sollte.

Nachdem Ihr Benutzer und Ihre Datenbank erstellt wurden, können Sie zu Ihrem Joomla-Installationsbildschirm zurückkehren und diese Elemente in die Felder für die Datenbank einfügen: Zunächst lautet der Datenbanktyp "mysql", und dann geben Sie "localhost" für den Host ein Name. Geben Sie den von Ihnen erstellten Benutzernamen und das Passwort ein. Geben Sie zum Abschluss den Datenbanknamen "template" ein und klicken Sie auf "Weiter". Lassen Sie auf dem FTP-Konfigurationsbildschirm einfach alles wie es ist und klicken Sie auf "Weiter", ohne die FTP-Dateisystemschicht zu aktivieren.

Der letzte Bildschirm ist die Hauptkonfiguration für die Installation. Geben Sie Ihren Site-Namen ein, den ich "Template Tips" nennen werde. Geben Sie Ihre E-Mail-Adresse und Ihr Administratorkennwort ein (für dieses Beispiel können wir nur 1234 erneut verwenden) und bestätigen Sie das Administratorkennwort. Wenn Sie zum ersten Mal mit dem Erstellen von Vorlagen beginnen, würde ich empfehlen, die Beispieldaten zu installieren, da die Site beim Entwerfen ein "vollständiges" Gefühl erhält, anstatt mit einer leeren Tafel zu beginnen. Wenn Sie keine Beispieldaten installiert haben, wird diese beim Aufrufen Ihrer Joomla-Site, nachdem wir hier fertig sind, ziemlich leer sein und es gibt überhaupt keinen Inhalt zum Stylen.

Hinweis: Sobald Sie mit der Änderung von Vorlagen fortgeschritten sind, möchten Sie keine Beispieldaten mehr installieren. Das Deinstallieren des gesamten Dummy-Inhalts dauert länger, als Sie bei der Visualisierung des Erscheinungsbilds der Vorlage sparen.

Klicken Sie also auf die Schaltfläche "Beispieldaten installieren" und dann auf die Schaltfläche "Weiter".

Der letzte und letzte Schritt für die Installation von Joomla (ich verspreche es) besteht darin, das Verzeichnis "Installation" aus dem Ordner "Joomla" zu entfernen, den Sie in WAMP erstellt haben. Gehen Sie zu C:\wamp\joomla und löschen Sie das Installationsverzeichnis vollständig. Gehen Sie jetzt zu localhost/joomla und Sie werden sehen, dass Joomla installiert wurde und wir bereit sind, die Vorlage zu installieren, mit der wir arbeiten werden.

Tipp 2: Auswählen eines Vorlagen-Frameworks

In letzter Zeit waren Template-Frameworks in Joomla sehr beliebt, da Sie damit eine Vorlage schneller fertigstellen können und ein Großteil der Arbeit bereits an der Vorlage selbst geleistet wurde. Einige der beliebtesten Frameworks sind das YooTheme Warp-Framework und das Rockettheme Gantry-Framework. Beide Frameworks wurden von Grund auf neu entwickelt, um zu verhindern, dass mühsame, sich wiederholende Aufgaben für jede Vorlage ausgeführt werden müssen. Außerdem enthalten sie großartige Funktionen wie eine integrierte mobile Vorlage und Backend-Funktionen, mit denen Sie das Erscheinungsbild der Vorlage ändern können, ohne sie zu ändern alles mit Backend-Parametern. Für den Rest dieser Tipps und Beispiele verwende ich eine YooTheme-Vorlage, die das Warp 6-Framework verwendet.

Hinweis: Sie müssen ein YooTheme-Vorlagenabonnement kaufen, um eine Vorlage auf Ihrer Website zu verwenden und zu ändern. Es ist jedoch das zusätzliche Geld wert, das Sie ausgeben, um auf lange Sicht viel Zeit zu sparen.

Einige Framework- und Themenanbieter umfassen:

Schauen Sie sich auf jeder Website um und finden Sie heraus, welche Vorlagen Ihnen am besten gefallen und welches Framework für Sie besser geeignet ist. Jeder Vorlagenanbieter hat seine eigenen Standards, die er für sein Framework festgelegt hat, damit es dem persönlichen Geschmack entspricht und die Funktionsliste, mit der Sie arbeiten möchten. Da ich mich für das Warp 6-Framework von YooTheme entschieden habe, installiere ich zunächst eine Warp 6-Vorlage auf meinem localhost-Server.

Wechseln Sie nach dem Herunterladen der Vorlage zu localhost/joomla/administrator. Geben Sie "admin" für Ihren Benutzernamen und "1234" für das Passwort ein, um sich im Backend anzumelden. Bewegen Sie den Mauszeiger in der oberen Leiste über die Erweiterungen und klicken Sie auf "Installieren/Deinstallieren". Klicken Sie im Feld Upload-Paketdatei auf "Durchsuchen" und suchen Sie das Vorlagenpaket, das Sie auf Ihren Computer heruntergeladen haben. Klicken Sie nun auf die Schaltfläche "Upload File amp; Install". Ihre Vorlage ist jetzt installiert, aber um sie tatsächlich als Vorlage zu aktivieren, müssen Sie einen weiteren Schritt ausführen.

Gehen Sie zu "Erweiterungen" in der oberen Leiste des Joomla-Backends und klicken Sie dann auf "Vorlagen-Manager". Die von mir installierte Vorlage trägt den Titel "yoo_nano". Suchen Sie also in der Liste der Vorlagen nach Ihrer Vorlage und klicken Sie auf das Optionsfeld links davon. Klicken Sie dann auf das Sternsymbol, das die Schaltfläche "Standard" in der oberen rechten Ecke darstellt. Jetzt ist Ihre neue Vorlage so eingestellt, wie sie von Joomla verwendet wird. Aktualisieren Sie Ihre Homepage und Sie sollten die Änderungen sehen!

Tipp 3: Stylen einzelner Seiten

Dies ist wahrscheinlich der nützlichste Tipp, den ich je in Joomla gelernt habe. Er funktioniert mithilfe der URL-Parameter in der Browseradresse, um Stile für bestimmte Seiten anzugeben. Zuerst müssen wir den Code einfügen, der die Variablen von der URL abruft. Unten finden Sie den PHP-Code, der für die Verwendung der in Joomla am häufigsten verwendeten Variablen erforderlich ist, z. B. Element-ID, ID, Ansicht, Option usw. Kopieren Sie den folgenden Code und fügen Sie ihn in den <head> Ihres Dokuments ein.

<?php
$itemid = (isset($_GET['Itemid'])) ? $_GET['Itemid'] : null;
$view = (isset($_GET['view'])) ? $_GET['view'] : null;
$catid = (isset($_GET['catid'])) ? $_GET['catid'] : null;
$task = (isset($_GET['task'])) ? $_GET['task'] : null;
$id = (isset($_GET['id'])) ? $_GET['id'] : null;
$option = (isset($_GET['option'])) ? $_GET['option'] : null;
$cid = (isset($_GET['cid'])) ? $_GET['cid'] : null;
?>

Im zweiten Teil werden diese Variablen als CSS-Klassen für das <body> -Tag verwendet, damit Sie sie nutzen können. Kopieren Sie den folgenden Code und fügen Sie ihn in die class="" des body-Elements in Ihrer Vorlage ein.

cid-<?php echo $cid; ?> id-<?php echo $id; ?> task-<?php echo $task; ?> catid-<?php echo $catid; ?> option-<?php echo $option; ?> itemid-<?php echo $itemid; ?> view-<?php echo $view; ?> option-<?php echo $option; ?>

Das Endergebnis sollte folgendermaßen aussehen:

<body class="cid-<?php echo $cid; ?> id-<?php echo $id; ?> task-<?php echo $task; ?> catid-<?php echo $catid; ?> option-<?php echo $option; ?> itemid-<?php echo $itemid; ?> view-<?php echo $view; ?> option-<?php echo $option; ?>">

Schauen wir uns nun die URL-Parameter unserer Joomla-Site an. Klicken Sie zunächst auf einen der Links auf der Startseite, die zu einer anderen Seite der Website führen. Zum Beispiel habe ich auf meiner Seite wie unten gezeigt auf "Continue Reading" geklickt. Einige der Links sind möglicherweise fest codiert. Suchen Sie daher nach einem Link, dessen Variablen nicht suchmaschinenfreundlich sind.

Wenn Sie sich nun die Adressleiste Ihres Browsers ansehen, sehen Sie die Parameter, die dieser bestimmten URL zugeordnet sind, wie hier gezeigt:

http://localhost/joomla/index.php?option=com_content&view=article&id=44:joomla-security-strike-team&catid=1:latest-news&Itemid=50

Wie Sie oben sehen können, lautet die Option für diese Seite "com_content". Die Ansicht für diese Seite ist "Artikel" und die Artikel-ID für diese Seite ist "50". Itemid bezieht sich auf den einzelnen Menüpunkt, dem dieser Artikel zugeordnet ist. Denken Sie daran, dass in Joomla jedem eine Menüelement-ID zugeordnet sein muss, sonst können Sie ihm keine Module zuweisen. Wenn Sie diese Informationen über die URL verwenden, können Sie diese Informationen jetzt über die Variablen verwenden, die im <head> des Dokuments erstellt wurden.

Werfen wir einen Blick auf die Seite, auf der wir uns gerade befinden. Unten sehen Sie eine Grafik, die zeigt, welche Teile ich exklusiv für diese Seite und keine anderen ändern möchte.

Der einfachste Weg, um herauszufinden, wo sich der CSS-Code für diese beiden Elemente befindet, ist die Verwendung eines EntwicklerWerkzeugs wie Firebug (für Firefox) oder Webkit Developer Werkzeugs (für Chrome). Mit Firebug werde ich mit der Maus über diese Elemente fahren und nachsehen, wo sich das CSS für jedes einzelne Element befindet.

Wie Sie sehen können, arbeiten wir mit einem H1-Tag mit der Klasse "title". Angenommen, wir möchten diese Textfarbe in Rot ändern. Wenn ich auf die rechte Seite des Firebug-Bedienfelds schaue, sehe ich, dass mit diesem Element Stile in system.css, trebuchet.css, base.css usw. verknüpft sind. Normalerweise möchten Sie das Hauptvorlagen-CSS für Ihre Vorlage verwenden, um Änderungen wie diese vorzunehmen. Für diese Vorlage heißt sie layout.css. Für Ihre Vorlage könnte es so etwas wie template_css heißen. oder template.css oder sogar base.css. Wechseln Sie unabhängig davon in eine dieser CSS-Dateien, indem Sie zu C:\wamp\joomla\templates\[template name]\css\layout.css navigieren. (Dieser Pfad kann für Ihre Vorlage unterschiedlich sein.) Scrollen Sie im Inneren ganz nach unten (um sicherzustellen, dass es sich um den spezifischsten Stil in dieser Datei handelt) und fügen Sie Code wie diesen hinzu.

1	.itemid-50 #system .title {
2	color: red;
3	}

Speichern Sie die CSS-Datei und aktualisieren Sie die Seite. Wenn Sie es richtig gemacht haben, sollte der Titel auf dieser Seite in rot geändert werden. Wenn Sie zu einer anderen Seite navigieren, werden Sie feststellen, dass sich diese auf den anderen Seiten nicht geändert hat. Wenn Sie diesen Stil nur global ändern, wirkt sich dies auf die gesamte Site aus. Nachfolgend sehen Sie das Ergebnis dieser Stiländerung:

Um die zweite Änderung am Text "Geschrieben von" vorzunehmen, würde ich das Element mit Firebug auf die gleiche Weise hervorheben, herausfinden, wie es heißt und wo es in den CSS-Dateien gestaltet wird, und dann die PHP-Variablen verwenden von der URL erneut, um sie zu formatieren. Um das "geschrieben von" nur für diese Seite zu gestalten, werde ich es größer machen und blau färben.

1	.itemid-50.view-article #system .meta {
2	color: blue;
3	font-size: 15px;
4	}

Hinweis oben Ich habe eine interessante Kombination aus der Variablen $itemid und der Variablen $view verwendet. Sie können CSS verwenden, um zwei Klassen miteinander zu verknüpfen, um sie spezifischer zu gestalten. In diesem obigen Code heißt es: Die Element-ID muss für diese Seite 50 sein und es muss die Ansicht des Artikels sein, sonst gilt dieses CSS nicht. Damit können Sie Elemente noch spezifischer ausrichten.

Verwenden derselben Idee, aber stattdessen mit PHP-if-Anweisungen: Mit derselben Idee können wir auch PHP-if-Anweisungen in der index.php oder template.php der Vorlage Ihrer Site ausführen, um Änderungen basierend auf diesen URL-Variablen vorzunehmen. Nehmen wir zum Beispiel an, wir haben eine Modulposition mit einer div-Klasse namens "slideshow" eingerichtet. Hier ist ein Beispiel:

1	<div class="slideshow">
2	here is my slideshow position
3	</div>

Ich möchte nur, dass diese Diashow auf der Seite mit einer Itemid von 50 angezeigt wird - nirgendwo anders. Dadurch werden sogar die Einstellungen überschrieben, die Sie für das Modul im Backend festgelegt haben, wo Sie angeben, in welchen Menüelementen es angezeigt werden soll. Dazu wickeln wir eine if-Anweisung wie unten gezeigt um den div-Block:

	<?php if($itemid == '50') : ?>
		<div class="slideshow">
			here is my slideshow position
		</div>
	<?php endif; ?>

Jetzt wird dieses Div nur auf dieser Seite angezeigt und aus dem Code entfernt, wenn wir nicht auf ItemID 50 sind. Ich verwende diese Techniken ständig mit Vorlagen und sie sind äußerst praktisch, daher empfehle ich, mich sehr an die Verwendung zu gewöhnen Sie.

Tipp 4: Reduzieren der Modulpositionen

Die Verwendung von zusammenklappbaren Modulpositionen in Joomla ist so ziemlich eine Notwendigkeit, es sei denn, Sie möchten, dass Positionen auch für leere Module angezeigt werden. Angenommen, Sie haben ein Modul in der rechten Spalte Ihrer Site in einem Div mit dem Namen "right_col". Auf einer bestimmten Seite soll nicht die richtige Spalte angezeigt werden, wenn nichts darin enthalten ist. Wenn Sie keine Anweisung zum Reduzieren von if um diese bestimmte Modulposition haben, wird sie auch dann angezeigt, wenn auf dieser Seite für diese Position nichts aktiviert ist. Sie erhalten eine leere rechte Spalte, in der sich nichts befindet.

Um sicherzustellen, dass die rechte Spalte im leeren Zustand ausgeblendet wird, können Sie entweder eine vorhandene Modulposition suchen oder eine eigene erstellen. Verschiedene Vorlagen bieten unterschiedliche Möglichkeiten zum Erstellen der if-Anweisung für count-Module (countModules ist die reduzierende if-Anweisung). Für die Warp 6-Vorlage ist dies wie folgt geschrieben:

//this is the warp 6 framework style of displaying a module position and wrapping a countModules if statement around it

<?php if ($this['modules']->count('breadcrumbs')) : ?>
	<section id="breadcrumbs"><?php echo $this['modules']->render('breadcrumbs'); ?></section>
<?php endif; ?>

Bei anderen Vorlagen könnte dies jedoch einfacher sein: (Der folgende Code ist die gebräuchlichste Methode zum Schreiben der if-Anweisung countModules.)

//this is the warp 5 framework style of displaying a module position and wrapping a countModules if statement around it

<?php if($this->countModules('right')) : ?>
		<div class="right_column">
				<jdoc:include type="yoomodules" name="right" style="yoo" />
		</div>
<?php endif; ?>

Hinweis: Damit die countModules funktionieren, muss sich zwischen der if-Anweisung eine Modulposition befinden, damit festgestellt werden kann, ob an dieser Position etwas veröffentlicht wurde oder nicht. So sucht das countModules im obigen Code beispielsweise, ob etwas an der "right" Position veröffentlicht wird. Wenn nicht, wird nicht die gesamte div-Klasse right_column angezeigt. Wenn an dieser Stelle etwas veröffentlicht ist, wird alles zwischen dem Beginn der if-Anweisung und dem abschließenden endif angezeigt.

Im Wesentlichen handelt es sich um ein einfaches Konzept, mit dem Ihre Seite dynamischer gestaltet werden kann. Wenn Sie also möchten, dass unterschiedliche Seiten unterschiedliche Layouts haben, können Sie dies auf diese Weise tun. Kombinieren Sie die if-Anweisung countModules mit den obigen Tipps zu URL-Variablen, um die Vorlage noch flexibler zu gestalten. Da Joomla ein Content-Management-System ist, besteht die ganze Idee dahinter darin, dynamisch und flexibel zu sein.

Tipp 5: Angemeldetes Styling

Angenommen, Sie möchten ein bestimmtes Element auf der Seite nur anzeigen, wenn der Benutzer angemeldet ist. Dies kann hilfreich sein, wenn Sie möchten, dass sich Personen für Ihre Website registrieren, bevor sie Zugriff auf Inhalte erhalten. Abgesehen davon gibt es in Joomla viel robustere Möglichkeiten, Zugriffskontrollen zu verwenden, aber als schnelle Möglichkeit, etwas zu ändern, basierend darauf, ob der Benutzer angemeldet ist, funktioniert dieser Tipp einwandfrei. Unten finden Sie den Code, den Sie benötigen:

<?php /*Add class for people who are logged in */
	$user =& JFactory::getUser();
	if($user->id){ echo "<div id=\"members\">";}else{}
?>

<?php /*Add class for people who are logged in */
	$user =& JFactory::getUser();
	if($user->id){ echo "</div>";}else{}
?>

Beide Codeteile sind identisch, außer dass einer die Div-ID der Mitglieder öffnet und der zweite Codeteil diesen Div schließt. Sie nehmen den ersten Code und platzieren ihn direkt unter Ihrem öffnenden <body> -Tag. Nehmen Sie den zweiten Code und platzieren Sie ihn direkt vor Ihrem schließenden </body> -Tag. Speichern Sie die Seite und aktualisieren Sie sie. Wenn Sie nun zu Ihrer Site gehen, sich Firebug ansehen und durch das DOM (Dokumentobjektmodul) im linken Bereich scrollen, werden Sie feststellen, dass die Div-ID von "Mitgliedern" jetzt die gesamte Site umschließt. Dieser Div wird nur angezeigt, wenn sich die Person angemeldet hat.

Schauen wir uns ein einfaches Beispiel an, wie Sie mit diesem Code umgehen können. Angenommen, ich möchte aus irgendeinem Grund, dass die Hintergrundfarbe der Kopfzeile auf meiner Seite für registrierte Benutzer unterschiedlich ist. Dies ist jetzt sehr einfach, da ich die ID #members verwenden kann, um sie anzugeben.

1	#members #header {
2	background:blue;
3	}

Das ist so ziemlich alles. Dies kann nützlich sein, um den Hintergrund eines Moduls oder anderer Positionen auf Ihrer Website zu ändern (um eine Werbung oder was auch immer Sie sich vorstellen können) widerzuspiegeln.

Tipp 6: Modulklassen-Suffixe

Es kann vorkommen, dass Sie eine Vorlage entwickeln, in der Sie ein bestimmtes Modul erstellen möchten, um das Gefühl zu erhalten, das keine anderen teilen. Angenommen, Sie haben ein Modul für Forenbeiträge, das jemand sponsern möchte, und er möchte sein Logo neben dem Modultitel "Powered by XYZ" oder etwas in diesem Sinne. Möglich werden diese durch sogenannte Modulklassensuffixe. Ein Modulklassensuffix ist eine zusätzliche Klasse, die über die Backend-Parameter des Moduls selbst hinzugefügt wird. Schauen wir uns zum Beispiel zunächst an, wie ein Modulklassensuffix hinzugefügt wird.

Wiederum funktionieren verschiedene Frameworks auf verschiedene Arten, aber in diesem Fall können Sie ein Modulklassensuffix hinzufügen, indem Sie style- [was auch immer das Suffix sein wird] einfügen. Andere Vorlagen benötigen möglicherweise nur - [den Suffixnamen] ohne den Stil davor. Ich empfehle, zur Dokumentation die Dokumentation Ihres speziellen Frameworks zu lesen.

Gehen Sie in das Backend der localhost Joomla-Installation unter localhost/joomla/administrator. Navigieren Sie dann zur oberen Leiste, gehen Sie zu "Erweiterungen" und klicken Sie dann auf Modul-Manager. Suchen Sie das spezifische Modul, mit dem Sie arbeiten möchten, oder erstellen Sie sogar ein neues, wenn Sie möchten. In diesem Beispiel habe ich ein Modul namens "Module Class Suffix" erstellt und in die rechte Spalte meiner Vorlage eingefügt. Unten sehen Sie eine Grafik, wie die Seite aussieht:

Beachten Sie, dass sich auf der rechten Seite ein Feld mit dem Namen "Modulklassensuffix" befindet und ich style-water als Suffix eingefügt habe, da dies eine Warp-Vorlage ist. Übernehmen Sie diese Änderungen auf das Modul und wechseln Sie dann zum Frontend. Wenn Sie Firebug verwenden und mit der Maus über das von Ihnen erstellte Modul fahren, sollte angezeigt werden, dass Ihr Klassensuffix jetzt eine CSS-Klasse auf dem Modul selbst ist.

Sie können dies jetzt verwenden, um das Modul so zu gestalten, wie Sie möchten, und es wirkt sich nur auf dieses Modul aus (oder auf jedes andere, dem Sie dieses Modulklassensuffix zuweisen). Hier ist ein Beispiel für Code, mit dem ich dieses Modul einfach gestaltet habe:

.style-water h3.module-title {
	color: blue;
}

.style-water {
	background: #ecf9ff;
	padding: 10px;
}

Und hier ist ein Vorher-Nachher-Screenshot der Änderungen:

Wenn dieses Modul nicht mehr so aussehen soll, entferne ich einfach das Modulklassensuffix aus dem Parameter im Modulmanager und es wird auf die Standardeinstellungen zurückgesetzt. Als Nächstes sehen wir uns an, wie Sie die eigentliche Vorlage des Moduls ändern, damit Sie die Ausgabe und das Design besser kontrollieren können.

Tipp 7: Einfachere Modulvorlagen

Modulklassensuffixe eignen sich hervorragend zum Gestalten einzelner Module. Was passiert jedoch, wenn Sie die tatsächliche Vorlage für das Modul ändern möchten? Wenn ich eine Vorlage erstelle, möchte ich das Modul unter anderem einfacher gestalten, indem ich eine Div-Struktur wie die folgende erstelle:

	<div class="module_wrapper module <?php echo $style; ?>">
		<div class="module_header">
		
		</div>
		
		<div class="module_middle">
		
		</div>
		
		<div class="module_bottom">
		
		</div>
		
		<div style="clear: both;"></div>
	</div>

Dies ist so gut als Modulvorlage zu haben, weil Sie mit diesen drei Divs eine Menge unterschiedlicher Looks für ein Modul erzielen können. Das Schneiden aus Photoshop und das Konvertieren in die Vorlage ist auf diese Weise viel einfacher. Sehen Sie sich das ursprüngliche Modullayout in der von mir verwendeten Vorlage an:

Wir haben ein h3-Tag, ein Absatz-Tag, und das war's. Dieses Modul kann nur mit diesen beiden Elementen nicht viel gestylt werden. Um das Stylen zu vereinfachen, müssen wir die eigentliche Modulvorlage selbst ändern. Auch dies variiert je nach Vorlage, aber im Allgemeinen suchen Sie nach denselben Dateien - sie befinden sich möglicherweise nur an verschiedenen Stellen.

Für diese spezielle Vorlage suche ich folgende Dateien:

[vorlagenname]\warp\layouts\modules\templates\default-1.php
[vorlagenname]\layouts\module.php

default-1.php ist die eigentliche Modulvorlagendatei und module.php steuert, welche Modulvorlagen welchen Positionen zugeordnet sind. Woher wusste ich, dass default-1.php die Modulvorlage ist, die für die rechte Spalte verwendet wird? Mit module.php kann ich sehen, welche Vorlage durch diesen Code der rechten Spalte zugeordnet ist:

// set default module types
if ($style == '') {
	if ($module->position == 'top-a') $style = 'line';
	if ($module->position == 'top-b') $style = 'line';
	if ($module->position == 'bottom-a') $style = 'line';
	if ($module->position == 'bottom-b') $style = 'line';
	if ($module->position == 'innertop') $style = 'line';
	if ($module->position == 'innerbottom') $style = 'line';
	if ($module->position == 'sidebar-a') $style = 'line';
	if ($module->position == 'sidebar-b') $style = 'line';
}

Wie Sie oben sehen können, ist jeder Modulposition ein $style zugeordnet. In diesem Fall werden sie alle "line" genannt. Für diese Vorlage heißt die rechte Spalte tatsächlich sidebar-a, also habe ich nach sidebar-a gesucht und festgestellt, dass der $style gleich "line" ist. Wenn ich weiter unten in dieser Datei scrolle, kann ich sehen, welche Modulvorlage dem $style von "line" zugeordnet ist.

switch ($style) {

	case 'line':
		$template		= 'default-1';
		$style			= 'mod-'.$style;
		$style			.= ($color) ? ' mod-line-'.$color : '';
		$split_color	= 1;
		$subtitle		= 1;
		$title_template = '<h3 class="module-title">%s</h3>';
		break;

	case 'dropdown':
		$template		= 'dropdown';
		$subtitle		= 1;
		break;

	case 'raw':
		$template		= 'raw';
		break;

	default:
		$template		= 'default-1';
		$style			= $suffix;
		$title_template = '<h3 class="module-title">%s</h3>';
}

In diesem Schalterfall können Sie sehen, dass die Fallzeile 'line' die $template "default-1" hat. Der Standardmodulstil für alle Positionen ist ebenfalls default-1, sofern nicht anders angegeben. Nachdem ich weiß, welche Modulvorlage dieser Modulposition zugeordnet ist, kann ich sie nach meinen Wünschen bearbeiten.

Wenn Sie jetzt default-1.php öffnen, sehen Sie, dass der Code folgendermaßen aussieht:

<div class="module <?php echo $style; ?> deepest">

	<?php echo $badge; ?>
	<?php if ($showtitle) echo $title; ?>
	<?php echo $content; ?>
		
</div>

Wie Sie sehen können, ist es ziemlich einfach. Es gibt nicht viele Divs, mit denen man stylen kann. Wir möchten die Divs hinzufügen, die ich Ihnen oben gezeigt habe, um die Steuerung dieses Moduls zu vereinfachen. Ändern Sie den obigen Code so, dass er folgendermaßen aussieht:

	<div class="module_wrapper module <?php echo $style; ?>">
		<div class="module_header">
			<?php if ($showtitle) echo $title; ?>
		</div>
		
		<div class="module_middle">
			<?php echo $content; ?>
		</div>
		
		<div class="module_bottom">
		
		</div>
		
		<div style="clear: both;"></div>
	</div>

Ich habe das Abzeichen entfernt, weil ich nicht wollte, dass es in meiner Modulvorlage angezeigt wird, aber Sie können es behalten, wenn Sie möchten. Das Abzeichen ist nur ein Stil, den die Warp-Vorlagen mit Modulklassensuffixen verknüpft haben. Nachdem wir dieses Layout eingerichtet haben, ist es viel einfacher, das Modul zu formatieren. Nachfolgend finden Sie ein Beispiel für mehr Flexibilität:

Und hier ist der Code, um diesen Stil zu erreichen (ich weiß, dass dies wirklich hässliche Farbkombinationen sind, aber sie werden zu Illustrationszwecken verwendet:

.style-water {
	background: #ecf9ff;
	padding: 10px;
}

.style-water .module_header {
	font-size: 18px;
	font-weight: bold;
	background: blue;
	color: white;
	padding: 10px;
}

.style-water .module_header h3 {
	margin: 0;
}

.style-water .module_middle {
	background: white;
	padding: 10px;
} 

.style-water .module_bottom {	
	height: 15px;
	background: red;
}

Tipp 8: Beheben von Internet Explorer-Fehlern

Wir alle wissen, dass Internet Explorer der Fluch unserer Existenz ist. Daher kann ich dieses Tutorial nicht abschließen, ohne die grundlegenden IE-Bedingungen zu berücksichtigen, mit denen Sie Elemente auf der Seite basierend auf der Version des IE, auf die Sie abzielen, formatieren können. Dies ist kein Joomla-spezifischer Tipp, aber ich werde Ihnen zeigen, wie Sie ihn in Joomla anwenden.

Hinweis: Diese Methode dient zur schnellen Behebung und sollte nicht zur Behebung aller IE-Fehler verwendet werden. Wenn Sie viele Fehler haben, die behoben werden müssen, sollten Sie ein Nur-IE-Stylesheet verwenden, das nur geladen wird, wenn Benutzer diesen bestimmten Browser verwenden.

Es ist ziemlich einfach, diese Bedingungen in Ihre Joomla-Vorlage aufzunehmen. Mithilfe der Funktionsweise von Content-Management-Systemen können Sie die Bedingungen einfach in Ihre Hauptvorlagendatei einfügen. Dies funktioniert auf der gesamten Website, was viel Zeit spart. Unten finden Sie ein Beispiel für die IE-Bedingungen:

1	<!--[if IE 7]>
2	<div id="ie7">
3	<![endif]-->
4
5	<!--[if IE 7]>
6	</div>
7	<![endif]-->

Wie Sie oben sehen können, ziele ich mit diesen Bedingungen auf Internet Explorer 7 ab. Sie können auch problemlos auf andere IE-Versionen abzielen, indem Sie die 7 in eine 6 oder eine 8 ändern. Setzen Sie die erste Bedingung direkt unter Ihr öffnendes <body> -Tag und dann die zweite Bedingung direkt über das schließende </body> -Tag, genau wie wir habe mit dem Mitglied angemeldet Bedingung, die wir zuvor verwendet haben. Mit CSS können Sie jetzt kleine Änderungen vornehmen, um Fehler auf Ihrer Site zu beheben. Angenommen, Sie haben eine Suchleiste und der Text in IE7 ist zu hoch. Wenn Sie das CSS für das Element direkt ändern, wirkt sich dies auf jeden Browser aus, der es ordnungsgemäß gerendert hat, und bringt diese stattdessen durcheinander. Der bessere Weg ist, das CSS so zu schreiben:

1	#ie7 .searchbar {
2	line-height: 20px;
3	}

Jetzt verwende ich einen bestimmten Selektor, der die gesamte Webseite umschließt, um nur den Fehler in Internet Explorer 7 zu beheben. Dies wirkt sich nicht auf die anderen moderneren Browser aus, die ihn zunächst ordnungsgemäß gerendert haben. Auch hier würde ich nicht jeden einzelnen Fehler für IE auf diese Weise beheben, da Sie das Haupt-Stylesheet für die Site aufblähen. Für schnelle Lösungen ist es eine einfache Möglichkeit, die Arbeit zu erledigen.

Abschluss

Das war's für diese schnellen Tipps zu Joomla-Vorlagen! Ich hoffe, diese Tipps sind für Ihre Abenteuer im Joomla-Vorlagendesign von Nutzen und erleichtern Ihnen das Anpassen Ihrer Website. Danke fürs Lesen.