Merge pull request #16519 from owncloud/example-theme

add example theme

.gitignore

@@ -29,8 +29,9 @@
 
 
 
-# ignore themes except the README
+# ignore themes except the example and the README
 /themes/*
+!/themes/example
 !/themes/README
 
 # just sane ignores

themes/README

@@ -1,7 +1,17 @@
-This is the themes folder. Themes can be used to customize the look and feel of ownCloud without the need to patch the source code.
-Themes can be placed in this folder with the name of the theme as foldername. The theme can be activated by putting 
-"theme" => 'themename', into the config.php file.
-The folder structure of a theme is exactly the same as the main ownCloud structure. You can override js files and templates with own versions. css files are loaded additionaly to the default files so you can override css properties.
-Themes should be developed here: https://github.com/owncloud/themes
-You can also find a super simple example there
+Themes can be used to customize the look and feel of ownCloud without the need to patch the source code. This makes it very easy to:
 
+* Use your own logo (in the top left, in log in and in emails)
+* Customize the text strings to replace »ownCloud« etc. with your name of choice
+* Change the main color (used in header and as log in background)
+* And more …
+
+
+The process is simple:
+
+1. Put a folder here with the name of the theme as foldername
+2. Activate it by putting 'theme' => 'themename', into the config.php file
+
+
+The folder structure of a theme is exactly the same as the main ownCloud structure. CSS files are loaded additionally to the default files so you can override properties. Images are replaced. You can also override JS files and PHP templates but we do not recommend that because you will need to adjust them after every update.
+
+You can also find a basic example here which you can build upon.

themes/example/core/css/styles.css

@@ -0,0 +1,86 @@
+/**
+ * @author Jan-Christoph Borchardt, http://jancborchardt.net
+ * @copyright Copyright (c) 2015, ownCloud, Inc.
+ * @license AGPL-3.0
+ *
+ * This code is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License, version 3,
+ * as published by the Free Software Foundation.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License, version 3,
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+
+/* header color */
+/* this is the main brand color */
+#body-user #header,
+#body-settings #header,
+#body-public #header {
+	background-color: #745bca;
+}
+
+/* log in screen background color */
+/* gradient of the header color and a brighter shade */
+/* can also be a flat color or an image */
+#body-login {
+	background: #745bca; /* Old browsers */
+	background: -moz-linear-gradient(top, #947bea 0%, #745bca 100%); /* FF3.6+ */
+	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#947bea), color-stop(100%,#745bca)); /* Chrome,Safari4+ */
+	background: -webkit-linear-gradient(top, #947bea 0%,#745bca 100%); /* Chrome10+,Safari5.1+ */
+	background: -o-linear-gradient(top, #947bea 0%,#745bca 100%); /* Opera11.10+ */
+	background: -ms-linear-gradient(top, #947bea 0%,#745bca 100%); /* IE10+ */
+	background: linear-gradient(top, #947bea 0%,#745bca 100%); /* W3C */
+	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#947bea', endColorstr='#745bca',GradientType=0 ); /* IE6-9 */
+}
+
+/* primary action button, use sparingly */
+/* header color as border, brighter shade again, here as background */
+.primary,
+input[type="submit"].primary,
+input[type="button"].primary,
+button.primary,
+.button.primary,
+.primary:active,
+input[type="submit"].primary:active,
+input[type="button"].primary:active,
+button.primary:active,
+.button.primary:active {
+	border-color: #745bca;
+	background-color: #947bea;
+}
+.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 {
+	background-color: #8b75e4;
+}
+.primary:active, input[type="submit"].primary:active, input[type="button"].primary:active, button.primary:active, .button.primary:active,
+.primary:disabled, input[type="submit"].primary:disabled, input[type="button"].primary:disabled, button.primary:disabled, .button.primary:disabled,
+.primary:disabled:hover, input[type="submit"].primary:disabled:hover, input[type="button"].primary:disabled:hover, button.primary:disabled:hover, .button.primary:disabled:hover,
+.primary:disabled:focus, input[type="submit"].primary:disabled:focus, input[type="button"].primary:disabled:focus, button.primary:disabled:focus, .button.primary:disabled:focus {
+	background-color: #745bca;
+}
+
+/* use logos from theme */
+#header .logo {
+	background-image: url('../img/logo.svg');
+	width: 250px;
+	height: 121px;
+}
+#header .logo-icon {
+	background-image: url('../img/logo-icon.svg');
+	width: 62px;
+	height: 34px;
+}

themes/example/core/img/favicon-touch.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" version="1.1" xml:space="preserve" height="128" width="128" enable-background="new 0 0 595.275 311.111" y="0px" x="0px" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" viewBox="0 0 128 127.99999"><rect rx="20" ry="20" height="128" width="128" y="-.0000015" x="0" fill="#745bca"/><path d="m64 24a36 36 0 0 0 -35.758 32.016 20 20 0 0 0 -0.2422 -0.0156 20 20 0 0 0 -20 20 20 20 0 0 0 20 20h36 32a24 24 0 0 0 24 -24 24 24 0 0 0 -22.07 -23.906 36 36 0 0 0 -33.93 -24.094zm0 12a24 24 0 0 1 24 24 24 24 0 0 1 -24 24 24 24 0 0 1 -24 -24 24 24 0 0 1 24 -24z" fill="#fff"/></svg>

themes/example/core/img/favicon.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" version="1.1" xml:space="preserve" height="32" width="32" enable-background="new 0 0 595.275 311.111" y="0px" x="0px" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" viewBox="0 0 32 31.999997"><rect rx="5" ry="5" height="32" width="32" y="-.0000052588" x="0" fill="#745bca"/><path d="m16 6a9 9 0 0 0 -8.9395 8.004 5 5 0 0 0 -0.0605 -0.004 5 5 0 0 0 -5 5 5 5 0 0 0 5 5h9 8a6 6 0 0 0 6 -6 6 6 0 0 0 -5.518 -5.977 9 9 0 0 0 -8.482 -6.023zm0 3a6 6 0 0 1 6 6 6 6 0 0 1 -6 6 6 6 0 0 1 -6 -6 6 6 0 0 1 6 -6z" transform="translate(0 -.0000019073)" fill="#fff"/></svg>

themes/example/core/img/logo-icon.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 595.275 311.111" xml:space="preserve" height="34" width="62" version="1.1" y="0px" x="0px" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" viewBox="0 0 62.001102 34"><path d="m31.001 2.9997a13.5 13.5 0 0 0 -13.409 12.006 7.5001 7.5001 0 0 0 -0.09082 -0.0058 7.5001 7.5001 0 0 0 -7.5001 7.5001 7.5001 7.5001 0 0 0 7.5001 7.5001h13.5 12a9.0002 9.0002 0 0 0 9 -9 9.0002 9.0002 0 0 0 -8.277 -8.965 13.5 13.5 0 0 0 -12.723 -9.0353zm0 4.5001a9.0002 9.0002 0 0 1 9.0002 9.0002 9.0002 9.0002 0 0 1 -9.0002 9.0002 9.0002 9.0002 0 0 1 -9.0002 -9.0002 9.0002 9.0002 0 0 1 9.0002 -9.0002z" fill="#fff"/></svg>

themes/example/defaults.php

@@ -0,0 +1,95 @@
+<?php
+/**
+ * @author Björn Schießle <schiessle@owncloud.com>
+ * @author Jan-Christoph Borchardt, http://jancborchardt.net
+ * @copyright Copyright (c) 2015, ownCloud, Inc.
+ * @license AGPL-3.0
+ *
+ * This code is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License, version 3,
+ * as published by the Free Software Foundation.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License, version 3,
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+class OC_Theme {
+
+	private $themeEntity;
+	private $themeName;
+	private $themeTitle;
+	private $themeBaseUrl;
+	private $themeDocBaseUrl;
+	private $themeSyncClientUrl;
+	private $themeSlogan;
+	private $themeMailHeaderColor;
+
+	/* put your custom text in these variables */
+	function __construct() {
+		$this->themeEntity = 'Custom Cloud Co.';
+		$this->themeName = 'Custom Cloud';
+		$this->themeTitle = 'Custom Cloud';
+		$this->themeBaseUrl = 'https://owncloud.org';
+		$this->themeDocBaseUrl = 'https://doc.owncloud.org';
+		$this->themeSyncClientUrl = 'https://owncloud.org/install';
+		$this->themeSlogan = 'Your custom cloud, personalized for you!';
+		$this->themeMailHeaderColor = '#745bca';
+	}
+	/* nothing after this needs to be adjusted */
+
+	public function getBaseUrl() {
+		return $this->themeBaseUrl;
+	}
+
+	public function getSyncClientUrl() {
+		return $this->themeSyncClientUrl;
+	}
+
+	public function getDocBaseUrl() {
+		return $this->themeDocBaseUrl;
+	}
+
+	public function getTitle() {
+		return $this->themeTitle;
+	}
+
+	public function getName() {
+		return $this->themeName;
+	}
+
+	public function getEntity() {
+		return $this->themeEntity;
+	}
+
+	public function getSlogan() {
+		return $this->themeSlogan;
+	}
+
+	public function getShortFooter() {
+		$footer = '© 2015 <a href="'.$this->getBaseUrl().'" target="_blank\">'.$this->getEntity().'</a>'.
+			'<br/>' . $this->getSlogan();
+
+		return $footer;
+	}
+
+	public function getLongFooter() {
+		$footer = '© 2015 <a href="'.$this->getBaseUrl().'" target="_blank\">'.$this->getEntity().'</a>'.
+			'<br/>' . $this->getSlogan();
+
+		return $footer;
+	}
+
+	public function buildDocLinkToKey($key) {
+		return $this->getDocBaseUrl() . '/server/8.0/go.php?to=' . $key;
+	}
+
+	public function getMailHeaderColor() {
+		return $this->themeMailHeaderColor;
+	}
+
+}