CMS Joomla: Standard-Templates individuell abwandeln

Kristoff Svandson

Joomla! ist ein beliebtes Open-Source Content-Management-System (CMS) 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.
Firebug

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:
The JA Purity template

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:

Same name

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.

XML file

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.

Default template

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 207×80 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.

JA Purity parameters

Die Parameter in der Datei params.ini sehen so aus:

Params

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.

Template buttons

Ä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ß:

Logo

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:

Logo

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:

Inspect

Das Fenster von Firebug wird sich in Ihrem Browser öffnen und Sie werden so etwas wie das hier sehen:
Firebug

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:

Firebug CSS

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:

#ja-headerwrap {
   background: #333333;
   color: #CCCCCC;
   line-height: normal;
   height: 80px;
}

#ja-header {
   position: relative;
   height: 80px;
}

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:

#ja-headerwrap {
 background: #333333;
 color: #CCCCCC;
 line-height: normal;
 height: 140px;
}

#ja-header {
   position: relative;
   height: 140px;
   padding-top:10px;
}

Der Header sieht nun so aus:
Logo

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:

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

Ich werde die Breite auf 270 Pixel und die Höhe auf 120 Pixel ändern. Jetzt sieht das Logo richtig aus:

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.

h1.logo a {
 width: 270px;
 display: block;
 background: url(/http://www.smashingmagazine.com/wp-content/uploads/2010/08/adifferentlogo.png) no-repeat;
 height: 120px;
 position: relative;
 z-index: 100;
 }

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 600×80 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.

Header images

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:

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

<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:

<!-- BEGIN: HEADER -->
<div id="ja-headerwrap">

<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.

Font resizer

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

 <!-- <?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:

Buttons

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

 <div class="ja-cert">
 <jdoc:include type="modules" name="syndicate" />

 <a href="http://jigsaw.w3.org/css-validator/check/referer" title="<?php echo JText::_("CSS Validity");?>" style="text-decoration: none;">
 <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");?>" />

 </a>
 <a href="http://validator.w3.org/check/referer" title="<?php echo JText::_("XHTML Validity");?>" style="text-decoration: none;">

 <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");?>" />
 </a>

 </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).

 #ja-headerwrap {
 background: #3E5E93;
 color: #CCCCCC;
 line-height: normal;
 height: 140px;
 }

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

Nun sieht unser Template etwa so aus:

Template blue

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.

Jetzt sieht der Header so aus:

Strange header

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 können sehen, wie das in Firebug aussieht:

Containerwrap

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).

 #ja-containerwrap-fr,
   #ja-containerwrap,
   #ja-containerwrap2 {
   background-image:none !important;
   }

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:

  #ja-container2 {
    border-left:1px solid #DDDDDD;
    border-right:1px solid #DDDDDD;
    padding:20px 10px !important;

    }

Was uns dieses Ergebnis liefert:

Finished template

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.

Module positions

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:

<jdoc:include type="component" />

Die regulären Modulpositionen sehen etwa so aus:

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

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

Menu parameters

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:

  <div class="moduletable_menu">
  <ul class="menu">

    <li id="current" class="active item1"><a href="#"><span>Home</span></a></li>
    <li class="item2"><a href="#"><span>Contact</span></a></li>

  </ul>
</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:

    <?php if ($this->countModules('left')): ?>
    <jdoc:include type="modules" name="left" style="xhtml" />

<?php endif; ?>

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:

 <?php if ($this->countModules('left')): ?>
   <!-- BEGIN: LEFT COLUMN -->
     <div id="ja-col1">
        <jdoc:include type="modules" name="left" style="xhtml" />

     </div><br />
   <!-- END: LEFT COLUMN -->
<?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:

<!-- BEGIN: LEFT COLUMN -->
  <div id="ja-col1">
    <div class="moduletable_menu">
      <ul class="menu">
        <li id="current" class="active item1"><a href="#"><span>Home</span></a></li>

        <li class="item2"><a href="#"><span>Contact</span></a></li>
      </ul>
    </div>

  </div><br />
<!-- 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 und schauen Sie nach einem Abschnitt, der
heißt:

Template positions in the XML file

Fügen Sie zwischen
und eine weitere Zeile ein. Wenn Sie zum Beispiel die Position leftbottom ergänzen, dann fügen Sie der Datei
leftbottom
hinzu. Jetzt erscheint die Modulposition in der Parameteransicht der Module:

