Tutorial 2x How to add your logo in the editor - Cách thêm logo của bạn vào trình soạn thảo cho XenForo 2

[PVS]

How to add your logo in the editor - Cách thêm logo của bạn vào trình soạn thảo cho XenForo 2


Thêm logo của bạn vào trình soạn thảo XenForo là một cách đơn giản nhưng hiệu quả để tùy chỉnh cộng đồng và quảng bá thương hiệu của bạn một cách tinh tế. Bài viết này hướng dẫn bạn từng bước để đạt được sự tùy chỉnh tinh tế và chuyên nghiệp.

1. Truy cập template Extra.LESS
   • Vào AdminCP XenForo của bạn.
   • Điều hướng đến Appearance > Templates
   • Mở template extra.less của giao diện bạn muốn tùy chỉnh.
2. Thêm code CSS tùy chỉnh
   • Sao chép và dán đoạn code sau vào template extra.less:

.fr-box.fr-basic .fr-element {
    position: relative;
    background: none;
}

.fr-box.fr-basic .fr-element:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('YOUR_LOGO_URL') no-repeat bottom right; /* Change to your logo */
    background-size: 300px; /* Adjust size as needed */
    opacity: 0.2; /* Set opacity to 20% or whatever you prefer */
    pointer-events: none; /* Make it non-interactive */
    z-index: -1; /* Ensure it appears behind the text content */
}

/* Media query for smaller screens */
@media (max-width: 650px) {
    .fr-box.fr-basic .fr-element:before {
        content: ''; /* Ensure content remains empty */
        background: url('YOUR_LOGO_MOBILE_URL') no-repeat bottom right; /* Change to your logo */
        background-size: 30px; /* Adjust size for mobile or whatever you prefer */
    }

    .fr-box.fr-basic .fr-element {
        /* Optional: Add any additional styling for the element on mobile */
    }
}

​

Nó hoạt động như thế nào​

• Chế độ xem desktop:
  • Thêm logo của bạn làm nền tinh tế cho trình soạn thảo. Đừng quên thay đổi liên kết của bạn.
  • Logo xuất hiện ở góc dưới bên phải, được thay đổi kích thước thành 300px với độ mờ 20% . Điều chỉnh theo ý muốn.
• Chế độ xem trên thiết bị di động:
  • Điều chỉnh logo cho màn hình nhỏ hơn bằng cách sử dụng truy vấn media.
  • Logo nhỏ hơn được thay đổi kích thước thành 30px để phù hợp hơn trên thiết bị di động. Đừng quên thay đổi liên kết của bạn và điều chỉnh theo ý bạn.

---

• Kiểm tra khả năng phản hồi:
  • Kiểm tra giao diện của trình soạn thảo trên cả máy tính để bàn và thiết bị di động.
  • Điều chỉnh kích thước hoặc vị trí của logo nếu cần.
• Sao lưu những thay đổi của bạn:
  • Luôn sao lưu tệp extra.less của bạn trước khi thực hiện sửa đổi.
• Thử nghiệm an toàn:
  • Sử dụng giao diện thử nghiệm nếu bạn không chắc chắn về việc thực hiện thay đổi trực tiếp trên chủ đề đang hoạt động.

Với tùy chỉnh này, trình soạn thảo XenForo của bạn sẽ nổi bật với nét chuyên nghiệp, mang thương hiệu!

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

Nguồn: xenforo.com​