Difference between revisions of "Creating a theme"

Revision as of 14:59, 29 September 2008

It is possible to adjust the look and feel of Group-Office. You should leave the About dialog intact so it displays the copyright information.

Start with copying themes/ExtJS to themes/MyTheme. It's better to copy ExtJS then Default becuse ExtJS is a theme that overrides the Default theme. You should do that too so adjustments to the Default theme will be picked up by your theme in the future too.

Now you want to edit style.css and the images in the images folder.

You probably want to modify the ExtJS theme too. It's best to create a new stylesheet called xtheme-mytheme.css and add this stylesheet to default_head.inc.php. In this stylesheet you can override styles defined in ext/resources/ext-all.css or see the smaller stylesheet for specific parts. You can see an example in themes/Default/xtheme-groupoffice.css.

Module styles

After you did this you will notice the buttons in the modules are not modified. This is because the modules have their own stylesheets too. If modules/<module_id>/themes/MyTheme/style.css is not found it will include modules/<module_id>/themes/Default/style.css. This will probably look ugly so you will have to create stylesheets for each module too.

Advanced: control the ExtJS layout structure

This is for advanced ExtJS programmers only. You can override GO.MainLayout (javascript/MainLayout.js) by putting a MainLayout.js in the themes/MyTheme directory. A very simple example is located in themes/Default/MainLayout.js. This file changes the baseCls property for the tabPanel with the modules in it so that the styles can be different from the other tabpanels.

You probably want to copy the contents of themes/default/layout.inc.php to themes/MyTheme/layout.inc.php and adjust that too.