DarkFire
New member
- Dec 27, 2018
- 6
- 2
- 3
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:
How It Works
Live demo:
https://administrata.net/- 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.
- Add the Custom CSS Code
- Copy and paste the following code into the extra.less template:
CSS:
.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.
