What's new
By:
  • Do not create multi-accounts, you will be blocked! For more information about rules, limits, and more, visit the Help Page Found a dead link? Use the report button!
  • If no files are available, please contact me or reply in the thread. I will update them immediately.

Xenforo Tutorial How to add your logo in the editor

haykaystar

haykaystarhaykaystar is verified member.

Administrator
Moderator
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

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


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
 
Back
Top