Gegen den Strom

Nur tote Fische schwimmen mit dem Strom

Joomla: Standard-Templates individuell abwandeln

Joomla! ist ein beliebtes Open-Source Content-Management-System mit vielen Möglichkeiten. Eine der Stärken von Joomla ist die riesige Anzahl sowohl freier als auch Premium Templates und und Erweiterung. Diese Template können Sie ganz einfach herunterladen und installieren. Aber auch diese Arbeit müssen Sie sich nicht machen, denn das Installationspaket von Joomla enthält mehrere verschiedene Templates.

Die meisten Einsteiger fangen mit einem davon an und sind damit zunächst zufrieden. Nach einiger Zeit kommen jedoch Änderungswünsche auf. Dieser Artikel führt Sie durch eins der Standardtemplates von Joomla und zeigt Ihnen, wie Sie es für Ihre Website modifizieren zu können.

In Joomla 1.5 verfügbare Templates

Joomla 1.5 beinhaltet drei Frontend-Templates. Eines von ihnen, Beez, wird lediglich als Beispiel dafür, wie man ein Template aufbaut, zur Verfügung gestellt (es ist scheußlich).

Die anderen zwei, JA Purity und Rhuk Milkyway, sind schon eher brauchbar.

Das Template Rhuk Milkyway beinhaltet abgerundete Ecken in seinem Design. Es wird häufig als Framework verwendet, um Erweiterungen für Joomla von Drittanbietern vorzuführen. Auch JA Purity weist eine Reihe von Farbthemen und Templateparametern für die Anpassung der Breite des Templates, des Logotyps (Text oder Bild) und anderer Optionen des Templates auf.

Tools, die Sie brauchen werden

Für dieses Tutorial werden Sie den Firefox browser. Sie werden außerdem die Firefox-ErweiterungFirebug add-on for Firefox (info on getting started) herunterladen und installieren müssen.Firebug integriert sich in Firefox und gibt Ihnen beim Browsen eine Fülle von Entwicklungstools an die Hand. Sie können auf jeder Webseite live CSS, HTML und JavaScript editieren, debuggen und überwachen, was später praktisch sein wird, wenn Sie funktionierenden Code in Ihr Joomla Stylesheet implementieren. Firebug ist ein unschätzbares Werkzeug für Webseitenentwickler und -gestalter und unverzichtbar für dieses Tutorial.Sie werden darüber hinaus einen HTML-Texteditor benötigen, Dreamweaver oder ähnlich, und auch FTP-Zugriff auf Ihre Joomla-Dateien.

Sie werden darüber hinaus einen HTML-Texteditor benötigen, Dreamweaver oder ähnlich, und auch FTP-Zugriff auf Ihre Joomla-Dateien. Eine weitere Option ist, die kostenlose Komponente eXtplorer für Joomla zu installieren. Das ist ein Dateimanager, der Sie Dateien direkt im Browser bearbeiten und speichern lässt.

Wählen Sie Ihr Standardtemplate

In diesem Artikel werde ich das Template JA Purity verwenden, das, wie ich finde, für einen Anfänger am einfachsten zu modifizieren ist. Wenn Sie das Template aktivieren, wird es etwa so aussehen:

Wie Sie sehen können, müssen hier einige Elemente verändert werden. Gott sei Dank ist dieses Template flexibel und leicht zu verstehen.

Das Template verstehen

Das Joomla-Template ist aus mehreren Dateien zusammengesetzt. Diejenigen, die wir in diesem Tutorial berücksichtigen müssen, sind:

  • Die Hauptindexdatei
/templates/ja_purity2/index.php
  • Die Haupttemplatedatei
/templates/ja_purity2/css/template.css
  • Die CSS-Menüdatei
/templates/ja_purity2/css/menu.css
  • Die Templatedatendatei
/templates/ja_purity2/templateDetails.xml

Mit einer Kopie arbeiten

