From 316df193d4c5afee3adedf11d4f40ab7fe8726c9 Mon Sep 17 00:00:00 2001 From: Morris Jobke Date: Thu, 10 Sep 2015 10:28:05 +0200 Subject: [PATCH] Merge the two different theming documentations * fixes #1060 --- admin_manual/operations/theming.rst | 327 +--------------------------- developer_manual/core/theming.rst | 23 +- 2 files changed, 16 insertions(+), 334 deletions(-) diff --git a/admin_manual/operations/theming.rst b/admin_manual/operations/theming.rst index 937cb2c45..c7957806c 100644 --- a/admin_manual/operations/theming.rst +++ b/admin_manual/operations/theming.rst @@ -6,329 +6,4 @@ Theming ownCloud :maxdepth: 2 :hidden: -ownCloud supports themes, so you can customize its look without editing source code. This -document covers the basic steps of theming, and then walks through a basic -theming example. - -Configuration -------------- - -The themes directory (usually ``owncloud/themes``) contains all theming -files. A default ownCloud installation comes with a helpful README in this directory. To -add a new theme, copy a directory containing your themes files in this directory. The -directory name is the theme name, and you configure ownCloud to use this theme by linking -it in ``config.php`` with the ``theme`` directive: - -.. code-block:: php - - 'theme' => 'themename', - -.. note:: When you upgrade ownCloud custom themes are disabled, as custom - themes can sometimes break the upgrade routine. You must re-enable your - custom theme after the upgrade is complete by re-entering your theme name in - config.php. - -This theme overrides any Javascript files, images, templates and CSS files in other -locations. Your directory structure should be the same as in ``owncloud/core/``:: - - themename/ - core/ - css - img - js - -Never edit the core template files-- always use ``owncloud/themes`` for customizations. -Errors in theme files can break ownCloud, so you can always revert to the default theme -while you fix your custom theme. - -It is possible for a theme to break between major ownCloud releases, as there may be -changes to the ownCloud file structure. This can easily be resolved by examining the path -to the file being replaced and mirror that path within the themes directory structure. - -Customize the logo ------------------- - -Customized logos must meet the following specifications, and they go in the -``themes/core/img`` directory. - -Logo.svg --------- - -This is the splash screen logo that appears above the ownCloud login page. The size of -this image is approximately 252x122 pixels. Any larger and the logo will not fit properly -on the page. - -Logo-wide.svg -------------- - -This is the little logo that appears in the top left of the ownCloud navigation frame. -The size of this image is 140x32 pixels. The width may be larger but the height is -fixed. - -Changing Colors ---------------- - -The color scheme is stored in the ``styles.css`` file within the -``owncloud/core/css`` folder. - -To change the color of the header bars, copy the ``core/css/styles.css`` -to ``themes//core/css/styles.css`` and edit. - -This example shows a section in ``styles.css`` that configures colors. There are several -locations within this file that assign colors to various page elements. - -.. code-block:: css - - #body-login { - text-align: center; - background: #1d2d44; /* Old browsers */ - background: url('../img/noise.png'), -moz-linear-gradient(top, #35537a 0%, #1d2d44 100%); /* FF3.6+ */ - background: url('../img/noise.png'), -webkit-gradient(linear, left top, left bottom, color-stop(0%,#35537a), color-stop(100%,#1d2d44)); /* Chrome,Safari4+ */ - background: url('../img/noise.png'), -webkit-linear-gradient(top, #35537a 0%,#1d2d44 100%); /* Chrome10+,Safari5.1+ */ - background: url('../img/noise.png'), -o-linear-gradient(top, #35537a 0%,#1d2d44 100%); /* Opera11.10+ */ - background: url('../img/noise.png'), -ms-linear-gradient(top, #35537a 0%,#1d2d44 100%); /* IE10+ */ - background: url('../img/noise.png'), linear-gradient(top, #35537a 0%,#1d2d44 100%); /* W3C */ - filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#35537a', endColorstr='#1d2d44',GradientType=0 ); /* IE6-9 */ - } - -Theming emails --------------- - -Your ownCloud server can send notification and password reset emails, like this -notification of a new file share: - -.. image:: ../images/theming-1.png - :width: 6.0201in - :height: 2.2654in - -Email templates are stored in ``owncloud/core/templates/`` -and may be modified by copying them to ``owncloud/themes/core/templates/mail.php``, and -then customizing the copies. You may also edit email templates in the graphical template -editor on your ownCloud Admin page. - -Theming Example ---------------- - -General Hospital wants their own custom ownCloud theme, with custom logos and colors. -Here is a step by step guide of how to build this theme. - -Establishing a Directory Structure ----------------------------------- - -Avoid spaces in your custom theme names:: - - themes/GeneralHospital - -Next, create the directories for images and style sheets:: - - themes/GeneralHospital/core/img - themes/GeneralHospital/core/css - -Configuration File ------------------- - -Next, add your new theme name to ``config.php``: - -.. code-block:: php - - ‘theme’ => ‘GeneralHospital’, - -Splash Screen Logo ------------------- - -This is the new logo for the login splash screen. It must be a 252x122 pixel SVG -file: - -.. image:: ../images/theming-2.png - -The file must be named logo.svg and placed in the image folder:: - - themes/GeneralHospital/core/img/logo.svg - -Top Left Logo -------------- - -This is the new custom logo for the top left of the ownCloud navigation frame: - -.. image:: ../images/theming-3.png - -It must be an SVG file at 142x32 pixels, named ``logo-wide.svg``. You can alter the -width, but the height is fixed. This file also goes in the -``themes/GeneralHospital/core/img/`` folder. - -Modifying Colors ----------------- - -The color definitions are stored in ``core/css/styles.css``. -The first step is to copy this file to ``themes/GeneralHospital/core/css/styles.css``. - -As stated in section Changing colors, edit the colors as desired in this section: - -.. code-block:: css - - #body-login { - text-align: center; - background: #1d2d44; /* Old browsers */ - background: url('../img/noise.png'), -moz-linear-gradient(top, #35537a 0%, #1d2d44 100%); /* FF3.6+ */ - background: url('../img/noise.png'), -webkit-gradient(linear, left top, left bottom, color-stop(0%,#35537a), color-stop(100%,#1d2d44)); /* Chrome,Safari4+ */ - background: url('../img/noise.png'), -webkit-linear-gradient(top, #35537a 0%,#1d2d44 100%); /* Chrome10+,Safari5.1+ */ - background: url('../img/noise.png'), -o-linear-gradient(top, #35537a 0%,#1d2d44 100%); /* Opera11.10+ */ - background: url('../img/noise.png'), -ms-linear-gradient(top, #35537a 0%,#1d2d44 100%); /* IE10+ */ - background: url('../img/noise.png'), linear-gradient(top, #35537a 0%,#1d2d44 100%); /* W3C */ - filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#35537a', endColorstr='#1d2d44',GradientType=0 ); /* IE6-9 */ - } - -This section of code handles the headers for many different browser types. -The default colors in the above example are ``#33537a`` (light blue) and -``#1d2d42`` (dark blue). Some older browsers have only one color, however, -most support gradients. - -The login page background is a horizontal gradient. The hex ``#33537a`` -is the top color of the gradient at the login screen. The ``#1d2d42`` -is the bottom color of the gradient at the login screen. - -To change the colors, modify these entries with the desired `hex color code`_. - -.. _`hex color code`: http://cloford.com/resources/colours/500col.htm - -Changing Application icons --------------------------- - -App icons can be modified as well. App icons are in the ``owncloud/apps//img`` -folder. Similarly, the modified icon should reside in the -``owncloud/themes//apps//img`` folder. - -General Hospital would like to modify the activity icon with the following image: - -.. image:: ../images/theming-4.jpg - -And the Documents icon with the following: - -.. image:: ../images/theming-5.png - -These must be converted to SVG format and placed in these locations:: - - owncloud/themes/GeneralHospital/apps/activity/img/activity.svg - owncloud/themes/GeneralHospital/apps/documents/img/documents.svg - -Results -------- - -After saving all files and refreshing the Web browser, you can see the new theme: - -.. image:: ../images/theming-6.png - :width: 6.5in - :height: 4.1681in - - -.. image:: ../images/theming-7.png - :width: 6.5in - :height: 2.1701in - -Theming the First Run Wizard -============================ - -The ownCloud First Run Wizard is a welcome screen which appears when a user -logs into your ownCloud server for the first time, and users can re-run anytime from -their Personal pages. -(See `:doc: ../installation/installation-wizard`) - -You may customize the welcome screen. This is the default: - -.. image:: ../images/theming-8.png - :width: 6.5in - :height: 3.5398in - -The base file containing the welcome window configuration is -``apps/firstwunwizard/templates/wizard.php``. Copy this file to your custom -themes directory. (Make sure the ``config.php`` file has been updated to -point to your themes directory.) - -The ``wizard.php`` file performs checks to verify whether the community or -enterprise edition of ownCloud is running. The welcome screen is slightly -different in the two instances. - -As an enterprise customer, all modifications to the ``wizard.php`` file should be in the -"Else" section of the following condition statements: - -.. code-block:: php - - - ... - - ... - - -General Hospital wants to modify the welcome window, so modify ``wizard.php`` to apply the appropriate customizations. In this example several instances of ``ownCloud`` are replaced with ``General Hospital``. - -.. code-block:: php - -
- - - - -

