Tutorials How to add your logo in the editor

[XFModz]

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.

Live demo: https://administrata.net/

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! If you have any questions or run into issues, feel free to ask for assistance. Happy customizing!