Leftbottom position

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!

(mm)

Sortiert nach:   neueste | älteste | beste Bewertung
matthias
Gast
5 Jahre 10 Monate her

Vielen Dank für die ausführliche und hilfreiche Zusammenfassung. Einen kleinen Hinweis möchte ich an dieser Stelle noch geben: das „scheußliche“ Template „Beez“ ist zwar wirklich nicht schön anzusehen, aber es ist – dank der Template-Overrides – eines der wenigen, komplett barrierefreien Templates, die es für Joomla! gibt.
In den meisten anderen Joomla!-Templates, die frei verfügbar sind, werden eine Unmenge an Layout-Tabellen für die Darstellung der einzelnen Komponenten und Module verwendet, daher lohnt es sich trotz des Aussehens über eine Anpassung des „Beez“-Templates nachzudenken…

pezi
Gast
pezi
5 Jahre 10 Monate her

Hallo matthias!
ich kenne Joomla nur vom hörensagen, spiele aber mit dem Gedanken irgendwann mal von den handgecodeten Sites weg zu kommen, bzw. sowas mal zu testen.
Den Anstoß dazu gab deine Anmerkung bez. „barrierefrei“ – denn ich mache nur solche Sites.

– Ist dieses „Beez“ wirklich tabellenfrei? (denn zb. etliche xtcommerce TPL Hersteller prahlen auch mit tabellenfrei, jaja und dann immer noch 10 verschachtelte pro seite)
– Sind im Kern v. Joomla welche? (auch da wieder, in xtc kannste ein noch so tolles DIV Layout machen bleiben 100e Tabs im Kern über)
Ist das TPL echt so häßlich? (kann man das wo sehen?)

pezi
Gast
pezi
5 Jahre 10 Monate her

@ Autor
Danke dafür, das sieht gut aus, va. umfangreich, also ev. auch für Anfänger!

– Statt Firebug kann man doch sicher auch das Addon „Webdeveloper“ nehmen, stimmts?
– Wegen des Hinweises bez. „Beez ist Barrierefrei“ (s. Komment oben) – könnte man da auch mal so ein TUT bringen, mit dem häßlichen, aber dafür barrierefreien TPL?

matthias
Gast
5 Jahre 10 Monate her

@ pezi: die HTML-Overrides im beez-templates-Ordner sind recht umfangreich. Ich habe das Template allerdings nicht auf Vollständigkeit überprüft, aber die Standard-Komponenten sollten tabellenfrei sein. Das Template wurde (u.a.) von Angie Radtke entwickelt. Für Joomla! 1.6, das irgendwann (hoffentlich bald) erscheint, gibt es wohl ein 100%ig tabellenfreies Layout: http://www.der-auftritt.de/wissen/Joomla-1.6-Beez-und-der-Stand-der-Dinge.html

trackback

[…] Zum Artikel… Share […]

trackback

[…] Joomla: Standard-Templates individuell abwandeln | Dr. Web Magazin – wow: "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." (Tags: Joomla css Webdesign template Tutorial ) Share 0savesSave If you enjoyed this post, please consider leaving a comment or subscribing to the RSS feed to have future articles delivered to your feed reader. […]

Sebastian
Gast
5 Jahre 10 Monate her
Ja, so ungefähr hatte ich vor einiger Zeit auch angefangen. Zwar nicht mit einem der mitgelieferten Standard-Templates, aber ein vorgefertigtes Template ist ideal um die nötigen Handgriffe zu erlernen und vor allem verstehen wie Joomla funktioniert. Mittlerweile bin ich davon abgekommen vorhandenes zu modifizieren, sondern habe durch das erworbene Verständnis meine eigenen Templates geschaffen. Meist basierend auf dem 960gs Grid-System lassen sich diese perfekt in Joomla integrieren. Mit dem Vorteil nicht ganz so abhängig von Joomla zu sein, mehr Flexibiltät. So lässt sich die Seite auch „leicht“ in ein anderes CMS integrieren oder sich zur Not ganz davon befreien. Je… Read more »
Thomas
Gast
Thomas
5 Jahre 10 Monate her

Wenn man barrierefreie Websites erstellen will, sollte man sich auch Contao ansehen.
http://www.contao.org

Gruß
Thomas

trackback