Wenn Sie in der Lage sein wollen, irgendwelche Änderungen zurückzufahren, machen Sie bevor Sie beginnen eine Kopie des Templates. Auf diese Weise können Sie immer wieder zurück zum Original gehen und dort den Code kopieren, wenn Sie etwas vermasseln sollten. Außerdem könnten Sie ohne eine Kopie Ihre Modifikationen überschreiben, wenn Sie den Standardordner verwenden und an irgendeinem Punkt Ihre Joomla-Installation aktualisieren.

Kopieren Sie den Template-Ordner und geben Sie ihm einen neuen Namen. Für dieses Tutorial werde ich den Ordner ja_purity2 nennen.

Jetzt haben Sie auf Ihrer Joomla-Website zwei Kopien des Templates. Wenn Sie auf Extensions → Template Manager gehen werden Sie sehen, dass beide Vorlagen JA Purity heißen. Das ist nicht gut, denn wir werden nicht so leicht sagen können, mit welcher wir gerade arbeiten:

Um das kopierte Template anders zu benennen, müssen Sie die XML-Datei des Templates editieren.

Öffnen Sie die Datei unter /templates/ja_purity2/templateDetails.xml und ändern Sie den Namen. Dann speichern Sie die Datei.

Sie werden sehen, dass die Kopie im Ordner ja_purity2 nun den Namen JA_Purity Modified trägt. Nun wählen Sie das Optionsfeld auf der linken Seite Ihres Templates JA_Purity Modified aus und klicken Sie auf die Schaltfläche „Default“. Das wird Ihre Kopie als Template für die Website aktivieren.

You will see that the copy in the folder ja_purity2 now has the name JA_Purity Modified. Now, select the radio button to the left of your JA_Purity Modified template, and click the "Default" button. This will activate your copy as the template for the website.

Auswählen, was zu modifizieren ist

Es gibt gute Gründe dafür, das Standardtemplate zu modifizieren. Vielleicht gefällt Ihnen die Struktur, aber Sie möchten der Website ein neues Design verleihen. Oder Sie haben bereits ein Logo und Markenfarben oder ein vollständiges Photoshopmodell, das Sie oder ein anderer Designer erstellt haben. Manche von Ihnen werden in Joomla eine bestehende Website neu erstellen und dabei das Design und die Elemente beibehalten müssen.

Wir werden die Elemente des Templates durchgehen und auch, wie sie modifiziert werden, damit Sie jedes Design, das Ihnen gefällt, erstellen können.

Template Overrides

Es gibt den Ordner /templates/ja_purity2/html/, in dem Template Overrides (außer Kraft gesetzte Templates) gespeichert werden. Im Detail auf Template Overrides einzugehen sprengt den Rahmen dieses Artikels. Wenn Sie mehr darüber wissen möchten, sehen Sie sich bitte meinen Blogbeitrag zu diesem Thema an.

Kurz gesagt setzen Template Overrides die Ausgabe von Joomlas Kernkomponenten und -modulen außer Kraft, ohne dass Sie den Kern hacken müssen. Das erlaubt es Ihnen, die Ausgabe der Inhaltskomponente außer Kraft zu setzen, die den Inhalt der Website anzeigt. Wenn der Kern von Joomla aktualisiert wird, bleiben Ihre Overrides unberührt. Wenn Sie die gleichen Dateien im Kern modifizieren, könnten sie von einem späteren Update von Joomla überschrieben werden. Template Overrides können auch für installierte Komponenten und Module verwendet werden.

Modulpositionen

Jedes Joomla-Template hat einen Satz von Modulpositionen. Das sind PHP-Abschnitte, die eines oder mehrere Module, die der Position zugewiesen sind, aufrufen.

Wir werden am Ende dieses Artikels weiter über Modulpositionen reden.

Modifizieren der Templateparameter

Das erste, was ich normalerweise tue, ist mir die Templateparameter im Joomla-Administrator anzusehen. Den finden Sie, wenn Sie sich in den Adminbereich von Joomla einloggen. Dann gehen Sie zu Extensions → Template manager → JA_Purity.

