Hướng dẫn chỉnh sửa Giao diện diễn đàn Xenforo

Thảo luận trong 'Tips and Guides' bắt đầu bởi PVS, 26/05/2015.

  1. PVS

    PVS Cộng Sự Đặc Biệt Thành viên BQT

    Tham gia:
    28/02/2015
    Bài viết:
    11,755
    Đã được thích:
    7,003
    Điểm thành tích:
    113
    Giới tính:
    Nam
    Nơi ở:
    Huế
    Web:
    Để có được một diễn đàn đẹp yêu cầu nhà quản 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:
    Mã:
    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 template EXTRA.css:
    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 template EXTRA.css:
    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 template EXTRA.css:
    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 template EXTRA.css:
    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 template EXTRA.css:
    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 template EXTRA.css:
    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!


    Nguồn: azviet.asia​
     
    seoseoseo, gvth, THB and 1 other person like this.
  2. phankt

    phankt Thượng Đế

    Tham gia:
    23/08/2016
    Bài viết:
    114
    Đã được thích:
    23
    Điểm thành tích:
    18
    Giới tính:
    Nam
    Nghề nghiệp:
    SEO Gà Mờ
    Nơi ở:
    hanoi
    Web:
    Bác @PVS cho em hỏi

    1/Làm sao để chỉnh từ giao diện mặc đinh sang giao diện phẳng làm mất bo góc các box ?
    upload_2016-9-26_0-31-34.png

    2/Làm sao để chỉnh chiều cao của thanh nav ?
    upload_2016-9-26_0-32-3.png

    3/Làm sao để chỉnh hover cho toàn bộ link trên website.
    Diễn đàn của em khi di chuột vào là link font-size lớn hơn trong viết và thanh navi ;nhảy nhỏ ở các node.

    4/ Làm sao để chỉnh sửa giao diện responsive chuẩn theo thiết bị khi mà ở đi động dd em bị vỡ như này.
    upload_2016-9-26_0-37-16.png
     
    Chỉnh sửa cuối: 26/09/2016
  3. bannvph00701

    bannvph00701 Thượng Đế

    Tham gia:
    14/11/2015
    Bài viết:
    44
    Đã được thích:
    12
    Điểm thành tích:
    8
    Giới tính:
    Nam
    Nghề nghiệp:
    Seoer
    Nơi ở:
    Mỹ Đình
    Web:
    Cùng câu hỏi vơi bác. bác admin giúp với ạ
     

Chia sẻ trang này