Customizing Themes and Adding Zimbra Inside Logo - Open Source Edition: Difference between revisions

No edit summary
 
(Creating redirect)
 
(3 intermediate revisions by one other user not shown)
Line 1: Line 1:
The appearance of the Zimbra Web Client user interface can be customized. Changing the appearance of the interface can be as easy as selecting which Zimbra themes are available to the users or you can customize one of the themes provided.
#REDIRECT [[Customizing_Themes_and_Adding_Zimbra_Powered_Logo_-_Open_Source_Edition]]
 
If you are using the Zimbra Collaboration Suite Open Source edition license, and have modified the software, you are required to use the Zimbra Inside logo on the web client interface. This document explains how to
 
* <div class="bullet10"><font face="Symbol"></font>Modify a Class of Service to limit the choice of themes available.</div>
* <div class="bullet10">Create customized themes from the sample themes provided and add the Zimbra Inside logo.</div>
* <div class="bullet10">Add the Zimbra Inside logo to display in a specific Zimbra theme .</div>
* <div class="bullet10">Add the Zimbra Inside logo to display in all Zimbra themes.</div>
 
<div class="Section1">
 
If you have questions about themes or have designed themes you want to share, post them to the Zimbra Forums.
 
==License Policy==
 
If the Zimbra Collaboration Suite open source editon software code is modified, the “Zimbra Inside” logo must be placed in the Zimbra Web Client user interface. If a Zimbra theme is modified or Zimlets are added to ZCS, the original Zimbra logo must be displayed.
 
