ownCloud: Eigene Templates erstellen

Wer ownCloud auf dem eigenen Server installiert hat, wird in den meisten Fällen zumindest das Aussehen des Web-Interface ein wenig anpassen wollen; auch wenn es nur um das Austauschen der Logos oder das Ändern von Farben geht. Das ist sehr einfach und komfortabel möglich. Die Dokumentation ist hier ein wenig verwirrend, weil sie noch nicht die Neuerungen der Version 7.x berücksichtigt.

Das default Template befindet sich bei der Version 7.x im Ordner /core/ – ein leerer Ordner /themes/ (mit einer readme-Datei darin) ist schon vorhanden. Zunächst erstellen Sie die Ordner /themes/mytheme/core/ wobei „mytheme“ ein beliebiger Name sein kann. Anschließend müssen Sie das neue Theme aktivieren. Editieren Sie die Datei /config/config.php – es muss eine Zeile zum $CONFIG Array hinzugefügt werden:

[...]
  'installed' => true,
  'forcessl' => true,
  'theme' => 'mytheme',
  'default_language' => 'de',
);

Das war es schon. Das neue Theme ist nun aktiv. Da es noch ohne Inhalt ist, wird sich zunächst auch nichts ändern. Alle genannten Ordner beziehen sich auf das Wurzelverzeichnis. Wenn Sie ownCloud in einem Unterverzeichnis installiert haben, gehen Sie bitte von diesem aus. Im Beispiel ist ownCloud direkt in der Webroot installiert.

Manche Anleitungen empfehlen, das komplette default Theme zu kopieren. Das geht zwar, aber es wäre Unsinn. Kopieren Sie nur das, was Sie wirklich ändern wollen in Ihr theme-Verzeichnis und zwar jeweils unter Bei­be­hal­tung der ursprünglichen Ordner-Struktur.

CSS Code anpassen

Im Ordner /core/css/ sind etliche CSS-Dateien enthalten. Im Beispiel wollen wir das Logo und die Farben beim Anmelde-Bildschirm sowie die Kopfzeile für angemeldete Benutzer ändern. Erstellen Sie hierzu eine leere Datei /themes/mytheme/core/css/styles.css und ein leeres Verzeichnis /themes/mytheme/core/img/ in dieses Verzeichnis laden Sie ihre Logos hoch. Kopieren Sie nicht die gesamte Original-Datei styles.css sondern speichern Sie lediglich die gewünschten Änderungen in Ihrem neuen Theme.

#body-login {
    background: #333; /* Old browsers */
}
/* Primary action button, use sparingly */
.primary, input[type="submit"].primary, input[type="button"].primary, button.primary, .button.primary {
    border: 1px solid #fff;
    background-color: #000;
    color: #ddd;
}
.primary:hover, input[type="submit"].primary:hover, input[type="button"].primary:hover, button.primary:hover, .button.primary:hover,
.primary:focus, input[type="submit"].primary:focus, input[type="button"].primary:focus, button.primary:focus, .button.primary:focus {
    border: 1px solid #000;
    background-color: #fff;
    color: #333;
}
.primary:active, input[type="submit"].primary:active, input[type="button"].primary:active, button.primary:active, .button.primary:active {
    border: 1px solid #1d2d44;
    background-color: #1d2d44;
    color: #bbb;
}

Dadurch wird der Hintergrund zu einem neutralen Grau und der Login-Button erhält eine andere Farbe.

#header .logo {
    background-image: url(../img/emblem.png);
    background-repeat: no-repeat;
    width: 80px;
    height: 94px;
    margin: 0 auto;
}
#header .logo-icon {
    /* display logo so appname can be shown next to it */
    display: inline-block;
    background-image: url(../img/emblem-29.png);
    background-repeat: no-repeat;
    width: 29px;
    height: 34px;
}
#owncloud {
    padding: 5px 5px 0 25px;
}
#body-user #header, #body-settings #header, #body-public #header {
    background-color: #222;
}

Dieser Code ändert die beiden Logos, die natürlich unter diesem Namen im richtigen Verzeichnis vorhanden sein müssen. Außerdem müssen Sie width und height jeweils so anpassen, dass die Abmessungen mit Ihrem Logo übereinstimmen.

Der CSS-Code Ihres Themes wird zusätzlich zu dem des default Themes geladen. Deshalb also immer nur die Fragmente aus der Orginal-Datei entnehmen, die wirklich geändert werden sollen. Um die richtigen Zeilen zu finden, sollten Sie ein Entwicklerwerkzeug verwenden. Firebug für Firefox leistet hier hervorragende Dienste.

Somit kann jeder einzelne Aspekt des Erscheinungsbildes an Ihre Wünsche angepasst werden. Sie müssen nur die richtige Datei finden und einzelne CSS-Fragmente daraus unter Beibehaltung des ursprünglichen Dateinamens in Ihr Theme kopieren.

PHP Code ändern

Auch die Funktionen des ownCloud Web-Interface können angepasst werden. Hier gilt das gleiche, wie oben erwähnt. Im Beispiel ändern wir den Link im Fuss des Anmeldebildschirms. Kopieren Sie hierzu die Dateien layout.base.php, layout.guest.php und layout.user.php nach /themes/mythemes/core/templates/ und editieren Sie, wie gewünscht. Es sollte selbsterklärend sein, wofür diese jeweils zuständig sind.

[...]
        <footer>
            <p class="info">Ein Service meiner <a href="http://meine.domain.com/" target="_blank">Firma></a></p>
        </footer>
    </body>
</html>

Lesen Sie die Entwickler-Dokumentation für weiterführende Information. Durch das System des Überschreibens des default Templates kann nichts kaputt gehen. Wenn Sie einen Fehler machen, können Sie jederzeit Ihre Kopie löschen oder umbenennen, dann wird wieder die Original-Datei verwendet. Editieren Sie aber nie die Orginal-Dateien. Erstellen Sie immer ein eigenes Theme. So bleiben Ihre Änderungen auch nach einem Update erhalten.