III. Tùy biến các giao diện và Thêm logo Zimbra Powered - Ấn bản Mã nguồn mở
5. Tạo giao diện được tùy biến từ những giao diện mẫu
Để tùy biến lược đồ màu của giao diện người dùng ZWC, chúng ta có thể điều chỉnh một trong số các giao diện mẫu. Hai giao diện mẫu được cung cấp với với những phương án màu chung là ánh sáng nhạt (light) hoặc màu trắng (white). Chúng ta có thể tùy biến các màu của giao diện bằng cách dùng Theme Color Picker, công cụ sẽ giúp chúng ta nhanh chóng đặt các màu và các biến thể của chúng.
Chúng ta có thể xem những ví dụ từ Zimbra Web Client, đi đến Options, thẻ General, UI Theme và chọn giao diện để xem.
5.1 Thay đổi những giao diện mẫu của Zimbra
Khi chúng ta cài đặt ZCS, những tập tin giao diện đã được cài đặt ở thư mục /opt/zimbra/tomcat/webapps/zimbra/skins. Chúng ta sẽ thêm thư mục giao diện tùy biến của chúng ta vào thư mục /skins. Chú ý : ở phiên bản 5.x thay thế 'tomcat' thành 'jetty'.
Mỗi thư mục giao diện có một tập tin .xml và một tập tin .txt. Tập tin .xml là tập tin kê khai (manifest file), nó là một danh sách tập trung các các tập tin tạo nên giao diện. Tập tin .txt là nơi mà các màu sắc được định nghĩa và logo Zimbra Powered được cấu hình.
Chú ý : Chúng ta có thể điều chỉnh bất kỳ giao diện nào. Nếu chúng ta tùy biến một giao diện Zimbra nằm trong thư mục /skins, thì chúng ta nên sao chép và đổi tên giao diện và thư mục chứa giao diện đó. Thay đổi những xuất hiện của tên giao diện Zimbra thành tên giao diện của chúng ta.
5.2 Làm thế nào để thay đổi một giao diện mẫu
1. Đi vào thư mục /opt/zimbra/tomcat/webapps/zimbra/skins/_sample. Thư mục _sample bao gồm những thư mục mẫu là light và white.
2. Sao chép thư mục giao diện mẫu từ thư mục /_samples đến thư mục /skins. Khi chúng ta sao chép nó, thay đổi tên của giao diện mẫu thành tên của giao diện mà chúng ta tạo.
cp –r <sampletheme> /opt/zimbra/tomcat/webapps/zimbra/skins/<mytheme>
3. Thay đổi tên của những tập tin trong thư mục <mytheme> thành tên của giao diện mà chúng ta tạo. Chắc chắn rằng chúng ta không thay đổi những phần mở rộng của các tập tin này.
mv <sampletheme.xml> <mytheme>.xml
mv <sampletheme_subs.text <mytheme>_subs.txt Thư mục giao diện của chúng ta sẽ trông như thế này : /skin/mytheme/
mytheme.xml
4. Soạn thảo tập tin mytheme.xml. Tìm đoạn <file>[skin]_subs.txt</file> và thay thế những xuất hiện của "[skin]" thành tên giao diện của chúng ta.
$ 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. Soạn thảo <mytheme>_subs.txt
a. Nơi nào chúng ta thấy SkinName = [skin], thay "[skin]" thành tên của tập tin giao diện của chúng ta, trong ví dụ này thì : SkinName = mytheme.
b. Nếu chúng ta đã điều chỉnh phần mềm Zimbra, chúng ta nên cấu hình logo Zimbra Powered. Nếu chúng ta dùng ZCS dưới giấy phép mã nguồn mở, và chúng ta đã điều chỉnh phần mềm, vì thế chúng ta được yêu cầu dùng logo Zimbra Inside. Để hiển thị logo, gỡ bỏ chú thích những dòng mà bắt đầu với LogoImgDir và LogoURL.
c. Chúng ta có thể tùy biến những màu giao diện mà dùng để hiển thị.
Tập tin themes _subs.txt định nghĩa một single _BaseColor_ và các biến thể được dùng để đưa ra giao diện có màu sắc nhất quán. Nếu chúng ta muốn điều chỉnh những màu của giao diện, dùng Theme Color Picker để lựa chọn các màu tương thích với nhau và kế đến là sao chép và dán danh sách các biến thể của màu vào tập tin your mytheme_subs.txt. Sẽ thấy phần này trong phần Sử dụng Theme Color Picker.
#############################################################
# Skin Substitutions
#---#
#
# Add or change entries below to customize this skin.
# See: http://wiki.zimbra.com/?title=Themes
Giới Thiệu LDAP
#
# NOTE: Substitutions that begin and end with "_" (eg:
# "_BaseColor_")should only be used within this file -- never in # a CSS or HTML file
#
# ===========================================================#
SkinName = mytheme
###############################################################
# Logo Licensing Rules #
#---#
#
# If you are using the Zimbra Collaboration Suite (ZCS) under the
# open source license, and you have not modified the software,
# then you are required to use the Zimbra logo (the default).
#
# LogoImgDir = /zimbra/skins/_base/logos
# LogoURL = http: //www.zimbra.com
#
#---
# 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.
#
# LogoImgDir = /zimbra/skins/_base/logos/ZimbraInside
# LogoURL = http:// www.zimbra.com
#
#---
#
#============================================================#
# Skin Colors #
#---#
#### Base color and variants ####
_BaseColor_ = #ff7373 _BaseColorD95_ = #0d0606 _BaseColorD90_ = #1a0c0c .
6. Bây giờ, chúng ta điều chỉnh cấu hình Zimbra để thêm giao diện tùy biến của chúng ta, sau đó dừng và chạy server.
Để điều chỉnh cấu hình, gõ :
zmprov mcf +zimbraInstalledSkin <mytheme>
7. Dừng server, gõ : zmcontrol stop
8. Khi những dịch vụ đã dừng hoạt động, để khởi động lại server, gõ : zmcontrol start
Giao diện tùy biến bây giờ đã được liệt kê trong COS của console quản trị và danh sách Accounts UI Theme.
Nếu chúng ta muốn những người dùng chỉ truy cập giao diện này, thì điều chỉnh Classes of Service để chọn giao diện này trong Current UI theme và vô hiệu hóa tính năng Change UI themes feature.
Điều quan trọng : nếu những người dùng đã dùng ZCS, họ nên xóa sạch bộ nhớ đệm trình duyệt của họ trước khi những logo mới được hiển thị.
Giới Thiệu LDAP
5.3 Sử dụng Theme Color Picker
Hình G-1 : Theme Color Picker
Để thay đổi các màu của giao diện thì dùng ZCS Theme Color Picker để tạo ra các biến thể màu sắc khác nhau. Trong khi chúng ta chọn những màu khác nhau, công cụ Theme Color Picker tự động cập nhật giá trị RGB của các biến thể màu sắc vào danh sách của Theme Color Picker. Những danh sách này sẽ được sao chép và dán vào tập tin [theme]_subs.txt.
Một giao diện định nghĩa một _BaseColor_ đơn, nó được dùng để làm cho giao diện người dùng (UI) có một giao diện nhất quán về màu sắc. Tập tin HTML, CSS và các tập tin thay thế đã khéo léo dùng các biến thể sáng và tối của màu sắc này để đạt được những hiệu ứng như các nút trông chúng giống như nhô lên và hạ xuống, mà không sử dụng hình ảnh. Để thay đổi một _BaseColor_, dùng ZCS Theme Color Picker để chọn màu sắc tương thích ở mục BaseColor. Sao chép và dán danh sách các biến thể màu sắc vào trong phần _BaseColor_ của tập tin [theme]_subs.txt.
Những giao diện cũng định nghĩa một _SelColor_, nó là màu sắc được dùng để hiển thị các dòng được lựa chọn trong một danh sách, những nút mặc định, … Để định nghĩa một _SelColor_, dùng Theme Color Picker để chọn màu tương thích ở mục SelColor. Sao chép và dán danh sách các biến thể màu sắc vào trong phần _SelColor_ của tập tin [theme]_subs.txt.
Tập tin ZCS Theme Color Picker file đã cài đặt ở thư mục
từ trình duyệt của chúng ta, gõ http://YOUR SERVER/zimbra/skins/_sample/ZCSThemeColorPicker.html.