# Joomla-Template selbst erstellen: Schritt-für-Schritt-Anleitung

Um das **Aussehen Ihrer Website zu verändern**, bieten sich sogenannte Frontend-Templates an. Für das Maximum an Individualität lassen sich solche Joomla-Templates auch selbst erstellen.

## Joomla-Template erstellen: Voraussetzungen

Es ist nicht schwer, Ihrer Joomla-Website einen eigenen Look zu verpassen. Im Grunde benötigen Sie nämlich nur drei Dinge, um ein eigenes Template für Ihre Joomla-Website zu erstellen:

- **Joomla-Installation, Mindestversion 3.9:** Sie brauchen eine aktuelle Version des CMS. Alle Versionen ab der 2018er Joomla 3.9.x eignen sich für die Erstellung eigener Templates.
- **Grundlegende HTML- und PHP-Kenntnisse:** Um der Anleitung folgen zu können, benötigen Sie grundlegende Kenntnisse in HTML und PHP.
- **CSS-Kenntnisse:** Für das Design von Websites ist CSS erforderlich. Unser [CSS-Tutorial](https://www.ionos.at/digitalguide/websites/webdesign/css-lernen-leicht-gemacht/) gibt Ihnen einen guten Einstieg in die Cascading Style Sheets. Auch die wichtigsten [CSS-Befehle](https://www.ionos.at/digitalguide/websites/webdesign/css-befehle/) sollten Sie beherrschen, wenn Sie ein Joomla-Template erstellen möchten.

## Schritt für Schritt ein Joomla-Template selbst erstellen

Wenn Sie die obigen Voraussetzungen erfüllen, können Sie direkt mit der Erstellung eines eigenen Templates beginnen. Loggen Sie sich hierfür bei Ihrer Joomla-Website ein und folgen Sie dann unserer Schritt-für-Schritt-Anleitung.

### Schritt 1: Ordnerstruktur anlegen

In einem ersten Schritt müssen Sie die für Ihr Template **erforderliche Ordnerstruktur anlegen**. Das ist in nur wenigen Klicks erledigt. Navigieren Sie hierzu zunächst in den Ordner „templates“, den Sie in der Dateistruktur Ihrer Joomla-Installation finden. In diesem werden alle Ihre Templates aufgelistet. **Erstellen Sie einen neuen Ordner** und benennen Sie ihn. Wir erstellen einen Ordner mit dem Namen „test“, in dem das Template später Platz findet.

[![Bild: Joomla-Ordnerstruktur im IONOS Panel](https://www.ionos.at/digitalguide/fileadmin/_processed_/9/6/csm_joomla-ordnerstruktur-im-ionos-panel_369a72686f.webp "Joomla-Ordnerstruktur im IONOS Panel")](https://www.ionos.at/digitalguide/fileadmin/DigitalGuide/Screenshots_2023/joomla-ordnerstruktur-im-ionos-panel.png) Für Ihr Joomla-Template müssen Sie im Dateiverzeichnis einen neuen Ordner erstellen. Um die Ordnerstruktur zu vervollständigen, müssen alle für das Template erforderlichen Dateien angelegt werden. Der Code orientiert sich dabei an einem [Beispiel-Template](https://github.com/coolcat-creations/hello):

#### *templateDetails.xml*

Zunächst sollten Sie die Datei erstellen, die es Ihnen überhaupt ermöglicht, ein Template in Joomla zu installieren: Die **Manifestdatei *templateDetails.xml***. In dieser Datei werden alle grundlegenden Informationen zu Ihrem Template festgelegt. Hierunter fallen beispielsweise der Name oder der Autor bzw. die Autorin Ihres Templates.

Sie müssen kein Profi im Umgang mit der Extended Markup Language sein, um die Codezeilen der Datei nachvollziehen zu können. Die **wichtigsten Tags** der XML-Datei sind die folgenden:

- `<name>`: Name des Templates
- `<creationDate>`: Erstellungsdatum des Templates
- `<author>`: Autorin oder Autor des Templates, also Ihr Name
- `<authorEmail>`: E-Mail-Adresse der Autorin oder des Autors, also Ihre E-Mail-Adresse
- `<authorUrl>`: URL zu Ihrer Website
- `<copyright>`: Copyrightinhaber des Templates
- `<license>`: Informationen zur Lizenz
- `<version>`: Aktuelle Version des Templates
- `<description>`: Beschreibung des Templates
- `<files>`: Alle Dateien, die mit dem Template installiert werden sollen
- `<positions>`: Positionen der Module, die es im Template gibt

```xml
<?xml version="1.0" encoding="utf-8"?>

<extension version="3.1" type="template" client="site">
    <name>test</name>
    <version>1.0</version>
    <creationDate>19.10.2022</creationDate>
    <author>Musteruser</author>
    <description>IONOS Joomla Test Template</description>
    <files>
        <filename>index.php</filename>
        <filename>templateDetails.xml</filename>
        <filename>template\_preview.png</filename>
        <filename>template\_thumbnail.png</filename>
        <filename>favicon.ico</filename>
        <folder>css</folder>
    </files>
    <positions>
    <position>menu</position>
    <position>aside</position>
    <position>footer</position>
    </positions>
</extension>
```

#### *index.php*

Die *index.php*-Datei ist der Ort, an dem das **Hauptlayout Ihrer gesamten Website** festgelegt ist. Zunächst reicht es aus, ein **simples HTML-Grundgerüst** zu nutzen:

```html

<html lang="de" dir="ltr">
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <!—Headerangaben-->
    </head>
    <body>
        <div id="navbar">
            <nav>
                <ul>
                    <li><a href="#">Kategorie 1</a></li>
                    <li><a href="#">Kategorie 2</a></li>
                    <li><a href="#">Kategorie 3</a></li>
                    <li><a href="#">Kategorie 4</a></li>
                </ul>
            </nav>
        </div>
        <div id="content">
            <h1 id="heading">Test-Template</h1>
            <img class="image" src="https://picsum.photos/900/500" alt="Image"/>
            <p>Ein Joomla-Template können Sie in nur wenigen Schritten erstellen. Folgen Sie einfach der Schritt-für-Schritt-Anleitung von IONOS.</p>
        </div>
        <footer id="copyright">
            <div id="footercontent">
                <p>Copyright by IONOS</p>
            </div>
        </footer>
    <div class="hash d-none" hidden>hash_1f48c6d98cdde20cc9369564e0240191dc3102ac</div><script data-shy-copy-guard>(function(){var C=[0x00AD,0x200B,0x200C,0x200D,0x2060,0xFEFF];var s=function(t){for(var i=0;i<C.length;i++){t=t.split(String.fromCharCode(C[i])).join("");}return t;};document.addEventListener("copy",function(e){var sel=document.getSelection();if(!sel||sel.isCollapsed||!e.clipboardData){return;}e.clipboardData.setData("text/plain",s(sel.toString()));try{var d=document.createElement("div");d.appendChild(sel.getRangeAt(0).cloneContents());e.clipboardData.setData("text/html",s(d.innerHTML));}catch(x){}e.preventDefault();});})();</script></body>
</html>
```

#### *css-Ordner und template.css*

Legen Sie als nächstes einen Ordner namens „css“ an, der **alle Dateien beinhalten wird, die Einfluss auf das Design Ihres Templates nehmen**. In diesem Ordner erstellen Sie direkt die Datei *template.css*, in der Sie das von Ihnen gewünschte Layout per Code spezifizieren können.

```css
body {
    font-family: "Arial", serif;
    color: black;
    line-height: 150%;
}
#navbar ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #003399;
}
#navbar li {
    float: left;
}
#navbar li a {
    display: block;
    font-size: 26px;
    color: white;
    text-align: center;
    padding: 16px 18px;
    text-decoration: none;
}
#navbar li a:hover {
    background-color: white;
    color: #003399;
}
#heading {
    font-size: 48px;
    color:    #003399;
    text-shadow: 0 0 5px #000099;
}
#footercontent {
    float: right;
    padding-right: 10%;
}
```

[![Bild: Die für das Joomla-Template neu angelegte Ordnerstruktur](https://www.ionos.at/digitalguide/fileadmin/_processed_/2/f/csm_die-fuer-das-joomla-template-neu-angelegte-ordnerstruktur_b8f926a4ae.webp "Die für das Joomla-Template neu angelegte Ordnerstruktur")](https://www.ionos.at/digitalguide/fileadmin/DigitalGuide/Screenshots_2023/die-fuer-das-joomla-template-neu-angelegte-ordnerstruktur.png) In dem Ordner, den Sie für Ihr Template erstellt haben, können Sie nun verschiedene Konfigurationsdateien anlegen. ### Schritt 2: Template installieren

Im zweiten Schritt installieren Sie das soeben erstellte Template. Navigieren Sie hierzu im Joomla-Backend zu **„System“ &gt; „Installieren“ &gt; „Überprüfen“**. In der dortigen Übersicht sollten Sie Ihr Template nun unter dem von Ihnen gewählten Namen finden. Mit einem Klick auf das Kästchen links neben dem Namen Ihres Templates können Sie das [Joomla-Template installieren](https://www.ionos.at/digitalguide/hosting/cms/joomla-template-installieren/).

[![Bild: Ansicht des Joomla-Backends](https://www.ionos.at/digitalguide/fileadmin/_processed_/c/1/csm_ansicht-des-joomla-backends_40bd2d6301.webp "Ansicht des Joomla-Backends")](https://www.ionos.at/digitalguide/fileadmin/DigitalGuide/Screenshots_2023/ansicht-des-joomla-backends.png) Im Joomla-Backend können Sie Ihr erstelltes Template mit nur wenigen Klicks installieren. [![Bild: Menü „Erweiterungen“ &gt; „Überprüfen“ des Joomla-Backends](https://www.ionos.at/digitalguide/fileadmin/_processed_/b/0/csm_ansicht-des-menues-erweiterungen-ueberpruefen-im-joomla-backend_6f69a00e8a.webp "Menü „Erweiterungen“ &gt; „Überprüfen“ des Joomla-Backends") Durch Setzen des Hakens neben dem Namen Ihres Templates können Sie die Installation starten. ](https://www.ionos.at/digitalguide/fileadmin/DigitalGuide/Screenshots_2023/ansicht-des-menues-erweiterungen-ueberpruefen-im-joomla-backend.png)### Schritt 3: Template aktivieren

Nachdem die Installation Ihres Templates abgeschlossen ist, müssen Sie es nur noch **aktivieren**. Auch das ist mit nur wenigen Klicks im Joomla-Backend möglich. Navigieren Sie zu **„System“ &gt; „Templates“ &gt; „Site Template Stile“**. Durch einen Klick auf den Stern-Button rechts neben dem Namen Ihres Templates legen Sie es als Standard fest.

[![Bild: Menü „Templates“ &gt; „Site Template Stile“ des Joomla-Backends](https://www.ionos.at/digitalguide/fileadmin/_processed_/8/3/csm_menue-templates-site-template-stile-des-joomla-backends_bd1561e23f.webp "Menü „Templates“ &gt; „Site Template Stile“ des Joomla-Backends") Klicken Sie auf das Sternsymbol rechts neben Ihrem Template, um es als Standardtemplate für Ihre Joomla-Website einzurichten. ](https://www.ionos.at/digitalguide/fileadmin/DigitalGuide/Screenshots_2023/menue-templates-site-template-stile-des-joomla-backends.png)### Schritt 4: Template mit Joomla verbinden

Es ist wichtig, dass Sie Ihr Template mit Joomla verbinden, damit die Darstellung Ihrer Website im neuen Look einwandfrei funktioniert. Hierfür müssen Sie die ***index.php*-Datei bearbeiten**. Um Ihr **CSS-Stylesheet einzubinden**, nutzen Sie folgende Codezeile, die Sie ganz oben in Ihrer *index.php*-Datei einbinden:

```php
<?php defined('\_JEXEC') or die;
JHtml::\_('stylesheet', 'template.css', array('version' => 'auto', 'relative' => true));
?>
```

### Schritt 5: Headerangaben laden

Im nächsten Schritt müssen Sie die **Header-Angaben in Ihre *index.php*-Datei einbinden**. Auch hierfür können Sie sich PHP bedienen. Ersetzen Sie in der *index.php*-Datei einfach den Kommentar &lt;!—Headerangaben--&gt; in Ihrem Head mit folgender Codezeile:

```html
<jdoc:include type="head" />
```

Auf diese Weise fordern Sie das CMS dazu auf, die relevanten Headerinformationen in Ihre *index.php*-Datei zu laden.

Im Anschluss können Sie sich Ihr Template in der Vorschauversion Ihrer Joomla-Website anzeigen lassen:

[![Bild: Das fertige IONOS Joomla-Test-Template](https://www.ionos.at/digitalguide/fileadmin/_processed_/b/8/csm_das-fertige-ionos-joomla-test-template_67fdbfd22d.webp "Das fertige IONOS Joomla-Test-Template")](https://www.ionos.at/digitalguide/fileadmin/DigitalGuide/Screenshots_2023/das-fertige-ionos-joomla-test-template.png) Das fertige IONOS Joomla-Test-Template ### Schritt 6: Module verbinden

Der letzte Schritt befasst sich damit, Ihre **Joomla-Inhalte in Ihrem Template auszugeben**. Um sich dies in der Praxis einmal beispielhaft anzuschauen, können Sie im Backend Ihrer Website zunächst mehrere neue Menüpunkte mit einem Klick auf „Menü“ &gt; „Neu“ erstellen.

[![Bild: Ansicht der erstellten Menüpunkte](https://www.ionos.at/digitalguide/fileadmin/_processed_/b/7/csm_ansicht-der-erstellten-menuepunkte_db910f2db9.webp "Ansicht der erstellten Menüpunkte")](https://www.ionos.at/digitalguide/fileadmin/DigitalGuide/Screenshots_2023/ansicht-der-erstellten-menuepunkte.png) Im Joomla-Backend können Sie Menüpunkte einfach durch nur wenige Klicks erstellen. Navigieren Sie nun zu **„System“ &gt; „Erweiterungen“ &gt; „Side Modules“** und wählen Sie das eben erstellte Menü aus. In den erweiterten Einstellungen können Sie das Modul-Tag setzen. Wählen Sie die Option „nav“ aus.

[![Bild: Modul-Tag in den erweiterten Moduleinstellungen](https://www.ionos.at/digitalguide/fileadmin/_processed_/7/8/csm_modul-tag-in-den-erweiterten-moduleinstellungen_a477e0ec0e.webp "Modul-Tag in den erweiterten Moduleinstellungen")](https://www.ionos.at/digitalguide/fileadmin/DigitalGuide/Screenshots_2023/modul-tag-in-den-erweiterten-moduleinstellungen.png) Wählen Sie das „nav“-Tag aus, um Ihr Menü anzeigen zu lassen. Nun ersetzen Sie in Ihrer *index.php* das „nav“-Tag durch folgende Codezeile, um Ihr Template entsprechend anzupassen:

```html
<jdoc:include type="modules" name="menu" style="xhtml" />
```

Tipp Sie haben noch keine eigene Website? Mit dem IONOS [Joomla-Hosting](https://www.ionos.at/hosting/joomla-hosting) ist es einfach, eine eigene [Joomla-Website zu erstellen](https://www.ionos.at/digitalguide/websites/webseiten-erstellen/joomla-website-erstellen/). Außerdem können Sie bei IONOS preiswert Ihre gewünschte [Domain registrieren](https://www.ionos.at/domains/domain-registrieren).


This is a markdown version of: [https://www.ionos.at/digitalguide/hosting/cms/joomla-template-erstellen/](https://www.ionos.at/digitalguide/hosting/cms/joomla-template-erstellen/) for AI/LLM consumption.