Theming OwnCloud
The standard ownCloud theme is very attractive but changing it to fit your own organization's house style will make users, for example, customers, volunteers and donors feel more at home on your website. This can be achieved with a few simple tweaks to the color scheme and images. We call the changing of the look of websites 'theming'.
In the following guide we will change the splash screen image or logo, the logo in the top left hand corner when logged in, and the favicon. To change these you will need to be able to upload images to the ownCloud server, with FTP or SCP to the owncloud/core/img directory.
Changing the log in logo
The default ownCloud logo is the pile of circles looking like a cloud. We are going to replace this image with our own organization's logo.
First prepare a version of your own logo. It must be approximately 252x122 pixels (width x height). Use an image manipulation application like GIMP or Inkscape to make the image.
Save the file in the SVG (use Inkscape) format and call it logo.svg. This format is preferable to .jpg or .png because it is a vector file and does not degrade in quality. Scaling a vector image (as opposed to a bitmap image) preserves the shapes.
Backup the original ownCloud logo. Then replace the logo.svg file on the server with your own logo.svg file. The name of the file must be logo.svg.
The file path will look something like this:
yourowncloud.org/core/img/logo.svg
Once you have put your new logo on the server you will see the image change on the splash or log in screen.
Changing the logo seen when logged in
You can also change the logo that displays at the top of your ownCloud web interface using a similar method. This logo is much smaller – only 140w x 32h pixels.
The path to replace that is owncloud/core/img/logo-wide.svg.
Changing the favicon
Upload your own 32x32 pixel favicon.png file to owncloud/core/img/.
Using new themes
Above we have been editing images of the core website. This works just fine but ideally we should use the owncloud/themes directory to change the look and feel of an ownCloud. In this way one does not change the core code and makes migrating or updating ownCloud less prone to data loss.
Get an example theme online:
https://github.com/owncloud/themes/tree/master/responsive
Upload the files into owncloud/themes/responsive on your ownCloud server. Because ownCloud is written in PHP there are no HTML files so one needs to change the CSS files.
'theme' => 'responsive',
Changing ownCloud colors
We can change the color scheme of our ownCloud by either editing the core CSS file, or by making a new theme. As child themes prevent your changes from being lost when you update the server we will explain that process.
Copy the css file from /core/css/styles.css into our example theme directory /themes/example/core/css/styles.css.
In the style sheet, a bit further down, is a set that looks something like this:
/* HEADERS */
#body-user #header, #body-settings #header { position:fixed; top:0; z-index:100; width:100%; height:2.5em; padding:.5em; background:#1d2d42; -moz-box-shadow:0 0 10px rgba(0, 0, 0, .5), inset 0 -2px 10px #222; -webkit-box-shadow:0 0 10px rgba(0, 0, 0, .5), inset 0 -2px 10px #222; box-shadow:0 0 10px rgba(0, 0, 0, .5), inset 0 -2px 10px #222; }
background: -moz-linear-gradient(top, #33537a 0%, #1d2d42 100%); /* FF */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#F1B3A4), color-stop(100%,#1d2d42)); /* Chrome,Safari4+ */
This section deals with the headers for different browser types.
We can change the #35537a (lighter blue) and #ld2d42 (dark blue) color to the colors of our choice.
The log in page background has a horizontal gradient. The first hex number, #35537a, is the top color of the gradient at the log in screen. The second hex number, #ld2d42 is the bottom color of the gradient at the log in screen. You can change these colors to the hex color number of your choice, save the file and refresh the web page to see the new log in screen.
The other major color scheme is the blue header bar on the main navigation page under once you log in to ownCloud. This can be changed under #header in the code above change the value of:
background:#1d2d42
Save the file and refresh the browser for the changes to take affect.
A handy color picker
To find out the HTML color values for the colors on your website use a color picker or check what the values are in your website's source code. One useful tool is the Firebug plugin for Firefox, another, the little program Gpick.
More information about theming can be found at the developer manual:
http://doc.owncloud.org/server/5.0/developer_manual/core/theming.html