Auf der rechten Seite sehen Sie eine Liste mit Parametern. Diese sind einzigartig für das Template, denn sie werden vom Entwickler hinzugefügt. Die hier vorgenommenen Einstellungen werden in der Datei params.ini im Ordner /templates/ja_purity2/ gespeichert und beim Laden einer Seite von der Datei index.php erfasst.

Das Template JA Purity hat einige Optionen. Lassen Sie uns ein paar davon betrachten:

  • Logo type Hier können Sie entweder eine Bilddatei oder Text verwenden. Das Logobild muss im Ordner /templates/ja_purity2/ gespeichert werden und logo.png heißen. Das Standardlogo hat die Größe 207x80 Pixel.
  • Logo text Wenn Sie „Text" als Logotyp auswählen, geben Sie hier Ihren Text ein.
  • Slogan Das ist die Textzeile, die unter dem Logo erscheint.
  • Horizontal NavigationType Hier haben Sie zwei Optionen: SuckerFish Menu und JAMoo Menu. Lassen Sie es im Moment bei SuckerFish Menu.
  • Template width Aus irgendeinem Grunde ist die Standardbreite des Templates 97%. Ich glaube nicht, dass ich einer Website jemals eine fließende Breite gegeben habe, zumindest nicht in den letzten 10 Jahren. ;) Ändern Sie die Einstellung auf „Specified in pixels".
  • Specified width Geben Sie hier die Pixelanzahl ein, z.B. 980. Das wird die Breite des Templatecontainers sein.
  • Right modules collapsible function So schön sie ist, ich deaktiviere diese Funktion normalerweise, mit der der User die Module in der rechten Spalte verbergen kann. Ich kann wirklich nicht feststellen, dass sie häufig verwendet wird.

Die restlichen Parameter können für den Moment so bleiben, wie sie sind.

So weit, so gut. Jetzt haben Sie alles eingestellt, was Sie ändern können, ohne in den Code zu gehen.

Sie werden einige Buttons im oberen Teil der Seite bemerken. Wie Sie sehen, haben Sie von hier aus direkten Zugang zu HTML und CSS. Es ist OK, das für schnelle Änderungen zu verwenden. Ich finde jedoch, dass diese Ansichten weniger flexibel sind als die Verwendung eines externen Editors, eines FTP-Zugangs oder der Komponente eXtplorer.

Ändern des Logos

Das Erste, was Sie tun möchten, ist Ihr eigenes Logo in das Template einfügen.

Laden Sie, um das Logo zu ändern, eine neue Bilddatei mit dem Namen logo.png in den Ordner /templates/ja_purity2/.

Wenn das Logo die gleiche Größe hat wie das Original, können Sie die Einstellungen belassen. Das Originallogo ist 207 x 80 Pixel groß:

Wenn Ihr Logo eine andere Größe hat, müssen Sie im CSS die Maße des Logos und des Headers ändern. In diesem Beispiel fügen wir ein Logo mit einer Breite von 270 Pixel und einer Höhe von 120 Pixel hinzu.

Wenn ich das Logo einfach in den gleichnamigen Bilderordner des Templates hochgeladen hätte, würde das so aussehen:

Damit das Logo richtig erscheint, muss ich das CSS sowohl an das Logo selbst als auch an den Container, der es aufnimmt, anpassen.

Sie können Firebug verwenden, um den Code für das Logo und den Header zu inspizieren. Machen Sie einen Rechtsklick auf das Bild des Headers, um das Kontextmenü erscheinen zu lassen und wählen Sie „Inspect element“ aus:

Mit Firebug können Sie einfach feststellen, wo das entsprechende CSS liegt und anfangen, mit Änderungen zu experimentieren. Sie können das CSS in Firebug ändern und die Änderungen sogleich sehen:

Hier haben wir das Hintergrundbild für .ja-headermask durch Klick auf das Symbol deaktiviert und die Höhe auf 120 Pixel eingestellt. Dass CSS füllt sich automatisch für Sie aus, was die Arbeit damit wirklich schnell macht.

