ownCloud mit eigenem Branding

Als Betreiber einer eigenen ownCloud-Instanz, kommt früher oder später der Wunsch auf, diese dem eigenen Design/Branding anzupassen.

Dies lässt sich mit ownCloud von Hause aus realisieren.

Im ownCloud-Verzeichnis gibt es einen Ordner themes. Dort werden Themes in Form von Unterordnern mit dem Theme-Namen erstellt.
Ein valides Theme besitzt die beiden Ordner core und settings, welche direkt aus der Standard-Installation zum Bau eines eigenen Themes verwendet werden können.

Das Theme aktivieren

Zur Aktivierung des neuen Themes muss in der Datei config/config.php eine Zeile in das vorhandene Array eingefügt werden:

'theme' => 'theme-folder-name',

Das Logo ändern

Die folgenden Bilder sind zu ersetzen oder als Vorlage zu verwenden (themes/mytheme/core/img):

• favicon.png (das 16×16 Favicon)
• favicon-touch.png (das 128×128 Favicon)
• logo.png / .svg (das Logo auf der Logon-Seite)
• logo-wide.png / .svg (das Logo im Banner des Portals)

Da primär die .SVG-Dateien verwendet werden, kann auch das Layout (unter themes/mytheme/core/templates) entsprechend angepasst werden, sodass die eigenenFavicon/Logo-Dateien verwendet werden.

layout.base.php

<link rel="shortcut icon" href="<?php print_unescaped(image_path('', 'favicon.png')); ?>" />
<link rel="apple-touch-icon-precomposed" href="<?php print_unescaped(image_path('', 'favicon-touch.png')); ?>" />

layout.guest.php

<link rel="shortcut icon" href="<?php print_unescaped(image_path('', 'favicon.png')); ?>" />
<link rel="apple-touch-icon-precomposed" href="<?php print_unescaped(image_path('', 'favicon-touch.png')); ?>" />
<img src="<?php print_unescaped(image_path('', 'logo.svg')); ?>" alt="ownCloud" />

layout.user.php

<link rel="shortcut icon" href="<?php print_unescaped(image_path('', 'favicon.png')); ?>" />
<link rel="apple-touch-icon-precomposed" href="<?php print_unescaped(image_path('', 'favicon-touch.png')); ?>" />
<a href="<?php print_unescaped(link_to('', 'index.php')); ?>" title="" id="owncloud"><img src="<?php print_unescaped(image_path('', 'logo-wide.png')); ?>" alt="ownCloud" /></a>

Die Farbe anpassen

Um das Farbschema zu ändern, muss unter themes/mytheme/core/css/styles.css nach dem folgenden Farbcodes gesucht und durch die eigenen Farbmuster ersetzt werden:

#35537a – #1d2d42 (das ist jeweils das obere und untere Ende des Farbverlaufs für das Farbmuster von ownCloud)

Sollte das Farbmuster einen ungünstigen Kontrast zur Schrift im Banner geben, kann in Zeile 306 im Bereich „USER MENU“, die Schriftfarbe angepasst werden:

#settings { float:right; margin-top:7px; color:#bbb; text-shadow:0 -1px 0 #000; }