Update theming.rst

developer_manual/core/theming.rst

@@ -20,9 +20,9 @@ Basically its a good idea to have a developement/test server (e.g. a virualized)
 -----------------
 For successfull theming a webapplication such as ownCloud, one needs to have basic knowledge in the following topics:
 
-* Website Structure with HTML: --> Links: selfhtml, w3schools, achims links
-* Programming Dynamic Websites (HTML) with PHP, php.net
-* Desinging your webside with CSS: see HTML
+* Website Structure with HTML: -
+* Programming Dynamic Websites
+* Desinging your webside with CSS
 * Creating or adapting simple graphics or photos
 Because ownCloud is written in PHP there are no static HTML-files found but only CSS files that match the HTML output that comes from PHP.
 
@@ -56,8 +56,8 @@ Depending on how you created your new theme it will be necessary to
 * put a new theme into the /themes -folder. The theme can be activated by putting "theme" => ‘themename’, into the config.php file.
 * make all changes in the /themes/default -file
 
-Structure
-=========
+3 Structure
+===========
 
 The folder structure of a theme is exactly the same as the main ownCloud
 structure. You can override js files, images and templates with own versions.
@@ -66,44 +66,48 @@ properties.
 
 
 
-How to change images and the logo
-=================================
+4 How to change images and the logo
+===================================
+A new logo which you may want to insert can be added as follows:
 
-The easiest picture to change in ownCloud is the logo. When you open your
-browser and point to ownCloud, you will see an ownCloud logo by default. That
-image can be replaced. We will show you how to do so in this section. There are
-two pictures to think about:
+4.1 Figure out the path of the old logo
+---------------------------------------
+Replace the old pictue, which postition you found out as described under 1.3. by adding an extension in case you want to re-use it later.
 
-owncloud-logo-medium-white.png
-  This is the splash screen logo, appearing
-  above the login page of your ownCloud instance. size: 252x122 (w x h) pixels,
-  approximately, works well. Too much bigger and the logo doesn’t fit in the
-  spot on the page
+4.2 Creating an own logo
+------------------------
 
-logo-wide.svg
-  This is the little logo that appears in the top left of the ownCloud navigate
-  frame (SVGs can be created with adobe illustrator or open source inkscape)
-  140x32 pixels. works well. Too much higher and the logo overflows into the
-  navigation pane and looks terrible.  The width, however, can be bigger or
-  smaller to meet your needs, whatever works for your logo.
+If you want to do a quick exchange like (1) it's important to know the size of the picture before you start creating an own logo:
 
-To change either of these logos, simply create your own logo file with these
-characteristics, and put it in you themes folder in ``core/img/``.
+* Go to the place in the filesystem, that has been shown by the webdeveloper tool/s
+* You can look up sizing in most cases via the file properties inside your file-manager
+* Create an own picture/logo with the same size then
 
-How to change colors
-====================
+The (main) pictures, that can be found inside ownCloud standard theming are the following:
 
-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:
+* The logo at the login-page above the credentials-box: 	        …/owncloud/themes/default/core/img/logo.svg
+* The logo, that's always in the left upper corner after login:   …/owncloud/themes/default/core/img/logo-wide.svg
 
-.. code-block:: css
+
+
+4.3 Inserting your new logo
+---------------------------
+Inserting a new logo into an existing theme is as simple as replacing the old logo with the new (genreated) one.
+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.
+
+
+
+4.4 changing the default colours
+--------------------------------
+
+With a web-developer tool like Mozilla-Inspector, you also get easyly displayed the color of the background you klicked on.
+On the top of the login page you can see a case- destinguished setting for different browsers:
 
   /* 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+ */
@@ -111,9 +115,7 @@ like this:
   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