Making a custom style - Tùy chỉnh giao diện (dành cho người mới bắt đầu) cho XenForo 2
Bài viết này dành cho bất kỳ ai hoàn toàn mới sử dụng xenForo, những người có thể vừa mới bắt đầu một diễn đàn nhưng muốn tùy chỉnh màu sắc để mang lại cho diễn đàn một diện mạo cá nhân hơn. Không cần biết bất kỳ loại mã hóa hoặc thiết kế đồ họa nào - tất nhiên bạn sẽ muốn có logo của riêng mình, vì vậy chúng ta sẽ bắt đầu với phần đó. Bạn có thể lấy logo từ bất kỳ trình tạo logo trực tuyến nào như Looka hoặc thuê một nhà thiết kế đồ họa (có một số nhà thiết kế có giá trị tốt trên Fiverr hoặc People per Hour.)
Hướng dẫn này sẽ chỉ cho bạn cách tạo các child style dựa trên mặc định của xenForo. Điều này sẽ chứng minh cách một số khía cạnh sẽ được kế thừa từ mặc định (logo), những khía cạnh khác sẽ ghi đè lên parent (màu sắc). Đầu tiên, chúng ta sẽ thêm logo của mình vào style mặc định, sau đó điều này sẽ hiển thị trên bất kỳ child style nào. Đừng chỉ tải logo của bạn lên cùng một nơi với logo xenForo và đổi tên thành xenforo-logo.png hoặc bạn sẽ bị nhắc nhở trong quá trình kiểm tra sức khỏe tệp.
Nếu logo của bạn không phải là hình vuông hoặc hình chữ nhật, bạn sẽ cần định dạng tệp png để tránh hình vuông/hình chữ nhật màu trắng bao quanh nó. Với xenForo 2.3, hình ảnh webp cũng ổn. Nếu logo của bạn là hình vuông hoặc hình chữ nhật thì jpg cũng được.
Cả hai đều là style sáng, hiện tại style tối phức tạp hơn một chút. Sau khi thực hiện những điều đó, bạn sẽ bắt đầu tạo style riêng của mình. Lưu ý: bạn có thể thực hiện việc này trên thiết bị di động, nhưng có lẽ sẽ không dễ dàng như vậy.
Bây giờ lặp lại với Color 2 có màu tối hơn một chút:
Đừng quên nhấp vào nút Update cho mỗi màu. Thao tác này sẽ cập nhật màu nhưng vẫn chưa lưu style...
Một lần nữa, màu hồng cam có độ bóng tương tự như màu xanh lam ban đầu vì hình tròn nhỏ vẫn ở cùng vị trí như cũ. (Lưu ý: bạn có thể tùy chỉnh, nhưng tốt nhất là để nguyên như vậy để tất cả các màu cam có độ bóng tương tự như màu xanh lam)
Bây giờ hãy lặp lại thao tác trên cho tất cả các màu từ 1 đến 5. Một lần nữa, Color 5 sẽ có độ bóng tương tự như màu xanh lam đậm và sẽ có màu nâu đồng sẫm:
Hãy xem video:
Bạn có phát hiện ra lỗi cố ý không?
Cập nhật màu thứ 5 và bảng màu chính của chúng ta đã hoàn tất:
Bây giờ bạn nên nhấn lưu để lưu màu mới cho style, hãy vào trang diễn đàn của bạn, chọn style này từ trình chọn style chooser ở góc dưới bên trái và xem nó trông tuyệt vời như thế nào. Nhưng chúng ta vẫn chưa hoàn thành.
Ngay bên dưới năm màu này, bạn sẽ thấy các màu điểm nhấn, dùng cho những yếu tố nhất định cần tạo sự tương phản với các màu chính.
Chúng được sử dụng cho những thứ như nút kêu gọi hành động như Post Thread cần "nhảy ra" ở người dùng. Một lần nữa, có nhiều sắc thái khác nhau từ nhạt đến đậm. Những sắc thái mặc định hoạt động tốt như một sự tương phản với màu xanh lam mặc định, nhưng như bạn có thể thấy, chúng quá gần với sắc thái đồng của chúng ta để có bất kỳ sự tương phản nào trong style này.
Trong trường hợp này, chúng ta có thể chỉ cần tạo cho chúng các sắc thái khác nhau của màu tím bằng cách sử dụng cùng phương pháp như trên. trong trường hợp này, chỉ cần kéo thanh trượt xuống màu tím. Đây là sắc thái đầu tiên của chúng ta, một sắc thái nhạt của màu tím (giống như màu tím?)
Nhớ cập nhật, sau đó làm tương tự với accent 2 và 3 và bây giờ bạn sẽ có các sắc thái khác nhau của màu tím, nhạt, trung bình tối.
Lưu style property và kiểm tra xem style của bạn trông như thế nào ngay bây giờ!
Màu sắc từ 1 đến 5 của bạn sẽ trông giống như thế này:
Lưu ý rằng nếu bạn không hài lòng với bất kỳ màu nào, hãy tích vào ô bên trái hiện sẽ được dán nhãn là Revert customised value, nhấp vào lưu, làm lại rồi lưu lại.
Đối với style này, bạn có thể giữ nguyên các điểm nhấn mặc định vì chúng tương phản tốt với màu xám. Hoặc bạn có thể thay đổi chúng theo ý muốn.
Mặc dù bạn là quản trị viên có thể chọn bất kỳ style nào, nhưng để cho phép người dùng của bạn chọn một style, bạn cần bật chúng cho người dùng
Trong danh sách style, bạn sẽ thấy style mặc định và hai child style của mình. Bật chúng bằng nút bật:
Lưu ý rằng cần phải đánh dấu một style. Đây sẽ là style được bật khi người dùng lần đầu truy cập diễn đàn. Người dùng có thể thay đổi style này trong trình chọn style ở góc dưới bên trái, nhưng khách (hoặc người dùng chưa đăng nhập) sẽ chỉ thấy style đã đánh dấu.
NB: thuật ngữ ở đây hơi khó hiểu. "Default style" có thể có nghĩa là style màu xanh mà bạn nhận được với xenForo "ngay khi xuất xưởng" hoặc có thể có nghĩa là bất kỳ style nào được đánh dấu là style mà khách hiện thấy theo mặc định.
Chúc các bạn thành công.
Bài viết này dành cho bất kỳ ai hoàn toàn mới sử dụng xenForo, những người có thể vừa mới bắt đầu một diễn đàn nhưng muốn tùy chỉnh màu sắc để mang lại cho diễn đàn một diện mạo cá nhân hơn. Không cần biết bất kỳ loại mã hóa hoặc thiết kế đồ họa nào - tất nhiên bạn sẽ muốn có logo của riêng mình, vì vậy chúng ta sẽ bắt đầu với phần đó. Bạn có thể lấy logo từ bất kỳ trình tạo logo trực tuyến nào như Looka hoặc thuê một nhà thiết kế đồ họa (có một số nhà thiết kế có giá trị tốt trên Fiverr hoặc People per Hour.)
Hướng dẫn này sẽ chỉ cho bạn cách tạo các child style dựa trên mặc định của xenForo. Điều này sẽ chứng minh cách một số khía cạnh sẽ được kế thừa từ mặc định (logo), những khía cạnh khác sẽ ghi đè lên parent (màu sắc). Đầu tiên, chúng ta sẽ thêm logo của mình vào style mặc định, sau đó điều này sẽ hiển thị trên bất kỳ child style nào. Đừng chỉ tải logo của bạn lên cùng một nơi với logo xenForo và đổi tên thành xenforo-logo.png hoặc bạn sẽ bị nhắc nhở trong quá trình kiểm tra sức khỏe tệp.
Nếu logo của bạn không phải là hình vuông hoặc hình chữ nhật, bạn sẽ cần định dạng tệp png để tránh hình vuông/hình chữ nhật màu trắng bao quanh nó. Với xenForo 2.3, hình ảnh webp cũng ổn. Nếu logo của bạn là hình vuông hoặc hình chữ nhật thì jpg cũng được.
- Truy cập bảng điều khiển quản trị (ACP) của bạn từ liên kết Admin ở đầu diễn đàn
- Từ điều hướng bên trái, hãy đi đến Appearance > Styles
- Nhấp vào Style properties ở bên phải style mặc định:
- Nhấp vào nhóm thứ ba từ dưới lên (Basic options) và bạn sẽ thấy điều này:
- Nhấp vào biểu tượng upload file và tải logo của riêng bạn lên
- Thêm kích thước vào các ô, tức là chiều rộng và chiều cao. Đây chỉ là các con số không có hậu tố "px".
- Lưu lại.
Lý tưởng nhất (đối với màn hình retina) là nó sẽ trông đẹp nhất nếu bạn cũng có một phiên bản có kích thước gấp đôi kích thước bạn muốn hiển thị. Điều này có nghĩa là nó sẽ đẹp và sắc nét trên màn hình retina. Ví dụ, nếu bạn có một logo sẽ được hiển thị ở kích thước 200px x 50px, bạn cũng sẽ cần một logo có kích thước 400px x 100px mà bạn có thể tải lên trong trường logo 2x.
Child style
Bây giờ chúng ta sẽ xem xét việc tạo hai child style, (1) style màu copper vui nhộn và (2) style màu grey mát mẻ. Chúng ta sẽ thay đổi màu của các child style. Vì chúng là child style nên chúng kế thừa các thiết lập của style parent, trong trường hợp này, bất kỳ child style nào của style mặc định đều kế thừa logo tùy chỉnh của bạn.Cả hai đều là style sáng, hiện tại style tối phức tạp hơn một chút. Sau khi thực hiện những điều đó, bạn sẽ bắt đầu tạo style riêng của mình. Lưu ý: bạn có thể thực hiện việc này trên thiết bị di động, nhưng có lẽ sẽ không dễ dàng như vậy.
Bạn có thể tạo một style mặc định hoàn toàn mới bằng cách nhấp vào +Add style ở góc trên bên phải của cửa sổ style chính.
Để tạo bản sao của bất kỳ style nào, bạn có thể xuất style đó bằng cách nhấp vào menu thả xuống. Chọn XML ngay bây giờ. Chúng ta có thể xem Archive export sau. Sau đó, bạn có thể import style đó thông qua nút Import.
Để tạo bản sao của bất kỳ style nào, bạn có thể xuất style đó bằng cách nhấp vào menu thả xuống. Chọn XML ngay bây giờ. Chúng ta có thể xem Archive export sau. Sau đó, bạn có thể import style đó thông qua nút Import.
Copper
Giai đoạn 1: Màu chính
- Vào admin control panel (ACP) từ liên kết ở đầu diễn đàn.
- Vào Appearance > Styles ở thanh điều hướng bên trái.
- Nhấp vào Add style (ở trên cùng bên phải)
- Bạn sẽ có thể đặt tên và mô tả nếu muốn và cũng chọn parent, trong trường hợp này chọn Default style . Sau đó, đây sẽ là child của Default style. Bỏ chọn Allow user selection. Bằng cách bỏ chọn mục đó ngay bây giờ, bạn với tư cách là quản trị viên sẽ có thể thấy style và các thay đổi có hiệu lực, nhưng người dùng của bạn sẽ không thấy cho đến khi bạn hoàn tất công việc và bật nó.
- Lưu style (sẽ mất một lúc vì nó đang xây dựng các template được kế thừa.)
- Bây giờ hãy nhấp vào style properties cho child style mới của bạn và sau đó nhấp vào nhóm trên cùng - Color palette
- Bạn sẽ thấy ở trên cùng có 5 màu từ 1 đến 5 là các sắc thái khác nhau của màu xanh lam (được sử dụng trong style mặc định của parent).
- Để ghi đè lên các màu xanh lam được thừa hưởng này, bạn cần phải thay đổi chúng - và trong trường hợp này, chúng ta sẽ thay đổi các sắc thái màu xanh lam thành màu cam đỏ.
- Nhấp vào Color 1 là màu xanh nhạt, bây giờ chỉ cần di chuyển thanh trượt bên phải cho đến khi nó ở gần đỉnh ở đâu đó giữa màu đỏ và cam. Không cần phải quá chính xác nhưng bạn sẽ thấy trong hộp so sánh dưới cùng bên trái, bạn có màu cam nhạt. Nó có độ sáng rất giống với màu xanh vì vòng tròn nhỏ (trên cùng bên trái) không bị di chuyển và vẫn gần màu trắng nên điều này đang pha trộn nhiều màu trắng với màu đỏ/cam.
- Nhấp vào nút Update
Bây giờ lặp lại với Color 2 có màu tối hơn một chút:
Đừng quên nhấp vào nút Update cho mỗi màu. Thao tác này sẽ cập nhật màu nhưng vẫn chưa lưu style...
Một lần nữa, màu hồng cam có độ bóng tương tự như màu xanh lam ban đầu vì hình tròn nhỏ vẫn ở cùng vị trí như cũ. (Lưu ý: bạn có thể tùy chỉnh, nhưng tốt nhất là để nguyên như vậy để tất cả các màu cam có độ bóng tương tự như màu xanh lam)
Bây giờ hãy lặp lại thao tác trên cho tất cả các màu từ 1 đến 5. Một lần nữa, Color 5 sẽ có độ bóng tương tự như màu xanh lam đậm và sẽ có màu nâu đồng sẫm:
Hãy xem video:
Bạn có phát hiện ra lỗi cố ý không?
Cập nhật màu thứ 5 và bảng màu chính của chúng ta đã hoàn tất:
Bây giờ bạn nên nhấn lưu để lưu màu mới cho style, hãy vào trang diễn đàn của bạn, chọn style này từ trình chọn style chooser ở góc dưới bên trái và xem nó trông tuyệt vời như thế nào. Nhưng chúng ta vẫn chưa hoàn thành.
Giai đoạn 2: Điểm nhấn
Ngay bên dưới năm màu này, bạn sẽ thấy các màu điểm nhấn, dùng cho những yếu tố nhất định cần tạo sự tương phản với các màu chính.
Chúng được sử dụng cho những thứ như nút kêu gọi hành động như Post Thread cần "nhảy ra" ở người dùng. Một lần nữa, có nhiều sắc thái khác nhau từ nhạt đến đậm. Những sắc thái mặc định hoạt động tốt như một sự tương phản với màu xanh lam mặc định, nhưng như bạn có thể thấy, chúng quá gần với sắc thái đồng của chúng ta để có bất kỳ sự tương phản nào trong style này.
Trong trường hợp này, chúng ta có thể chỉ cần tạo cho chúng các sắc thái khác nhau của màu tím bằng cách sử dụng cùng phương pháp như trên. trong trường hợp này, chỉ cần kéo thanh trượt xuống màu tím. Đây là sắc thái đầu tiên của chúng ta, một sắc thái nhạt của màu tím (giống như màu tím?)
Nhớ cập nhật, sau đó làm tương tự với accent 2 và 3 và bây giờ bạn sẽ có các sắc thái khác nhau của màu tím, nhạt, trung bình tối.
Lưu style property và kiểm tra xem style của bạn trông như thế nào ngay bây giờ!
Grey
Lần này chúng ta sẽ tạo style màu xám. Quá trình thay đổi màu hơi khác một chút vì tất cả những gì chúng ta làm là chuyển đổi màu xanh mặc định thành màu xám, chứ không phải là một màu.- Tạo một child style khác như trên và đặt tên cho nó theo cách mô tả như "Grey"
- Vào style properties và chọn Color palette như trên.
- Nhấp vào Color 1 nhưng thay vì di chuyển thanh trượt bên phải sang một màu cơ bản khác, hãy giữ vòng tròn nhỏ và di chuyển nó sang phải sang trái và hơi xuống dưới để thay vì màu xanh nhạt, giờ bạn sẽ có màu xám nhạt.
- Nhấp vào Update cho Color 1
- Lặp lại cho bốn sắc thái xanh lam khác. Hãy chú ý đến hộp so sánh ở góc dưới bên trái và sử dụng phán đoán của bạn để đảm bảo màu xám mới xấp xỉ độ sáng/tối của màu xanh lam.
- Nhấp vào lưu
Màu sắc từ 1 đến 5 của bạn sẽ trông giống như thế này:
Lưu ý rằng nếu bạn không hài lòng với bất kỳ màu nào, hãy tích vào ô bên trái hiện sẽ được dán nhãn là Revert customised value, nhấp vào lưu, làm lại rồi lưu lại.
Đối với style này, bạn có thể giữ nguyên các điểm nhấn mặc định vì chúng tương phản tốt với màu xám. Hoặc bạn có thể thay đổi chúng theo ý muốn.
Mặc dù bạn là quản trị viên có thể chọn bất kỳ style nào, nhưng để cho phép người dùng của bạn chọn một style, bạn cần bật chúng cho người dùng
Trong danh sách style, bạn sẽ thấy style mặc định và hai child style của mình. Bật chúng bằng nút bật:
Lưu ý rằng cần phải đánh dấu một style. Đây sẽ là style được bật khi người dùng lần đầu truy cập diễn đàn. Người dùng có thể thay đổi style này trong trình chọn style ở góc dưới bên trái, nhưng khách (hoặc người dùng chưa đăng nhập) sẽ chỉ thấy style đã đánh dấu.
NB: thuật ngữ ở đây hơi khó hiểu. "Default style" có thể có nghĩa là style màu xanh mà bạn nhận được với xenForo "ngay khi xuất xưởng" hoặc có thể có nghĩa là bất kỳ style nào được đánh dấu là style mà khách hiện thấy theo mặc định.
Chúc các bạn thành công.
Nguồn: xenforo.com
Bài viết liên quan
Được quan tâm
Bài viết mới