Wenn Sie mit dem Experimentieren in Firebug fertig sind, können Sie die Änderungen permanent auf die CSS-Datei des Templates anwenden. Das spart viel Zeit, weil Sie nicht ständig hin und her wechseln müssen.

Um das CSS anzupassen, öffnen wir die Datei /templates/ja_purity2/css/template.css.

In Zeile 921 finden wir den folgenden Code:

01 #ja-headerwrap {
02    background: #333333;
03    color: #CCCCCC;
04    line-height: normal;
05    <strong>height: 80px;</strong>
06 }
07  
08 #ja-header {
09    position: relative;
10    <strong>height: 80px;</strong>
11 }

In diesem Falle stellen wir sowohl die Höhe von #ja-headerwrap als auch von #ja-header auf 140 Pixel ein. Ich möchte etwas mehr Platz ober- und unterhalb des Logos lassen, daher habe ich dem #ja-header ein Padding-Top, einen Abstandhalter, hinzugefügt:

01 #ja-headerwrap {
02  background: #333333;
03  color: #CCCCCC;
04  line-height: normal;
05  <strong>height: 140px;</strong>
06 }
07  
08 #ja-header {
09    position: relative;
10    <strong>height: 140px;
11    padding-top:10px;</strong>
12 }

Sie sehen, dass der Header größer, das Logo aber abgeschnitten ist. Der Grund dafür ist, dass das Logo im des h1-Link-Tag enthalten und als Hintergrund eingestellt ist. Daher müssen wir die Größe des umschließenden Containers anpassen.

Weiter unten in der CSS-Datei finden wir diesen Code:

