From e5f1bdd81dee26d37376cffd7a255b1adaf997ab Mon Sep 17 00:00:00 2001 From: WireShout Date: Thu, 13 Dec 2012 15:10:35 -0500 Subject: [PATCH] Changing to code-block --- developer_manual/theming.rst | 31 +++++++++++++++++-------------- 1 file changed, 17 insertions(+), 14 deletions(-) diff --git a/developer_manual/theming.rst b/developer_manual/theming.rst index 8a37d4194..43184b31a 100644 --- a/developer_manual/theming.rst +++ b/developer_manual/theming.rst @@ -33,20 +33,23 @@ How to change colors Just put a new style.css into the core/css folder in your themes directory. Changing the header bar colours on the Login and Main Navigation screen: 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; } -#body-login #header { margin: -2em auto 0; text-align:center; height:10em; --moz-box-shadow:0 0 1em rgba(0, 0, 0, .5); -webkit-box-shadow:0 0 1em rgba(0, 0, 0, .5); box-shadow:0 0 1em rgba(0, 0, 0, .5); -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 */ -filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#33537a', endColorstr='#1d2d42',GradientType=0 ); /* IE6-9 */ } -#owncloud { float:left; }`` +.. code-block:: css + + /* 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; } + #body-login #header { margin: -2em auto 0; text-align:center; height:10em; + -moz-box-shadow:0 0 1em rgba(0, 0, 0, .5); -webkit-box-shadow:0 0 1em rgba(0, 0, 0, .5); box-shadow:0 0 1em rgba(0, 0, 0, .5); + 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 */ + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#33537a', endColorstr='#1d2d42',GradientType=0 ); /* IE6-9 */ } + + #owncloud { float:left; } This handles the headers for a lot of different browser types. What we 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 there are gradients.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 botton color of the gradient at the login screen.Simply change these colours to the hex color of your choice, save, and refresh to see the new login screen.The other major color scheme is the blue header bar on the main navigation page once you log in to ownCloud. This color we will change with the above as well.Save the file and refresh the browser for the changes to take affect. -.. _here: https://github.com/owncloud/themes/tree/master/example +.. _here: https://github.com/owncloud/themes/tree/master/example