Theming ownCloud

Themes can be used to customize the look and feel of ownCloud. Themes can relate to the following topics of owncloud:

  • Theming the web-frontend
  • Theming the owncloud Desktop client

This documentation contains only the Web-frontend adaptions so far.

Getting started

A good idea getting starting with a dynamically created website is to inspect it with webdeveloper tools, that are found in almost any browser. They show the generated HTML and the CSS Code, that the client/browser is recieving: With this facts you can easyly determine, where the following object-related attributes for the phenomenons are settled:

  • place
  • colour
  • links
  • graphics

In owncloud standard theme everything is held very simple. This allows you quick adpating. In an unchanged ownCloud version css files and the standard pictures reside in /owncloud/themes/default folder. The next thing you should do, before starting any changes is: Make a backup of your current theme(s) e.g.:

  • Goto …/owncloud/themes
  • cp -r default default.old

Creating and activating a new theme

There are two basic ways of creating new themings:

  • Doing all new from scratch
  • Starting from an existing theme and doing everything step by step and more experimentally

Depending on how you created your new theme it will be necessary to

  • put a new theme into the /themes -folder. The theme can be activated by putting “theme” => ‘themename’, into the config.php file.
  • make all changes in the /themes/default -file

Structure

The folder structure of a theme is exactly the same as the main ownCloud structure. You can override js files, images and templates with own versions. css files are loaded additionally to the default files so you can override css properties.

Testing the new theme out

There are different options for doing so:

  • If you’re using a tool like the Inspector tools inside Mozilla, you can test out the CSS-Styles immediately inside the css-attributes, while looking at them.
  • If you have a developing/testing server as desciribed in 1. you can test out the effects in a real environment permanently.

Notes for Updates

In case of theming it is recommended to the user, not to perform these adaptions inside the folder /themes/default.

Please perform the following steps, to avoid conflicts with other upcoming updates:

  • create a new folder inside /themes: for example: /themes/MyTheme
  • Copy the folders /themes/default/core and /themes/default/settings to /themes/MyTheme
  • edit the file /config/config.php
  • Insert: ‘theme’ => ‘MyTheme’, into this file

Within the folder /themes/MyTheme all files, which are needed for theming are save from coming updates. All company theming must be done exclusively here from now on.

In case, that one of the following files is affected due to an upgrade,

  • /themes/default/settings/templates/apps.php
  • /themes/default/defaults.php

the files listed below, have to be replaced by those listed above:

  • /themes/MyTheme/settings/templates/apps.php
  • /themes/MyTheme/defaults.php

But this is unlikely at least in the upcoming updates (5.0.x). ownCloud aims to give further information in this case.