Permalink
Browse files

Slightly modified theming doc

  • Loading branch information...
1 parent ce4b444 commit 4bbffd69d7e849001d4152ffb7f72a444df8b7e6 @huafi huafi committed Mar 5, 2012
Showing with 7 additions and 7 deletions.
  1. +7 −7 doc/mw/themes.rst
View
@@ -6,21 +6,21 @@ The Kurogo Framework supports both simple and deep visual customization to refle
Beyond straightforward visual branding, Kurogo theming can also extend deeper into application-level styling, templates, and images. Just about anything your users can see or interact with can be customized, depending on your institution's needs and your development team's technical abilities. This document covers the basics of visual theming; functional customization through module extensions and template overrides is covered in :doc:`moduleextend`.
-Visual theming requires a working understanding of CSS, and skill with an image editor such as Photoshop or GIMP.
+Visual theming requires a working knowledge of CSS, and skill with an image editor such as Photoshop or GIMP.
****************
Theming Overview
****************
-The Kurogo Framework has a theming layer which allows sites to make most stylistic changes to the web application without modifying the core libraries. The advantage of using the theming layer is that site changes are isolated from the framework sources and can be more easily moved to a new version of the framework.
+The Kurogo Framework has a theming layer which allows sites to make most stylistic changes to the web application without modifying the core libraries. The advantage of using the theming layer is that changes to your site's specific theme are isolated from the underlying framework and can be more easily moved to a new version of the framework.
-The core visual interface of Kurogo lives in *app/*. It is made up of HTML templates, CSS and Javascript files, and a core set of application images. All HTML, CSS and Javascript in the core interface can be overridden by a theme. While it's possible to directly edit the files in *app/*, doing so will increase the probability that future upgrades to Kurogo will break your site. As with everything else you build with Kurogo, it is highly recommended that you **not** directly edit any contents of this directory. If there are CSS rules or image files you wish to replace in your theme, it is recommended that you create new versions of those rules and images in your theme directory.
+The core visual interface of Kurogo lives in *app/*. It is made up of HTML templates, CSS and Javascript files, and a core set of application images. All HTML, CSS and Javascript in the core interface can be overridden by a theme. While it's possible to directly edit the files in *app/*, doing so will make it likely that future upgrades to Kurogo will break your site. As with everything else you build with Kurogo, it is highly recommended that you **not** directly edit any contents of this directory. If there are CSS rules or image files you wish to replace in your theme, it is recommended that you create new versions of those rules and images in your theme directory.
Each theme is contained within a directory inside the *SITE_DIR/themes* folder. By convention the default theme is named *default*. Each site can have multiple themes, but only one theme can be active at any time. You can easily switch between active themes from the *Site Configuration > Theme* screen in the Kurogo administration console.
-Themes have the same directory structure as the core visual interface directory (app/). This allows paths in the CSS and HTML to be the same for the core interface and the theme interface.
+Themes have the same directory structure as the core visual interface directory (*app/*). This allows paths in the CSS and HTML to be the same for the core interface and the theme interface.
@@ -100,8 +100,8 @@ Homepage
~~~~~~~~
You'll need to create a version of the logo to appear on the homepage: [#f1]_ [#f2]_
-* Basic and Touch device classes: *THEME_DIR/modules/home/images/logo-home.gif* must be a GIF image [#f3]_. This image will be centered horizontally within the screen. The default size is 208x35px, cropped tight to the actual artwork.
-* Compliant device class: *THEME_DIR/modules/home/images/logo-home.png* must be a PNG image [#f3]_. The default size is 280x60px, cropped tight the actual artwork. The Compliant home logo/banner image is one that benefits noticeably from :ref:`hdpi`.
+* Basic and Touch device classes: *THEME_DIR/modules/home/images/logo-home.gif* must be a GIF image [#f3]_. This image will be centered horizontally within the screen. The default size is 208x35px.
+* Compliant device class: *THEME_DIR/modules/home/images/logo-home.png* must be a PNG image [#f3]_. The default size is 280x60px. The Compliant home logo/banner image is one that benefits noticeably from :ref:`hdpi`.
Header logos
@@ -205,7 +205,7 @@ Optimizing for High-Density Displays
************************************
All modern smartphones have displays with a pixel density (number of pixels per physical inch) higher than a typical desktop or laptop computer. For example, the first three generations of iPhones and iPod Touches, and the first generation of Android and webOS devices, all had displays with 150-170 pixels per inch (ppi).
-A growing number of high-end devices have significantly higher-density displays, to further improve clarity and legibility. iOS devices with Retina Displays (iPhone 4, iPod Touch 4) have twice the pixel density of older iOS devices. Android devices with HDPI displays (e.g., with the common 480x800px or 480x854px screens), Windows Phone 7 devices, and some recent webOS devices have 1.5 times (or more) the pixel density of earlier/lower-end smartphones. Because these devices have more physical screen pixels in the same space, text and images can look sharper and more legible, especially for small text and detailed graphics.
+A growing number of high-end devices have significantly higher-density displays, to further improve clarity and legibility. iOS devices with Retina Displays (iPhone 4 and 4S, iPod Touch 4) have twice the pixel density of older iOS devices. Android devices with HDPI displays (e.g., with the common 480x800px or 480x854px screens) and XHDPI displays (e.g., the 720p displays on the latest flagship Android phones), Windows Phone 7 devices, and some recent webOS devices have 1.5 times (or more) the pixel density of earlier/lower-end smartphones. Because these devices have more physical screen pixels in the same space, text and images can look sharper and more legible, especially for small text and detailed graphics.
On such devices, web pages that provide a higher-resolution image while retaining the display size (through HTML attributes or CSS) can yield images that are visibly sharper and more legible on-screen. For instance, substituting a pixel-doubled homescreen logo (*THEME_DIR/modules/home/images/logo-home.png*) at 560x120px (twice the default 280x60px size) while retaining the *width=280, height=60* attributes in HTML will make that image have maximum possible visual quality on high-density displays. However, this comes at the cost of larger file size. You need to evaluate whether the increased visual quality and legibility are worth the tradeoff. In many cases, 1.5x assets (e.g., 420x90px version of *THEME_DIR/modules/home/images/logo-home.png*) will offer a good tradeoff between increased visual quality and file-size. You may want to experiment with different multipliers, viewing the results on different devices, to find the best tradeoff on an image-by-image basis.

0 comments on commit 4bbffd6

Please sign in to comment.