Một diễn đàn có giao diện đẹp, thân thiện luôn là mục tiêu mà người thiết kế hướng đến, đồng thời nó cũng là một tiêu chuẩn để khách truy cập đánh giá mức độ chuyên nghiệp của diễn đàn, cũng như sự đầu tư của người quản trị. Đây cũng là một trong những yếu tố ảnh hưởng đến sự phát triển của diễn đàn. Tuy giao diện mặc định của XenForo có thiết kế đẹp, đơn giản và thân thiện với người sử dụng nhưng bạn có thể thiết kế lại giao diện, tùy chỉnh màu sắc để phù hợp hơn với nhu cầu và định hướng xây dựng diễn đàn.
Phần này sẽ đưa ra một số gợi ý về cách thiết kế giao diện cho diễn đàn dựa trên một số trải nghiệm của tác giả về mã nguồn XenForo. Đồng thời, hướng dẫn cách cài đặt giao diện mới, thiết lập tự động nhận giao diện dành cho thiết bị di động, cài đặt gói ngôn ngữ tiếng Việt.
5. Thiết kế, tùy chỉnh giao diện
XenForo cung cấp cho người dùng các công cụ mạnh mẽ để có thể tùy biến giao diện theo ý thích. Để thiết kế, tùy chỉnh giao diện, bạn sử dụng các tính năng trong khung Styles & Templates trong thẻ Apperance. Đối với giao diện mặc định Default Style hoặc các giao diện khác (nếu có) thì việc tùy chỉnh và thiết kế lại giao diện cũng được thực hiện tương tự như các bước gợi ý sau đây.
Đầu tiên, bạn sử dụng tính năng bảng màu sắc Color Palette để thay đổi màu cho các nhóm thuộc tính trên giao diện. Trong cửa sổ bên phải, bạn chọn tên giao diện ở mục Style, rồi lần lượt chọn từng bảng màu ở bên dưới hoặc có thể phối màu tự động bằng cách kéo thanh trượt bên trên nút Invert, bấm nút Invert để đảo lộn các màu đã chọn. Khi xong, bạn bấm nút Up-date Style Properties để lưu thay đổi.
Tiếp theo, bạn có thể chỉnh sửa các thuộc tính khác của giao diện bằng nhóm tính năng Style Properties, như: General (những thiết lập chung cho giao diện), Building Blocks (điều chỉnh các thành phần trên giao diện), Header and Navigation (tùy chỉnh các yếu tố đầu trang, các thanh điều hướng), Breadcrumb (điều chỉnh các đường dẫn phân cấp giúp khách truy cập biết được vị trí hiện tại trong cấu trúc diễn đàn), Footer (điều chỉnh các thiết lập ở chân trang), PageNav, Link Groups and Tabs (quản lý các liên kết nhiều trang, các thẻ khác), Sidebar (tùy chỉnh các khung tính năng trên giao diện), Forms (định nghĩa các kiểu bố trí ở hầu hết các biểu mẫu), Buttons (quản lý thuộc tính tất cả các nút bấm), Overlays and Tooltips (thiết kế bảng hướng dẫn cho phép hiển thị trên cùng của các trang nội dung),…
Ví dụ, nếu muốn thay đổi logo mặc định của mã nguồn XenForo thì bạn bấm vào thuộc tính Header and Navigation. Ở thẻ Setting, bạn được cung cấp hai khung Header Logo Image Path (đường dẫn đến tập tin logo) và Height of Header Logo (chiều cao của logo). Bạn cần chép tập tin ảnh logo vào thư mục styles/default/xenforo (đối với giao diện mặc định), rồi xóa chữ logo.png và nhập tên logo của bạn (bao gồm định dạng). Riêng đối với Height of Header Logo, bạn vào chiều cao cho phép logo hiển thị trên header. Khi xong bấm Up-date Style Properties.
Mục Templates cung cấp cho bạn những mẫu code độc quyền của XenForo được viết bằng HTML5 và CSS3. Với tính năng, người quản trị có thể tinh chỉnh toàn bộ giao diện XenForo bằng cách chỉnh sửa HTML và CSS. Trong khung bên phải liệt kê danh sách các mẫu quy định thuộc tính của các thành phần trên diễn đàn, những mẫu đã được tùy chỉnh sẽ hiện màu đỏ, những mẫu không có thay đổi vẫn giữ màu bình thường. Ví dụ, để chỉnh sửa thuộc tính ad_header (quảng cáo ở đầu trang header), bạn chèn mã quảng cáo vào bên dưới mã rồi bấm Save and Exit.
Các thành phần đã tùy chỉnh đều được lưu lại ở mục Customized Components, bạn có thể sử dụng khung Filter items để tìm kiếm theo bộ lọc. Nếu muốn phục hồi lại thiết lập mặc định thì bạn bấm vào dấu X màu đỏ ở hàng Templates, Style Properties cần phục hồi. Hoặc có thể đánh dấu chọn vào các thành phần (hoặc đánh dấu chọn Se-lect all) rồi bấm Revert Se-lected Items để đưa các thành phần đã chọn về thiết lập mặc định.
6. Cài đặt giao diện và thiết lập tự động nhận giao diện mobile
Để cài đặt giao diện mới cho diễn dàn XenForo, bạn bấm vào mục Import a Style rồi bấm nút Browse ở mục Import f-rom uploaded file và tìm đến tập tin giao diện (định dạng xml). Tiếp theo, bạn có thể đánh dấu chọn vào ô Child of style để cài đặt làm giao diện con của một giao diện nào đó hoặc chọn ô Overwrite style để ghi đè lên giao diện được chọn, xong bấm Import. Quá trình cài đặt có thể diễn ra trong vài giây, sau khi xong sẽ chuyển đến trang quản lý Styles. Tác giả sử dụng giao diện mobile (dành cho các thiết bị di động) để minh họa cho bài viết.
Sau khi cài đặt xong, bạn có thể thay đổi các thiết lập mặc định liên quan đến giao diện mới. Ở trang quản lý giao diện Styles, bạn đánh dấu chọn vào ô vuông đầu tiên để cho phép thành viên sử dụng, ô tròn thứ hai cho phép thiết lập giao diện mặc định, tính năng Template và Style Properties cho phép tùy chỉnh giao diện, tính năng Export để trích xuất giao diện.
Để thiết lập chế độ tự nhận giao diện mobile khi dùng thiết bị di động truy cập vào website, bạn cần phải cài đặt thêm tiện ích Automatic Mobile Style Switcher và giao diện dành cho mobile. Bạn có thể tải tiện ích này, cùng với giao diện mobile tại địa chỉ này. Sau khi tải về, bạn tiến hành giải nén được tập tin giao diện Style-Mobile.xml và tập tin nén MobileStyleSwitch.zip. Bạn giải nén tập tin MobileStyleSwitch.zip và chép thư mục library trong thư mục Upload vào thư mục htdocs\beta. Sau đó, bạn trở lại trang quản trị của XenForo, vào menu Home > bấm vào mục Install Add-on, rồi bấm nút Browse ở trường Install f-rom uploaded file, tìm đến tập tin addon-MobileStyleSwitch.xml và bấm Install Add-on.
Sau khi cài đặt xong tiện ích hỗ trợ Automatic Mobile Style Switcher, bạn cài đặt giao diện mobile Style-Mobile.xml, rồi trở lại menu Home > Options, bấm vào nhóm tùy chọn Automatic Mobile Style Switcher.
Ở trang mới hiện ra, bạn nhập số ID của giao diện mobile vào ô Mobile Style ID, nhập danh sách thiết bị vào ô Additional Agents, rồi bấm Save Changes. Lưu ý, để biết số ID của giao diện, bạn trở về trang quản lý Styles, bấm vào giao diện mobile và nhìn lên thanh địa chỉ sẽ thấy được số ID ở phía sau chữ style-mobile, ví dụ: beta/admin.php?styles/style-mobile.3/edit có ID là 3. Bạn có thể sử dụng tiện ích User Agent Switcher dành cho trình duyệt Firefox để kiểm tra kết quả thiết lập.
7. Cài đặt ngôn ngữ
Các tính năng trong khung Languages & Phrases ở thẻ Appearance giúp người quản trị quản lý tốt ngôn ngữ trên giao diện. Ngoài ngôn ngữ mặc định là tiếng Anh (English (US)), bạn có thể cài thêm gói ngôn ngữ tiếng Việt cho diễn đàn, tải tại địa chỉ này. Sau khi tải về, bạn hãy giải nén tập tin language-Tieng-Viet.rar và trở về trang quản trị, bấm Import a Language. Ở trường Import f-rom uploaded file, bạn bấm nút Browse và duyệt đến tập tin language-Tieng-Viet.xml rồi bấm Import.
Để cài đặt tiếng Việt làm ngôn ngữ mặc định, bạn đánh dấu chọn vào ô tròn trên hàng tiếng Việt. Sau đó, bấm vào liên kết Tiếng Việt rồi thay đổi các tùy chọn Title- tiêu đề, Locale- vị trí, Text Direction- hướng văn bản, Decimal Point C-haracter- kí tự cách phần thập phân, Thousands Separator- kí tự cách phần nghìn, Date Format- định dạng ngày, Time Format- định dạng thời gian. Ngoài ra, bạn có thể sử dụng tính năng Phrases để tự dịch thêm một số từ và cụm từ, với tổng số 4.513 đối tượng.
Video hướng dẫn: http://www.youtube.com/watch?v=zHTcPSZ7A4o
Phần 4: Nhập dữ liệu từ mã nguồn phpBB, IP Board, vBulletin và sử dụng một số công cụ khác.
BÙI THANH LIÊM
MangVN
Chia sẻ thành công, kết nối đam mê
