How to add your logo in the editor

[Jammin]

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:

Code:
.fr-box.fr-basic .fr-element {<br> position: relative;<br> background: none;<br>}<br><br>.fr-box.fr-basic .fr-element:before {<br> content: '';<br> position: absolute;<br> top: 0;<br> left: 0;<br> width: 100%;<br> height: 100%;<br> background: url('https://administrata.net/data/assets/logo_default/TESTLOGO.webp') no-repeat bottom right; /* Change to your logo */<br> background-size: 300px; /* Adjust size as needed */<br> opacity: 0.2; /* Set opacity to 20% or whatever you prefer */<br> pointer-events: none; /* Make it non-interactive */<br> z-index: -1; /* Ensure it appears behind the text content */<br>}<br><br>/* Media query for smaller screens */<br>@media (max-width: 650px) {<br> .fr-box.fr-basic .fr-element:before {<br> content: ''; /* Ensure content remains empty */<br> background: url('https://i.ibb.co/8rFyrtW/opacity.png') no-repeat bottom right; /* Change to your logo */<br> background-size: 30px; /* Adjust size for mobile or whatever you prefer */<br> }<br><br> .fr-box.fr-basic .fr-element {<br> /* Optional: Add any additional styling for the element on mobile */<br> }<br>}

• 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!