Hướng dẫn chỉnh sửa Giao diện và thiết kế giao diện cho xfr

[ Tin nhắn mới · Thành viên · Nội quy diễn đàn · Tìm kiếm · RSS ]

Page 1 of 1 1
Forum moderator: Administrators

Hướng dẫn chỉnh sửa Giao diện và thiết kế giao diện cho xfr (Giao diện và thiết kế giao diện cho xenforo)

Administrators

Data: Thứ tư, 2015-09-23, 9:53 PM

Offline

Bài viết: 71

Danh hiệu: 0

Đánh giá: 89

Để có được một diễn đàn đẹp yêu cầu nhà quả trị cũng như người thiết kế phải biết cách chỉnh sửa và có mắt thẩm mỹ. Hôm nay mình chia sẻ bài viết này mong rằng sẽ có ích với các bạn khi chỉnh sửa giao diện xenforo.

Tôi làm cách nào để thay thế 1 styles mới cho diễn đàn?
Truy cập ACP -> Styles -> Create a New Styles (tạo 1 style mặc định để có thể chỉnh sửa) hoặc ACP -> Styles -> Import a style -> lựa chọn file XML của style (sau khi đã upload file vào thư mục styles)

Làm cách nào để fix độ rộng của style?
Bạn chỉnh tại ACP -> Styles -> Style Properties -> General: Page Width Controller, nhập dữ liệu sau vào trường Miscellaneous:
width: 992px;
margin: 0 auto;
Chú ý: độ rộng 992px có thể thay đổi giá trị theo ý muốn của bạn

Làm sao để thêm các trường giá trị thông tin phía dưới avatar user (số bài viết, được thích, nơi ở,…)?
Bạn thêm các trường đó tại ACP -> Styles -> Style Properties -> Message Elements

Tôi thay đổi màu của các nhóm user ở đâu?
Bạn thay đổi tại ACP->User->User Groups -> Administrator -> User Name CSS: color: red;. thay đổi màu của các nhóm user theo ý bạn.

Tôi chỉnh màu của giao diện ở đâu?
Bạn có thể chỉnh tại ACP -> Styles -> Style Properties -> Color Palette. Hoặc dùng chức năng Search template để chỉnh tiểu tiết khi bạn đã có key tìm kiếm.

Làm thế nào để chỉnh màu sắc và font chữ hiển thị tại Quote box hoặc một số BB Code khác?
Bạn chỉnh tại ACP -> Styles -> Style Properties -> BB Code Elements.

Làm sao để chỉnh màu chữ và màu nền của naviation tabs?
Bạn thêm vào EXTRA.css template:
Mã:
.navTabs .navTab.PopupClosed .navLink { color: @primaryDark;
background-color: @primaryLight;
}
Thay đổi màu cho phù hợp

Làm sao để chỉnh màu chữ và nền của navigation tabs khi trỏ chuột vào (hover)?
Bạn thêm vào EXTRA.css template:
Mã:
.navTabs .navTab.PopupClosed .navLink:hover { color: @secondaryDark;
background-color: @secondaryLight;
}
Thay đổi màu cho phù hợp

Làm sao để thay đổi màu nền của từng Category?
Thêm vào EXTRA.css template:
Mã:
.nodeList .node_x .categoryStrip { background-color: @primaryLighter;
}
Thay thế node_x với giá trị ID của node đó, ví dụ, node_10. Thay đổi màu cho phù hợp

Làm sao để thay đổi icon cho mỗi forum?
Bạn có thể tham khảo add-on Custom Node icon.

Làm sao để tạo ra style riêng cho các bài post của staff?
Bạn có thể add thêm class .staff CSS vào EXTRA.css, ví dụ:
Mã:
.staff { font-weight: bold;
color: red;
}
Làm sao để tạo ra tiền tố (prefix) trước các tiêu đề?
Bạn có thể tạo tại đây: ACP -> Applications -> Thread Prefix ->Create New Thread Prefix .

Làm sao để xóa bỏ tiêu đề forum ở ngoài trang chủ?
Bạn thêm vào EXTRA.css template:
Mã:
.forum_list .titleBar { display: none;
}
Chú ý có thể ảnh hưởng đến SEO của website

Làm cách nào để giới hạn kích thước ảnh trong bài post?
Bạn thêm vào EXTRA.css template:
Mã:
.bbCodeImage { max-width: 50%;
}
Chú ý là bạn nên chọn giá trị % hơn là giá trị px và sau khi bạn resize thì click chuột vào ảnh sẽ cho kích thước gốc.

Làm thế nào để cấm sử dụng hình ảnh và thẻ quote trong chữ kỹ thành viên?
Bạn thêm vào EXTRA.css template:
Mã:
.signature .bbCodeImage, .signature .bbCodeBlock { display: none !important;
}
Làm sao để tôi đặt 1 ảnh hoặc 1 module quảng cáo trên góc phải header?
Bạn sửa trong template ad_header

Chúc các bạn thành công!

★★★★★ Tôi muốn thử thách chính mình ★★★★★

Hướng dẫn chỉnh sửa Giao diện và thiết kế giao diện cho xfr (Giao diện và thiết kế giao diện cho xenforo)

Page 1 of 1
1

Thông Tin

Ad rất cám ơn các bạn đã và đang bắt đầu quan tâm đến Star8x, các bạn có thể gửi phản hồi, ý kiến, thắc mắc hoặc những gì bạn cảm thấy khó chịu, bất tiện trong quá trình sử dụng website. ad thật sự cảm ơn và vui vẻ nhận đón nhận những ý kiến phản hồi từ bạn.
Lưu ý: Những bài viết đăng trên trang ad các bạn hãy tham khảo thật kỹ trước khi đọc hoặc tải về những ứng dụng, có những baì viết được đăng bởi các member của trang. ad không chắc chắn được bài viết đó có thật sự tốt hoặc có chứa các mã độc hay không, nếu các bạn tải về thì ad khuyến cáo các bạn nên diệt virut trước khi cài đặt...!

Nguyễn Văn Thanh

+84 01658 588-008

nvt.star8x@gmail.com

Được tài trợ bởi uCoz.com

Internet

Chuyển nick facebook...

BOX ADMIN