Xenforo Tutorial How to add your logo in the editor

[haykaystarhaykaystar is verified member.]

Compatible XF Versions

2.0 , 2.1 , 2.2 , 2.3

Elevate your community's branding by adding your logo directly into Xenforo's editor. This simple yet effective customization can make a significant impact.

Follow this step-by-step guide to achieve a professional and personalized look:

Step 1: Access the Extra LESS Template

1. Log in to your Xenforo admin panel.
2. Navigate to Appearance > Templates.
3. Open the extra.less template for the theme you want to customize.

Step 2: Add Custom CSS Code

Copy and paste the following code into the extra.less template:


See a live demo: Administrata - Empowering Community Leaders

.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 */
    }
}

Customizing Your XenForo Editor with a Branded Logo

This customization adds a subtle, yet professional touch to your XenForo editor.

Desktop View

• Adds a logo (replace TESTLOGO.webp with your own link) as a background to the editor
• Logo appears in the bottom-right corner, resized to 300px with 20% opacity
• Adjust logo size and opacity to your preference

Mobile View

• Adjusts logo for smaller screens using a media query
• Smaller logo (replace opacity.png with your own link) resized to 30px for better fit on mobile devices
• Adjust logo size and placement to your preference

Testing and Backup

• Test responsiveness: Check editor appearance on desktop and mobile devices
• Backup your changes: Save your extra.less file before making modifications
• Experiment safely: Use a test theme if unsure about making changes to a live theme

With these simple steps, you'll give your XenForo editor a professional, branded look. If you have questions or need assistance, feel free to ask