BigBlueButton hỗ trợ công cụ để chúng ta có thể thiết kế giao diện theo ý của mình bằng cách biên dịch file CSS nằm trong thư mục :
/home/server/dev/bigbluebutton/bigbluebutton-client/src/branding/css
Tại đây tìm đến file theme.css là file thiết kế chính. File này sẽ được load bởi BigBluebutton client.
Trong đó :
Application : Chứa hình nền và font chữ
.mdiWindowFocus : Các tùy chỉnh khi được chọn module , khi chọn sẽ xuất hiện màu xanh .
.mypanelTitleFocus : Tựa đề các module khi được chọn,khi chọn thì chữ màu trắng ,font Arial ,cỡ chữ 12 .
.mdiWindowNoFocus: Các tùy chỉnh của các module không được chọn ,màu xám .mypanelTitleNoFocus : Tựa đề các module khi không được chọn ,font chữ
Arial ,cỡ chữ 12 ,màu chữ đen
ApplicationControlBar : Tùy chỉnh thanh ControlBar ComboBox : Màu sắc select
ProgressBar : Thanh chạy khi load các module màu xanh.
Sau khi thiết kế xong để sử dụng file CSS này chúng ta phải biên dịch nó sang file Flash theme.css.swf bằng cách dùng lệnh sau với quyền user:
$ cd ~/dev/bigbluebutton/bigbluebutton-client $ ant branding -DthemeFile=theme.css
LUẬN VĂN TỐT NGHIỆP HỆ THỐNG VIDEO CONFERENCE
65 Hình 5.22 Biên dịch module giao diện theme.css
Sau khi biên dịch thành công ,sẽ tạo ra file flash theme.css.swf nằm trong thư mục :
/home/quangquynh/dev/bigbluebutton/bigbluebutton-client/bin/branding/css Tiếp theo chúng ta copy file theme.css.swf vào thư mục mới:
/var/www/bigbluebutton/client/branding/css/theme.css.swf
Chỉnh sửa file config tại thư mục /var/www/bigbluebutton/client/conf/config.xml như sau:
Đổi thành:
False : Giao diện mặc định cho web True : load giao diện được tạo ra
LUẬN VĂN TỐT NGHIỆP HỆ THỐNG VIDEO CONFERENCE
66 Hình 5.23 Kết quả thu được sau khi sửa giao diện