Skip to content

Commit

Permalink
add example theme
Browse files Browse the repository at this point in the history
  • Loading branch information
jancborchardt committed May 22, 2015
1 parent 39d1e99 commit cd0fa06
Show file tree
Hide file tree
Showing 13 changed files with 207 additions and 7 deletions.
3 changes: 2 additions & 1 deletion .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
22 changes: 16 additions & 6 deletions themes/README
Original file line number Diff line number Diff line change
@@ -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.
86 changes: 86 additions & 0 deletions themes/example/core/css/styles.css
Original file line number Diff line number Diff line change
@@ -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;
}
Binary file added themes/example/core/img/favicon-touch.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 2 additions & 0 deletions themes/example/core/img/favicon-touch.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added themes/example/core/img/favicon.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 2 additions & 0 deletions themes/example/core/img/favicon.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added themes/example/core/img/logo-icon.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 2 additions & 0 deletions themes/example/core/img/logo-icon.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added themes/example/core/img/logo-mail.gif
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added themes/example/core/img/logo.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 2 additions & 0 deletions themes/example/core/img/logo.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
95 changes: 95 additions & 0 deletions themes/example/defaults.php
Original file line number Diff line number Diff line change
@@ -0,0 +1,95 @@
<?php
/**
* @author Björn Schießle <[email protected]>
* @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;
}

}

0 comments on commit cd0fa06

Please sign in to comment.