Under fair use practice, you can describe your service as being based on Zimbra, such as "Acme hosted email using the Zimbra Collaboration Suite," but you generally cannot use the Zimbra name within your own branding such as "Acme Zimbra hosted email." Moreover, unless you are an accredited partner within the [http://www.zimbra.com/partners/become_a_zimbra_partner.html Zimbra Partner Program], you are not permitted to use any of the Zimbra logos other than their appropriate occurrence within the Zimbra software itself.
 
If you are producing a '''<font face="Arial">derivative work</font>''' (that is, making changes to the source code) of ZCS, Open Source Edition, you are bound by the terms of the Zimbra open source licenses (see the [http://www.zimbra.com/license/collaboration_suite_collective_license.html Zimbra Collective License] and the [http://www.zimbra.com/license/zimbra_public_license.html Zimbra Public License]). Under the Zimbra Public License (ZPL), all derivative works of the ZCS Ajax/Javascript client must carry the [http://www.zimbra.com/license/zimbra_inside_logo.html "Zimbra Inside" logo] in place of the original Zimbra logo. When users click on the “Zimbra Inside” logo, it must direct them to the Zimbra website.
 
Additional information about the license usage can be found at http:/[../../www.zimbra.com/license/index.html www.zimbra.com/license/index.html].
 
See http://www.zimbra.com/partners/trademark_branding_faq.html for more FAQs about proper use of Zimbra logo.
 
==Customizing ZWC Using Class of Service==
 
ZCS offers a selection of themes for the Zimbra Web Client (ZWC). The theme that displays as the default on the ZWC and the themes that users can select in the ZWC Options General tab can be configured in Classes of Service from the administration console. The following theme usage options can be configured:
 
Limit users to one theme. On the COS Features tab, remove the checkmark from Change UI Themes. The ZWC theme is the theme listed in the Current UI theme field on the COS Preference tab.
 
Let users access any of the installed Zimbra themes. If the Change UI Themes is checked in the COS, users can access any of the themes that are listed in Installed UI Themes, if the Available UI themes list is empty.
 
Select specific themes that users can use. To limit the number of themes available to users, select themes from the Installed UI Themes field and add them to the Available UI themes field. If Change UI Themes is checked, only the themes that are in the Available UI themes list are displayed in the user’s Options, General tab.
 
==Creating Customized Theme from Sample Themes==
 
To customize the ZWC user interface’s color scheme, you can modify one of the sample themes. Two sample themes are provided with generic color variants of either light or white. You can customize the theme colors using the Theme Color Picker which lets you quickly set the colors and their variants.
 
</div>
 
* <div class="bullet10">
<font face="Symbol"></font>Light – The color scheme is light, with black text. An example of this is the Zimbra Sand theme.
</div>
 
<div class="Section1">
 
[[Image:image006.jpg]]
 
</div>
 
* <div class="bullet10">
White – The color scheme is white, with black text. An example of this is the Zimbra Vanilla theme.
</div>
 
<div class="Section1">
 
[[Image:image008.jpg]]
 
You can view these examples from the Zimbra Web Client, go to the Options, General tab, UI Theme and select to view the theme.
 
===Creating a theme from Zimbra samples===
 
When you install Zimbra Collaboration Suite, theme files are installed in the /opt/zimbra/tomcat/webapps/zimbra/skins directory. You will add your customized theme directory to the /skins directory.
 
Each theme directory has one .xml file and one .txt file. The .xml file is the manifest file, which is a central list of all other files that make up the theme. The subs.txt file is where colors are defined and the Zimbra Inside logo configured.
 
'''Note'''<nowiki>: You can modify any of the themes. If you customize a Zimbra theme that is in the </nowiki>'''/skins''' directory, we recommend that you copy and rename the theme, following the same directions as for changing sample themes. You will need to change any occurrence of the Zimbra theme name to the changed name.
 
'''How to change a sample theme'''
 
1.Go to the following Zimbra directory, /opt/zimbra/tomcat/webapps/zimbra/skins/_sample
 
The _sample directory includes the sample folders, light and white.
 
2.Copy the sample theme directory you have chosen from the /_samples directory to the /skins directory. When you copy it, change the sample theme name to your theme name.
 
{| class="screen" style="width: 396.7pt; margin-left: .5 in; border-collapse: collapse" width="661"
|- style="height: 9.3pt"
| style="width: 396.7pt; background: #E6E6E6; padding: 0in 5.4pt 0in 5.4pt; height: 9.3pt" width="661" |
cp –r <sampletheme> /opt/zimbra/tomcat/webapps/zimbra/skins/<mytheme>
|}
 
3.Change the name of the files in the <mytheme> directory to your theme name. Make sure you do not change the extensions.
 
{| class="screen" style="margin-left: .5 in; border-collapse: collapse"
| style="background: #E6E6E6; padding: 0in 5.4pt 0in 5.4pt" |
mv <sampletheme.xml> <mytheme>.xml
 
mv <sampletheme_subs.text <mytheme>_subs.txt
|}
 
Your theme directory should look like this:
 
{| class="screen" style="margin-left: .5 in; border-collapse: collapse"
|- style="height: 33.8pt"
| style="width: 141.25pt; background: #E6E6E6; padding: 0in 5.4pt 0in 5.4pt; height: 33.8pt" width="235" |
/skin/mytheme/
 
mytheme.xml
 
mytheme_subs.txt
|}
 
4.Edit mytheme.xml. Change any occurrence of [skin] to your theme name.
 
{| class="screen" style="margin-left: .5 in; border-collapse: collapse"
| style="width: 6.65in; background: #E6E6E6; padding: 0in 5.4pt 0in 5.4pt" width="798" |
$ vi mytheme.xml
 
<skin>
 
<substitutions>
 
<file>../_base/base/base_subs.txt</file>
 
<file>../_base/light/light_subs.txt</file>
 
<file>mytheme_subs.txt</file>
 
</substitutions>
 
<css>
 
<file>../_base/base/base.css</file>
 
</css>
 
<html>
 
<file>../_base/base/base.html</file>
 
</html>
 
</skin>
|}
 
5.Edit <mytheme>_subs.txt
 
a.Where you see '''SkinName = [skin]''', change [skin] to your theme file name, for example, SkinName = mytheme.
 
b.If you modified the Zimbra software, you must configure the '''Zimbra Inside''' logo. In the section that says “If you are using ZCS under the open source license, and you have modified the software, then you are required to use the Zimbra Inside logo, uncomment the lines that starts with '''LogoImgDir''' and '''LogoURL'''.
 
c.Optionally, you can customize the skin colors.
 
The themes _subs.txt file defines a single _BaseColor_ and variances that is used to give the theme a consistent color theme. If you want to modify the colors of the theme, use the Theme Color Picker to pick the colors interactively and then copy and paste the list of color variants over the list in your mytheme_subs.txt file. See the [[Using ZCS Theme Color Picker]] article.
 
{| class="screen" style="width: 396.1pt; margin-left: .5 in; border-collapse: collapse" width="660"
| style="width: 396.1pt; background: #E6E6E6; padding: 0in 5.4pt 0in 5.4pt" width="660" |
<nowiki>#############################################################</nowiki>
 
<nowiki># Skin Substitutions </nowiki>
 
<nowiki>#------------------------------------------------------------#</nowiki>
 
<nowiki>#</nowiki>
 
<nowiki># Add or change entries below to customize this skin.</nowiki>
 
<nowiki># See: http://wiki.zimbra.com/?title=Themes</nowiki>
 
<nowiki>#</nowiki>
 
<nowiki># NOTE: Substitutions that begin and end with "_" (eg: </nowiki><br /> # "_BaseColor_")should only be used within this file -- never in # a CSS or HTML file
 
<nowiki>#</nowiki>
 
<nowiki># ===========================================================#</nowiki>
 
SkinName = mytheme
 
<nowiki>###############################################################</nowiki>
 
<nowiki># Logo Licensing Rules #</nowiki>
 
<nowiki>#-----------------------------------------------------------#</nowiki>
 
<nowiki>#</nowiki>
 
'''<font color="#999999"><nowiki># If you are using the Zimbra Collaboration Suite (ZCS) under the</nowiki></font>'''
 
'''<font color="#999999"><nowiki># open source license, and you have not modified the software,</nowiki></font>'''
 
'''<font color="#999999"><nowiki># then you are required to use the Zimbra logo (the default).</nowiki></font>'''
 
'''<font color="#999999"><nowiki>#</nowiki></font>'''
 
'''<font color="#999999"><nowiki># LogoImgDir = /zimbra/skins/_base/logos</nowiki></font>'''
 
'''<font color="#999999"><nowiki># LogoURL = http://www.zimbra.com</nowiki></font>'''
 
'''<nowiki>#</nowiki>'''
 
<nowiki>#-----------------------------------------------------------</nowiki>
 
<font color="silver">'''<font color="#000000"><nowiki># If you are using ZCS under the open source license,</nowiki></font>'''</font>
 
<font color="#000000">'''<font color="black"><nowiki># and you have modified the software,</nowiki></font>'''</font>
 
<font color="#000000">'''<font color="black"><nowiki># then you are required to use the Zimbra Inside logo.</nowiki></font>'''</font>
 
<font color="#000000">'''<font color="black"><nowiki>#</nowiki></font>'''</font>
 
<font color="#000000">'''<font color="black"><nowiki># LogoImgDir = /zimbra/skins/_base/logos/ZimbraInside</nowiki></font>'''</font>
 
<font color="#000000">'''<font color="black"><nowiki># LogoURL = http://www.zimbra.com</nowiki></font>'''</font>
 
<font color="#000000">'''<nowiki>#</nowiki>'''</font>
 
<nowiki>#------------------------------------------------------------</nowiki>
 
<nowiki>#</nowiki>
 
<nowiki>#============================================================#</nowiki>
 
<nowiki># Skin Colors #</nowiki>
 
<nowiki>#-------------------------------------------------------------#</nowiki>
 
<nowiki>#### Base color and variants ####</nowiki>
 
_BaseColor_ = #ff7373
 
_BaseColorD95_ = #0d0606
 
_BaseColorD90_ = #1a0c0c
 
.
|}
 
6.Now modify the Zimbra configuration to add your customized theme and stop and start the server.
 
To modify the configuration, type
 
{| class="screen" style="width: 297.0pt; margin-left: .5 in; border-collapse: collapse" width="495"
| style="width: 297.0pt; background: #E6E6E6; padding: 0in 5.4pt 0in 5.4pt" width="495" |
zmprov mcf +zimbraInstalledSkin <mytheme>.
|}
 
7.Stop the server, type
 
{| class="screen" style="width: 297.0pt; margin-left: .5 in; border-collapse: collapse" width="495"
| style="width: 297.0pt; background: #E6E6E6; padding: 0in 5.4pt 0in 5.4pt" width="495" |
zmcontrol stop
|}
 
8.When the services are stopped, restart the server, type
 
{| class="screen" style="width: 297.0pt; margin-left: .5 in; border-collapse: collapse" width="495"
| style="width: 297.0pt; background: #E6E6E6; padding: 0in 5.4pt 0in 5.4pt" width="495" |
zmcontrol start.
|}
 
The customized theme is now listed in the administration console’s COS and Accounts UI Theme list.
 
Optional, if you want users to only access this theme, modify Classes of Service to add only this theme to users’ UI theme list.
 
'''IMPORTANT'''<nowiki>: If users have been using Zimbra Collaboration Suite, they may need to clear their browser’s cache before the new logos are displayed.</nowiki>
 
==Adding Zimbra Inside Logo to a Zimbra theme==
 
You can add '''Zimbra Inside''' to any of the Zimbra themes in the skins directory.
 
1.Go to the following Zimbra directory, /opt/zimbra/tomcat/webapps/zimbra/skins/
 
The skins directory includes all the available Zimbra themes.
 
2.Select a theme and go to that theme’s directory.
 
3.Edit the theme’s _subs.txt.
 
In the section that says “If you are using ZCS under the open source license, and you have modified the software, then you are required to use the Zimbra Inside logo, uncomment the lines that starts with '''LogoImgDir''' and '''LogoURL'''.
 
{| class="screen" style="width: 361.8pt; margin-left: .5 in; border-collapse: collapse" width="603"
| style="width: 361.8pt; background: #E6E6E6; padding: 0in 5.4pt 0in 5.4pt" width="603" |
<nowiki>#-------------------------------------------------------</nowiki>
 
<font color="silver">'''<font color="#000000"><nowiki># If you are using ZCS under the open source license,</nowiki></font>'''</font>
 
<font color="#000000">'''<font color="black"><nowiki># and you have modified the software,</nowiki></font>'''</font>
 
<font color="#000000">'''<font color="black"><nowiki># then you are required to use the Zimbra Inside logo.</nowiki></font>'''</font>
 
<font color="#000000">'''<font color="black"><nowiki>#</nowiki></font>'''</font>
 
<font color="#000000">'''<font color="black"><nowiki># LogoImgDir = /zimbra/skins/_base/logos/ZimbraInside</nowiki></font>'''</font>
 
<font color="#000000">'''<font color="black"><nowiki># LogoURL = http://www.zimbra.com</nowiki></font>'''</font>
 
<nowiki>#-------------------------------------------------------</nowiki>
|}
 
4.Save your changes. Now you will need to deploy your changes.
 
5.Stop the server, type
 
{| class="screen" style="margin-left: .5 in; border-collapse: collapse"
| style="width: 6.65in; background: #E6E6E6; padding: 0in 5.4pt 0in 5.4pt" width="798" |
zmcontrol stop
|}
 
6.Start the server, type
 
{| class="screen" style="margin-left: .5 in; border-collapse: collapse"
| style="width: 6.65in; background: #E6E6E6; padding: 0in 5.4pt 0in 5.4pt" width="798" |
zmcontrol start.
|}
 
 
== Adding Zimbra Inside Logo to All Zimbra Themes ==
 
 
To display Zimbra inside in all Zimbra themes, you modify the base_subs.txt file.
 
1.Go to /opt/zimbra/tomcat/webapps/zimbra/skins/_base/base
 
2.Edit the base_subs.txt file. In the file where it reads “If you are using ZCS under the open source license, and you have modified the software, then you are required to use the Zimbra Inside logo.”:
 
a.Uncomment the line that starts with '''LogoImgDir'''
 
b.Uncomment the line with '''LogoURL'''.
 
{| class="screen" style="width: 387.0pt; margin-left: .5 in; border-collapse: collapse" width="645"
| style="width: 387.0pt; background: #E6E6E6; padding: 0in 5.4pt 0in 5.4pt" width="645" |
<nowiki>#========================================================================#</nowiki>
 
SkinName = base
 
<nowiki>##########################################################################</nowiki>
 
<nowiki># Logo Licensing Rules #</nowiki>
 
<nowiki>#------------------------------------------------------------------------#</nowiki>
 
<nowiki>#</nowiki>
 
<font color="silver"><nowiki># If you are using the Zimbra Collaboration Suite (ZCS) under the open </nowiki><br /> # source license, and you have not modifed the software,</font>
 
<font color="silver"><nowiki># then you are required to use the Zimbra logo (the default).</nowiki></font>
 
<font color="silver"><nowiki>#</nowiki></font>
 
<font color="silver"><nowiki># LogoImgDir = /zimbra/skins/_base/logos</nowiki></font>
 
<font color="silver"><nowiki># LogoURL = http://www.zimbra.com</nowiki></font>
 
<font color="silver"><nowiki>#-------------------------------------------------------------------------</nowiki></font>
 
<font color="silver"><nowiki># </nowiki></font>'''If you are using ZCS under the open source license,'''
 
'''<nowiki># and you have modified the software,</nowiki>'''
 
'''<nowiki># then you are required to use the Zimbra Inside logo.</nowiki>'''
 
'''<nowiki>#</nowiki>'''
 
''' LogoImgDir = /zimbra/skins/_base/logos/ZimbraInside'''
 
''' LogoURL = http://www.zimbra.com'''
 
<nowiki>#</nowiki>
 
'''<nowiki>#-------------------------------------------------------------------------</nowiki>'''
|}
 
3.Save your changes.
 
4.Stop and start the Zimbra server to display the Zimbra Inside logo.
 
a.Stop the server, type
 
{| class="screen" style="margin-left: 1 in; border-collapse: collapse"
| style="width: 6.65in; background: #E6E6E6; padding: 0in 5.4pt 0in 5.4pt" width="798" |
zmcontrol stop
|}
 
b.When the services are stopped, restart the server, type
 
{| class="screen" style="margin-left: 1 in; border-collapse: collapse"
| style="width: 6.65in; background: #E6E6E6; padding: 0in 5.4pt 0in 5.4pt" width="798" |
zmcontrol start.
|}
 
</div>

Latest revision as of 19:51, 13 August 2007

Redirect to:

Retrieved from "http://wiki.zimbra.com/index.php?title=Customizing_Themes_and_Adding_Zimbra_Inside_Logo_-_Open_Source_Edition&oldid=6471"
Jump to: navigation, search