OX6:Gui Theming Description: Difference between revisions

From Open-Xchange
(New page: = Introduction = Open-Xchange SP4 will support theming functionality, so that you will be able to create own themes and make them available in the configuration frontend of the Open-Xchan...)
 
No edit summary
Line 1: Line 1:
= Introduction =
== Introduction ==


Open-Xchange SP4 will support theming functionality, so that you will be able to create own themes and make them available in the configuration frontend of the Open-Xchange Webinterface. The stylesheet files have been modified with SP4, so that everything that should affect the theming functionality can now be configured within an own theme. Besides also the images can be replaced per theme.
Open-Xchange SP4 will support theming functionality, so that you will be able to create own themes and make them available in the configuration frontend of the Open-Xchange Webinterface. The stylesheet files have been modified with SP4, so that everything that should affect the theming functionality can now be configured within an own theme. Besides also the images can be replaced per theme.


= Creating an Open-Xchange Theme =
== Creating an Open-Xchange Theme ==


All themes will be stored in the following directory of the Open-Xchange Server:
All themes will be stored in the following directory of the Open-Xchange Server:
Line 15: Line 15:
Now, you should start modifying your theme, by editing the stylesheet files in /var/www/ox6/themes/[YOUR_THEME_NAME]/css, and exchanging the images from /var/www/ox6/themes/[YOUR_THEME_NAME]/images. The following screenshots will give you an overview of the stylesheet structure, and which tags have to be modified in order to get your theme customized:
Now, you should start modifying your theme, by editing the stylesheet files in /var/www/ox6/themes/[YOUR_THEME_NAME]/css, and exchanging the images from /var/www/ox6/themes/[YOUR_THEME_NAME]/images. The following screenshots will give you an overview of the stylesheet structure, and which tags have to be modified in order to get your theme customized:


[[Image:Ui_theming_description_1.png]]
== Style ==


[[Image:Ui_theming_description_2.png]]
=== The Portal Page ===


[[Image:Ui_theming_description_3.png]]
[[Image:Cut portal.jpg|thumb|150px|none|The Portal Page]]


[[Image:Ui_theming_description_4.png]]
#a
#a
#a


[[Image:Ui_theming_description_5.png]]


= Setup description =
=== The Calendar Page ===
 
[[Image:Cut calendar.jpg|thumb|150px|none|The Calendar Page]]
 
#a
#a
#a
 
=== Calendar Month View ===
 
[[Image:Cut calendar month.jpg|thumb|150px|none|Calendar Month View]]
 
#a
#a
#a
 
=== New Appointment ===
 
[[Image:Cut calendar new.jpg|thumb|150px|none|New Appointment]]
 
#a
#a
#a
 
=== New Appointment Series ===
 
[[Image:Cut calendar new serie.jpg|thumb|150px|none|New Appointment Series]]
 
#a
#a
#a
 
=== Calendar Week View ===
 
[[Image:Cut calendar week.jpg|thumb|150px|none|Calendar Week View]]
 
#a
#a
#a
 
=== Mail View ===
 
[[Image:Cut mail.jpg|thumb|150px|none|Mail View]]
 
#a
#a
#a
 
== Setup description ==


After you have created and modified your theme, you should make those theme available in the configuration interface for users of the Open-Xchange Server. To do that, you only have to manifest your theme in the following server configuration file, afterwards your users can select your theme:
After you have created and modified your theme, you should make those theme available in the configuration interface for users of the Open-Xchange Server. To do that, you only have to manifest your theme in the following server configuration file, afterwards your users can select your theme:
Line 37: Line 86:
Afterwards, restart the Open-Xchange service groupware. Your users can now select your theme.
Afterwards, restart the Open-Xchange service groupware. Your users can now select your theme.


= End user view =
== End user view ==


After you have created and configured your theme, your users will be able to select it in the configuration frontend:
After you have created and configured your theme, your users will be able to select it in the configuration frontend:


[[Image:Theme_selection.png]]
[[Image:Theme_selection.png]]

Revision as of 12:30, 19 June 2008

Introduction

Open-Xchange SP4 will support theming functionality, so that you will be able to create own themes and make them available in the configuration frontend of the Open-Xchange Webinterface. The stylesheet files have been modified with SP4, so that everything that should affect the theming functionality can now be configured within an own theme. Besides also the images can be replaced per theme.

Creating an Open-Xchange Theme

All themes will be stored in the following directory of the Open-Xchange Server: 

/var/www/ox6/themes/

Per default you will have at least three themes in this directory: darkseagreen, default and ochre. The easiest way to start with your own theme is to copy the default theme with: 

cp -r /var/www/ox6/themes/default /var/www/ox6/themes/[YOUR_THEME_NAME]

Now, you should start modifying your theme, by editing the stylesheet files in /var/www/ox6/themes/[YOUR_THEME_NAME]/css, and exchanging the images from /var/www/ox6/themes/[YOUR_THEME_NAME]/images. The following screenshots will give you an overview of the stylesheet structure, and which tags have to be modified in order to get your theme customized:

Style

The Portal Page

The Portal Page
  1. a
  2. a
  3. a


The Calendar Page

The Calendar Page
  1. a
  2. a
  3. a

Calendar Month View

Calendar Month View
  1. a
  2. a
  3. a

New Appointment

New Appointment
  1. a
  2. a
  3. a

New Appointment Series

New Appointment Series
  1. a
  2. a
  3. a

Calendar Week View

Calendar Week View
  1. a
  2. a
  3. a

Mail View

Mail View
  1. a
  2. a
  3. a

Setup description

After you have created and modified your theme, you should make those theme available in the configuration interface for users of the Open-Xchange Server. To do that, you only have to manifest your theme in the following server configuration file, afterwards your users can select your theme: 

/opt/open-xchange/etc/groupware/themes.properties

Each key in this property file must be prefixed with the theme bundle identifier. This is "com.openexchange.themes". The prefix must be followed with the unique identifier of a theme. This unique identifier specifies the directory name of the theme on the web server (/var/www/ox6/themes/ per default), too. The value of the property can be any name to described the theme. This name will be displayed in the AJAX GUI for selecting a theme. For example you should add the following line to this configuration file: 

com.openexchange.themes.[YOUR_THEME_NAME]=[YOUR_THEME_DESCRIPTION]

Afterwards, restart the Open-Xchange service groupware. Your users can now select your theme.

End user view

After you have created and configured your theme, your users will be able to select it in the configuration frontend:

Theme selection.png

Retrieved from "https://wiki.open-xchange.com/wiki/index.php?title=OX6:Gui_Theming_Description&oldid=1862"