OGCE Gadget Container Theme Customization

From Ogce

Contents 1 Overview 2 Logo replacement 3 Image batch processing 3.1 Tool download 3.2 Prerequisites 3.3 Usage 4 Batch color and image url adjustment for CSS 4.1 Tool Download 4.2 Prerequisites 4.3 Usage 5 Put them together

Overview

This article tells users how to customize theme of OGCE gadget container.

In all of following instructions, <gadget_container_root> represents root directory of decompressed/checked-out ogce gadget container code.

Logo replacement

Copy your logo image to directory

   <gadget_container_root>/ishindig-webapp/src/main/webapp/www/images/

Edit configuration file:

   <gadget_container_root>/config/ishindig.properties

Change following two options:

   site.banner.url             # specify where the logo is saved. E.g.  images/logo.png
   site.banner.backgroundcolor # background color of the banner

Image batch processing

Many images are used by CSS stylesheets in OGCE gadget container. It is not practical to change them one by one manually in short time. So a simple python script script (imageprocess.py) has been written to batch process images.

The idea is to modify all pixels in the image. Given a color change (deltaR, deltaG, deltaB) in RGB color space, for each pixel (r, g, b) in an image, the new color will be (r+deltaR, g+deltaG, b+deltaB). If any of the result channels has a value smaller than 0, it is adjusted to 0. If any of the result channels has a value greater than 255, it is adjusted to 255.

Tool download

For code revisions newer than r3864, this script is included in directory tools.
For users who use old version, get the tool from https://ogce.svn.sourceforge.net/svnroot/ogce/ShindigOGCE/ishindig-trunk/tools/imageprocess.py

Prerequisites

   python
   ImageMagick

The tool has been tested against following versions:

   python 2.6.4
   ImageMagick 6.5.9-0

It may also work with old versions of python and ImageMagick. But it has not been tested and is not gauranteed.

Usage

   python imageprocess.py -r deltaR -g deltaG -b deltaB srcimagedir dstimagedir

Detailed usage doc is included in comment of the source file.

Batch color and image url adjustment for CSS

Many css rules in OGCE gadget container includes specifications like this

   background-image: url("images/default/blahblah");
   background-color: #abcdef

Considering number of rules specified in the css file, it takes long time to update all of those pieces manually one by one. So another python script (cssprocess.py) has been written to automate it.

Tool Download

For code revisions newer than r3864, this script is included in directory tools.
For users who use old version, get the tool from https://ogce.svn.sourceforge.net/svnroot/ogce/ShindigOGCE/ishindig-trunk/tools/cssprocess.py

Prerequisites

Following python packages are needed:

   cssutils

Usage

   python cssprocess.py -r deltaR -g deltaG -b deltaB -t newthemename cssFileName

Detailed usage doc is included in comment of the source file.

Put them together

Now it is time to put these pieces together and make them work with OGCE gadget container.

If name of your new theme is fancy_theme, follow following instructions to customize OGCE gadget container

1. Replace your logo according to section Logo replacement
2. mkdir -p <gadget_container_root>/ishindig-webapp/src/main/webapp/www/extjs/fancy_theme/images
3. mkdir -p <gadget_container_root>/ishindig-webapp/src/main/webapp/www/extjs/fancy_theme/css
4. Create new images according to instructions give in image batch processing. The argument srcimagedir should be <gadget_container_root>/ishindig-webapp/src/main/webapp/www/extjs/resources/images/default. Those are the images used by default theme. Your image customization should be based on those images.
   The batch image processing command should look like
   python imageprocess.py -r deltaR -g deltaG -b deltaB \
<gadget_container_root>/ishindig-webapp/src/main/webapp/www/extjs/resources/images/default \
<gadget_container_root>/ishindig-webapp/src/main/webapp/www/extjs/fancy_theme/images
5. Create new css file according to instructions give in Batch color and image url adjustment for CSS. After running cssprocess.py (described above), you should get a new css file fancy_theme.css. The command you use to process original css file should look like:
   python cssprocess.py -t fancy_theme -r deltaR -g deltaG -b deltaB \
    <gadget_container_root>/ishindig-webapp/src/main/webapp/www/extjs/resources/ext-all.css
6. Copy generated fancy_theme.css to <gadget_container_root>/ishindig-webapp/src/main/webapp/www/extjs/fancy_theme/css
7. Edit file <gadget_container_root>/ishindig-webapp/src/main/webapp/www/js/theme.js.

   Add a new property to cgl.shindig.ui.layout.theme.repository. The new property should look like:
   fancy_theme: {
       href: 'extjs/fancy_theme/css/fancy_theme.css'
   }

8. Following instructions on this page to rebuild the gadget container.
9. You are done! Enjoy it.