[…] WordPress. Nichtdestotrotz: für einige dürfte Joomla sicherlich ein interessantes System sein. Dr. Web erklärt, wie man Standard-Themes nach eigenen Wünschen abwandelt. Sehr […]

Joomla developer
Gast
5 Jahre 10 Monate her

Führende Template-Clubs (Joomlart, RocketTheme, Yootheme) haben schon eigene Templates Frameworks, die für Einsteiger wesentlich schwere zu verstehen sind.
Z.B. im RocketTheme Framework Gantry wird auch 960gs verwendet.

p.s.: kostenlose Templates sind i.d.R. nicht für mobile Geräte adaptiert.

@Dr.Web: nehmen Sie JA_Purity ver. 2 anstatt ver. 1. Wäre hilfreicher für Einsteiger + auf dem JA Framework T3.

Wein05
Gast
5 Jahre 10 Monate her

Ich kann der Aussage von Matthis nur zustimmen. Das Template Beez wird zwar zur Zeit nie einen Schönheitspreis gewinnen, aber durch die wirklich komplette Barrierefreijeit ungemein praktikabel. Und das ist für mich wesentlich wichtiger als eine schöne Oberfläche.

videos divertidos
Gast
5 Jahre 10 Monate her

This is valuable information , thanks I will try it out! scholarships

Steffen
Gast
5 Jahre 10 Monate her

Also zum Beez.
Das Template selbst ist ohne Tabellen. Auch wurden für die wichtigsten Komponenten die Overrides so angepasst, das auch dort alle Tabellen eliminiert sind.
Wenn du nun allerdings exotische Komponenten / Module dir intallierst, können wieder Tabellen auftauchen… dann bist du selbst gefragt.

Es sieht so schrecklich aus (meine Meinung) weil sich Angie Radtke keine großen Gedanken um das Design gemacht hat – und das absichtlich.
Das Beez kann allerdings relativ leicht umgestaltet werden. Irgendwo hab ich im Web mall Beispiele von Angie Radtke gesehen, was mit dem Beez-Template alles möglich ist.
Das Beez soll vorallem als Grundlage dienen!

Brian
Gast
Brian
5 Jahre 10 Monate her

Ist Tabellenfrei = Barrierefrei
Ich glaube nicht

Bastian
Gast
Bastian
5 Jahre 10 Monate her

Hi Leute,
nettes Tutorial! Hat einer von euch ein Joomla-Template bei dem der gesamt CSS-Teil fehlt, sodass nur noch CSS ergänzt werden muss?
Ich suche ein dreispaltiges Layout.

Micha
Gast
Micha
4 Jahre 2 Monate her

Hallo,
vielen Dank für das wirklich hilfreiche Tutorial.
Eine Frage bleibt für mich noch offen: die Gestaltung des Hintergrunds bei einer festen Breite durch die Grafiken.
Wie gelingt es, den Inhalt links und rechts mit einer „seamless Grafik“ „einzurahmen“?

joom-friends
Gast
4 Jahre 2 Monate her

Sehr schönes Tutorial. Der eXtplorer ist für die Bearbeitung von Joomla Quellcode keine schlechte Sache. Gute Erfahrungen haben ich dafür aber auch mit dem OSE File Manager gemacht. Außerdem kann man auch auf freie Template-Frameworks zurückgreifen, um sich sein eigenes Template zu entwickeln. Gute freie Frameworks gibts mittlerweile viele, z.B. das Gantry von rockettheme oder das Helix von JoomShaper.

Albert at large
Gast
2 Jahre 3 Monate her

Nicht mehr ganz taufrisch, aber sehr gut erklärt. Besten Dank dafür!

Schöne Grüsse aus der Quadratestadt Mannheim

wpDiscuz

Mit der Nutzung unseres Angebots erklärst du dich damit einverstanden, dass wir Cookies verwenden. Weitere Informationen

Wir verwenden Cookies, um Inhalte und Anzeigen zu personalisieren, Funktionen für soziale Medien anzubieten und die Zugriffe auf unsere Website zu analysieren. Dadurch geben wir nicht personenbezogene Informationen zur Nutzung unserer Website an unsere Partner für soziale Medien, Werbung und Analysen weiter. Nähere Informationen findest du in unserer Datenschutzerklärung. Durch die Weiternutzung unserer Website (oder das ausdrückliche Klicken auf "Einverstanden") gehen wir davon aus, dass du mit der Verwendung von Cookies einverstanden bist.

Schließen