1 h1.logo a {
2 width: 208px;
3 display: block;
4 background: url(../http://www.smashingmagazine.com/wp-content/uploads/2010/08/logo.png) no-repeat;
5 height: 80px;
6 position: relative;
7 z-index: 100;
8 }

Wie Sie vielleicht bemerkt haben, ist das die Stelle in der CSS-Datei, wo der Pfad zum Logo gespeichert ist. Wenn Ihr Logo also online ist, würden Sie hier die URL eintragen. Das Standardbild befindet sich im Ordner /templates/ja_purity2/. Sie sehen, dass der Pfad zu dieser Datei relativ ist, der Entwickler hat das Format …/ verwendet, um die URL festzulegen. Um einen Ordner im Root der Website zu bestimmen, schreiben Sie aus /http://www.smashingmagazine.com/wp-content/uploads/2010/08/, gefolgt vom Dateinamen des Bildes.

1 h1.logo a {
2  width: 270px;
3  display: block;
4  background: url(<strong>/http://www.smashingmagazine.com/wp-content/uploads/2010/08/adifferentlogo.png</strong>) no-repeat;
5  height: 120px;
6  position: relative;
7  z-index: 100;
8  }

Bilder im Header ändern oder entfernen

JA Purity hat eine eingebaute Rotationsfunktion für das Bild im Header. Sie können diese bei Ihren eigenen Bildern verwenden oder auch komplett entfernen. Um sie zu verwenden, erstellen Sie Bilder mit einer Größe von 600x80 Pixel. Laden Sie die Bilder in den Ordner /templates/ja_purity2/header/ hoch. Das Script liest die Bilder aus dem Ordner aus und lässt sie rotieren und blendet jedes Bild an beiden Seiten aus.

So schön das auch ist, Sie können die Bildrotation aus dem Header entfernen, wenn Sie möchten. Öffnen Sie die Datei index.php in einem Editor Ihrer Wahl und lokalisieren Sie den folgenden Abschnitt:

1 <!-- BEGIN: HEADER -->
2  <div id="ja-headerwrap">
3  <div id="ja-header" class="clearfix" style="background:
4 url(<?php echo $tmpTools->templateurl(); ?>/http://www.smashingmagazine.com/wp-content/uploads/2010/08/header/
5 <?php echo $tmpTools->getRandomImage(dirname(__FILE__).DS.'http://www.smashingmagazine.com/wp-content/uploads/2010/08/header'); ?>)
6 no-repeat top <?php if($this->direction == 'rtl') echo 'left'; else echo 'right';?>;">
7  
8 <div class="ja-headermask">&nbsp;</div>

Die Bilder des Headers werden mit dem Hintergrundstil für #ja-header platziert. Die #ja-headermask agiert auch als Maske, um die Bilder an beiden Seiten auszublenden. Um die Bilder und die Maske des Headers zu entfernen, ändern Sie den Code dahingehend ab:

1 <!-- BEGIN: HEADER -->
2 <div id="ja-headerwrap">
3  
4 <div id="ja-header" class="clearfix">

Im Prinzip entfernen wir den Hintergrundstil von #ja-header und entfernen #ja-headermask komplett.

Andere Elemente entfernen

Wenn wir schon einmal dabei sind, können wir auch gleich ein paar Elemente mehr entfernen. Im Header des Templates befindet sich ein Tool zur Änderung der Schriftgröße.

Kommentieren Sie es aus oder entfernen Sie es, wenn Sie es nicht brauchen:

1 <!-- <?php $tmpTools->genToolMenu(JA_TOOL_FONT, 'png'); ?> -->

In der Fußzeile befinden sich auch zwei Schaltflächen für die Gültigkeitsprüfung von CSS und XHTML:

Sie möchten das sicherlich auskommentieren oder den gesamten Abschnitt entfernen:

01 <div class="ja-cert">
02 <jdoc:include type="modules" name="syndicate" />
03  
04 <a href="http://jigsaw.w3.org/css-validator/check/referer" title="<?php echo JText::_("CSS Validity");?>" style="text-decoration: none;">
05 <img src="<?php echo $tmpTools->templateurl(); ?>/http://www.smashingmagazine.com/wp-content/uploads/2010/08/but-css.gif" border="none" alt="<?php echo JText::_("CSS Validity");?>" />
06  
07 </a>
08 <a href="http://validator.w3.org/check/referer" title="<?php echo JText::_("XHTML Validity");?>" style="text-decoration: none;">
09  
10 <img src="<?php echo $tmpTools->templateurl(); ?>/http://www.smashingmagazine.com/wp-content/uploads/2010/08/but-xhtml10.gif" border="none" alt="<?php echo JText::_("XHTML Validity");?>" />
11 </a>
12  
13 </div>

Hindergrundfarbe des Headers ändern

Um dem Header eine andere Hintergrundfarbe zu geben, brauchen wir nur den Hexcode für die Hintergrundfarbe ändern. Für dieses Beispiel bin ich bei einem blauen Farbton mit dem Code #3E5E93 gewählt (okay, nicht gerade ein anmutendes Design, aber es verdeutlicht, worum es geht).

1 #ja-headerwrap {
2 <strong>background: #3E5E93;</strong>
3 color: #CCCCCC;
4 line-height: normal;
5 height: 140px;
6 }

Das verleiht dem Header diese blaue Hintergrundfarbe. Natürlich können Sie dem Header ein Hintergrundbild hinzufügen, wenn Sie das vorziehen.

So wie es jetzt ist, läuft die Hintergrundfarbe durch den ganzen oberen Teil der Website. Wenn Sie in Firebug mit dem Cursor über #ja-header fahren werden Sie sehen, dass div auf der Seite hervorgehoben ist. Wir können hier mit einer anderen Farbe als der von #ja-headerwrap experimentieren.

Um das zu tun, ändern wir die Hintergrundfarbe von #ja-headerwrap auf transparent. Wir ändern auch die Hintergrundfarbe von ja-header in dieses Blau.

Sieht ein bisschen seltsam aus oder nicht? Wir müssen den Schatten, der sich unter #ja-headerwrap befindet, entfernen. Das muss bei allen vier divs gemacht werden, die diesen Schatten als Hintergrundbild haben.

Sie werden feststellen, dass diese Hintergründe in zwei unterschiedlichen CSS-Dateien eingetragen sind: in template.css und in die Datei unter /templates/ja_purity2/styles/elements/black/style.css (sofern Schwarz die Farbe ist, die Sie möchten).

Um es einfach zu machen, hängen Sie den folgenden Code an das untere Ende der Datei style.css an (da er nach dem template.css geladen wird, wird er diese Stile überschreiben).

1 #ja-containerwrap-fr,
2   #ja-containerwrap,
3   #ja-containerwrap2 {
4   background-image:none !important;
5   }