t('Welcome to the General Hospital Cloud', array($theme->getTitle()))); ?>

- -

t('Your personal web services. All your files, contacts, calendar and more, in one place.'));?>

- -

t('Enjoy your stay'));?>

- - - -

t('Get the apps to sync your files'));?>

- - - - - - - - - - - -

t('Connect your desktop apps to %s', array($theme->getName()))); ?>

- - t('Connect your Calendar'));?> - - - t('Connect your Contacts'));?> - - - t('Access files via WebDAV'));?> - - -


- - t('Documentation'));?> - - - t('Access files via WebDAV'));?> - - - -

- - t('There’s more information in the documentation and on our website.', array(link_to_docs('user_manual')))); ?>
- t('If you like ownCloud, - - recommend it to your friends - and spread the word!')); ?> - - © 2014 General Hospital. - -

- -
- - -The resulting welcome window looks like this: - -.. image:: ../images/theming-10.png - :width: 6.5in - :height: 3.8071in - +The theming is documented in the `developers documentation <../../developer_manual/core/theming.html>`_. diff --git a/developer_manual/core/theming.rst b/developer_manual/core/theming.rst index ec2215ea2..e3c89ff3d 100644 --- a/developer_manual/core/theming.rst +++ b/developer_manual/core/theming.rst @@ -26,6 +26,8 @@ Make a backup of your current theme(s) e.g.: * Goto …/owncloud/themes * cp -r default default.old +.. note:: In this example the theme name ``default`` is used because this is automatically loaded. This should be changed in the config file to avoid having this overwritten by the ownCloud package (see :ref:`notes-for-updates`). + Creating and activating a new theme =================================== @@ -78,6 +80,8 @@ Inserting a new logo into an existing theme is as simple as replacing the old lo You can use: scalable vector graphics (.svg) or common graphics formats for the internet such as portable network graphics (.png) or .jepg Just insert the new created picture by using the unchanged name of the old picture. +The app icons can also be overwritten in a theme. To change for example the app icon of the activity app you need to overwrite it by saving the new image to …/owncloud/themes/default/apps/activity/img/activity.svg + changing the default colours ---------------------------- @@ -88,14 +92,15 @@ On the top of the login page you can see a case- distinguished setting for diffe /* HEADERS */ ... - background: #1d2d42; /* Old browsers */ - background: -moz-linear-gradient(top, #33537a 0%, #1d2d42 100%); /* FF3.6+ */ - background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#F1B3A4), color-stop(100%,#1d2d42)); /* Chrome,Safari4+ */ - background: -webkit-linear-gradient(top, #33537a 0%,#1d2d42 100%); /* Chrome10+,Safari5.1+ */ - background: -o-linear-gradient(top, #33537a 0%,#1d2d42 100%); /* Opera11.10+ */ - background: -ms-linear-gradient(top, #33537a 0%,#1d2d42 100%); /* IE10+ */ - background: linear-gradient(top, #33537a 0%,#1d2d42 100%); /* W3C */ - + body-login { + background: #1d2d42; /* Old browsers */ + background: -moz-linear-gradient(top, #33537a 0%, #1d2d42 100%); /* FF3.6+ */ + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#F1B3A4), color-stop(100%,#1d2d42)); /* Chrome,Safari4+ */ + background: -webkit-linear-gradient(top, #33537a 0%,#1d2d42 100%); /* Chrome10+,Safari5.1+ */ + background: -o-linear-gradient(top, #33537a 0%,#1d2d42 100%); /* Opera11.10+ */ + background: -ms-linear-gradient(top, #33537a 0%,#1d2d42 100%); /* IE10+ */ + background: linear-gradient(top, #33537a 0%,#1d2d42 100%); /* W3C */ + } The different background-assignments indicate the headers for a lot of different browser types. What you most likely want to do is change the #35537a (lighter blue) and #ld2d42 (dark blue) color to the colours of our choice. In some older and other browsers, there is just one color, but in the rest showing gradients is possible. The login page background is a horizontal gradient. The first hex number, #35537a, is the top color of the gradient at the login screen. The second hex number, #ld2d42 is the bottom color of the gradient at the login screen. @@ -166,6 +171,8 @@ There are different options for doing so: .. _GitHub themes repository: https://github.com/owncloud/themes .. _here: https://github.com/owncloud/themes/tree/master/example +.. _notes-for-updates: + Notes for Updates =================