XF2 Tutorials How to add your logo in the editor

[XFdownloadStore]

Adding your logo inside XenForo's editor is a simple yet effective way to customize your community and subtly promote your brand. This guide walks you through the steps to achieve this subtle and professional customization.

1. Access the Extra LESS Template
   • Go to your XenForo admin panel.
   • Navigate to Appearance > Templates
   • Open the extra.less template for the theme you want to customize.
2. Add the Custom CSS Code
   • Copy and paste the following code into the extra.less template:

.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('https://administrata.net/data/assets/logo_default/TESTLOGO.webp') 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('https://i.ibb.co/8rFyrtW/opacity.png') 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 */
    }
}

How It Works​

• Desktop View:
  • Adds your logo (TESTLOGO.webp) as a subtle background to the editor. Don't forget to change my link to yours.
  • The logo appears in the bottom-right corner, resized to 300px with 20% opacity. Adjust as you prefer.
• Mobile View:
  • Adjusts the logo for smaller screens using a media query.
  • The smaller logo (opacity.png) is resized to 30px for better fit on mobile devices. Don't forget to change my link to yours and adjust as you prefer.

---

• Test Responsiveness:
  • Check how the editor looks on both desktop and mobile devices.
  • Adjust the logo sizes or placement as needed.
• Backup Your Changes:
  • Always back up your extra.less file before making modifications.
• Experiment Safely:
  • Use a test theme if you’re unsure about making changes directly to a live theme.

With this customization, your XenForo editor will stand out with a professional, branded touch!