Zusätzlich zum Entfernen der Schatten fügte ich ein wenig Padding und einige Ränder um den Hauptcontainer herum hinzu. Ich habe hier außerdem das Hintergrundbild entfernt:

1 #ja-container2 {
2   <strong>border-left:1px solid #DDDDDD;
3   border-right:1px solid #DDDDDD;</strong>
4   padding:20px <strong>10px !important;</strong>
5  
6   }

Was uns dieses Ergebnis liefert:

Nicht gerade ein Meisterstück des Designs, aber auf jeden Fall besser als das, womit wir angefangen haben. Grenzen sind Ihnen nur durch Ihre Fantasie gesetzt.

Ein bisschen weitergehen

Zu diesem Zeitpunkt sollten Sie eine gute Vorstellung davon haben, wie Sie das CSS des Templates und andere Einstellungen an Ihre Bedürfnisse anpassen können.

Die obigen Tipps sind ziemlich grundlegend. Sie können Ihre Fähigkeiten erweitern, indem Sie lernen, wie Template Overrides, Module Positions und Module Chrome eingesetzt werden, um nur einige wenige zu nennen.

  • Template overrides Code, der die Standardausgabe eines Moduls oder einer Komponente überschreibt.
  • Module positions PHP-Abschnitte, die Module in das Template einbauen.
  • Module chrome Code, der die HTML- oder XHTML-Ausgabe eines Moduls kontrolliert. (Lesen Sie mehr auf der Website von Joomla.)

Sowohl Template Overrides als auch Module Chrome sind zu kompliziert für diesen Artikel, ich werde Ihnen jedoch zeigen, wie Sie dem Template eine Modulposition hinzufügen können.

Modulpositionen hinzufügen

Wie bereits erwähnt, hat jedes Joomla-Template eine Anzahl von Modulpositionen. Sie können die Modulpositionen in Ihrem Template anzeigen lassen, indem Sie die Parameter ?tp=1 an die URL anhängen.

Zum Beispiel zeigt Ihnen die Eingabe von http://www.joomla.org/?tp=1 die Modulpositionen auf Joomla.org.

Beachten Sie, dass diese Funktion blockiert werden kann, indem der Datei .htaccess-Code hinzugefügt wird (also lassen Sie sich nicht verwirren, wenn Sie das auf einer Joomla-Website ausprobieren und es nicht funktioniert).

Die Modulpositionen in Joomla befinden sich in der Datei index.php des Templates.

Es gibt im Prinzip zwei Arten von Modulpositionen: eine reguläre Modulposition und die Ausgabe von Komponenten.

Die Ausgabe von Komponenten (zum Beispiel Joomla-Artikel, Ausgabe von Komponenten Dritter etc.) sieht so aus:

1 <jdoc:include type="component" />

Die regulären Modulpositionen sehen etwa so aus:

1 <jdoc:include type="modules" name="left" style="xhtml" />

name ist die "Position", die Sie auswählen, Wenn Sie Ihre Module der Position zuweisen.

Der style ist das Module Chrome oder der Ausgabestil, der auf diese Modulposition angewendet wird.

Der HTML-Code des Menüs besteht aus den Menüpunkten, umschlossen vom Modul Chrome:

1   <div class="moduletable_menu">
2   <ul class="menu">
3  
4     <li id="current" class="active item1"><a href="#"><span>Home</span></a></li>
5     <li class="item2"><a href="#"><span>Contact</span></a></li>
6  
7   </ul>
8 </div>

Wir wollen das Modul Chrome jedoch nicht anzeigen, wenn ihm keine Module zugewiesen sind. Darum fügen wir eine if-Bedingung um die Modulposition herum hinzu. Das ist ein einfacher PHP-Abschnitt, der überprüft, ob der Position left ein Modul zugewiesen ist oder nicht:

1     <strong><?php if ($this->countModules('left')): ?></strong>
2     <jdoc:include type="modules" name="left" style="xhtml" />
3  
4 <strong><?php endif; ?></strong>

Natürlich können Sie mehr Code einbauen, der angezeigt wird, wenn der Modulposition Module zugewiesen wurden. Der Entwickler von JA Purity hat etwas mehr Code hinzugefügt, um das Modul in seinem Design zu positionieren und auch einige Kommentare ergänzt:

1 <?php if ($this->countModules('left')): ?>
2    <strong><!-- BEGIN: LEFT COLUMN -->
3      <div id="ja-col1"></strong>
4         <jdoc:include type="modules" name="left" style="xhtml" />
5  
6      <strong></div><br />
7    <!-- END: LEFT COLUMN --></strong>
8 <?php endif; ?>

Das wickelt das Modul sauber in ein div mit dem Namen #ja-col1, was es Ihnen erlaubt, das Element mit dem CSS zu gestalten. Und das div wird nur angezeigt, wenn der Position left ein Modul zugewiesen ist.

Die endgültige Ausgabe sieht so aus:

01 <!-- BEGIN: LEFT COLUMN -->
02   <div id="ja-col1">
03     <div class="moduletable_menu">
04       <ul class="menu">
05         <li id="current" class="active item1"><a href="#"><span>Home</span></a></li>
06  
07         <li class="item2"><a href="#"><span>Contact</span></a></li>
08       </ul>
09     </div>
10  
11   </div><br />
12 <!-- END: LEFT COLUMN -->

Mit dieser einfachen Methode können Sie Ihrem Template so viele Modulpositionen hinzufügen, wie Sie möchten. Sie könnten Positionen für Werbung haben, mehr Positionen für die rechten oder linken Spalten (um diese in mehr Spalten zu teilen) oder einfach eine Position für ein Template, das genau da keine Position hat, wo Sie eine brauchen.

Sie können auch Positionen hinzufügen, die Scripts enthalten, die Sie nicht im Frontend Ihrer Website anzeigen wollen. Ich habe zum Beispiel Modulpositionen am Ende des Tags head und am Anfang und Ende des Tags body hinzugefügt, um in der Lage zu sein, verschiedene Arten von Scripts zuzuweisen (Google Analytics, CrazyEgg etc.).

Die Position der XML-Datei hinzufügen

Damit eine neue Templateposition im Dropdown-Menü der Modulpositionen in den Modulen erscheint, fügen Sie sie der XML-Datei des Templates hinzu. Öffnen Sie die Datei noch einmal unter /templates/ja_purity2/templateDetails.xml 

Tatsächlich brauchen Sie die Position nicht zur XML-Datei hinzufügen. Es reicht aus, den Namen der Position in das Positionsfeld zu schreiben. Auf jeden Fall ist es auch gut, sie in die XML-Datei einzutragen. Wenn der Position kein Modul zugewiesen ist, wird sie auch nicht in der Liste erscheinen.

Zusammenfassung

Natürlich haben wir nur an der Oberfläche dessen gekratzt, was mit Joomla-Templates machbar ist. Aber für den Anfang ist es schon eine ganze Menge.

Damit Sie den Überlick behalten, hier nochmals ein kurzer Abriss, wie Sie am besten vorgehen:

  • Inspizieren Sie mit Firebug das Element, das Sie ändern möchten.
  • Machen Sie diese Änderungen, wie immer, in einer Kopie Ihres Originals.
  • Nehmen Sie mit Firebug ein paar experimentelle Änderungen vor, um Ihre Einstellungen zu testen.
  • Wenden Sie das CSS auf das Stylesheet des Templates an.
  • Prüfen Sie die Einstellungen in allen wichtigen Browsern.

Viel Glück!

Quelle

Aktuelle Seite: Startseite Webdesign CMS-Systeme Joomla: Standard-Templates individuell abwandeln