YoctoERP Brand and Logo Setup Guide
This guide will walk you through the process of customising your YoctoERP installation with your organisation’s branding, including logos and brand images.
Prerequisites
- Administrative access to your YoctoERP instance
- Logo images prepared in recommended formats (PNG or SVG)
- Recommended image dimensions:
- Logo: 150px × 50px (transparent background preferred)
- Brand Image: 200px × 200px
- Splash Image: Variable size (will be displayed in login/brand section)
Step 1: Configure Website Settings
Uploading Your Logo
- Navigate to Website Settings
- Go to the search bar (Ctrl/Cmd + K)
- Type “Website Settings” and press Enter
- Or navigate via: Home > Settings > Website Settings
- Scroll to the Home section
- Click on Upload in the Logo field
- Select your logo image file
- Once uploaded, your logo will appear in:
- The top navigation bar
- Browser tab (favicon)
- Email templates
- Print formats
- Click Save to apply changes
Additional Website Settings
While in Website Settings, you can also configure:
- Splash Image: Displayed on the login page
- Copyright: Footer copyright text
- Title Prefix: Text that appears before page titles in browser tabs
- Favicon: Custom browser tab icon
Step 2: Configure Navigation Bar Branding
Setting Up Brand Images
- Navigate to Navbar Settings
- Search for “Navbar Settings” (Ctrl/Cmd + K)
- Or go to: Home > Settings > Navbar Settings
- Locate the Brand section
- Upload your brand images: Splash Image:
- Click Upload in the Splash field
- This image appears in the brand section of your navigation
- Recommended: Square format, high resolution
- Click Upload in the Brand Image field
- This is typically your organisation’s full logo or mark
- Used in various brand representations throughout the system
- Click Save to apply your changes
Step 3: Verify Your Branding
After saving your changes, verify that your branding appears correctly:
- Refresh your browser (F5 or Ctrl/Cmd + R)
- Check the following locations:
- Top-left corner of the navigation bar (logo)
- Login page (splash image if configured)
- Brand dropdown/section (brand images)
- Print preview of any document
- Email notifications
- Test on different screen sizes to ensure responsiveness
Best Practices
Image Guidelines
- File Format: Use PNG with transparent backgrounds for logos, or SVG for scalability
- File Size: Keep images under 500KB for optimal loading times
- Resolution: Use high-resolution images that scale well (2x or 3x for retina displays)
- Aspect Ratio: Maintain consistent aspect ratios across different brand elements
Color Considerations
- Ensure logo colours contrast well with the navigation bar background
- Consider creating light and dark versions for different themes
- Test visibility on both desktop and mobile devices
Consistency
- Use the same logo across all touchpoints (website, print, email)
- Maintain brand guidelines for proper representation
- Update all brand assets simultaneously when rebranding
Troubleshooting
Logo Not Appearing
- Clear browser cache: Hard refresh with Ctrl+Shift+R (Cmd+Shift+R on Mac)
- Check file format: Ensure you’re using PNG, JPG, or SVG
- Verify file size: Files larger than 5MB may fail to upload
- Check permissions: Ensure you have the System Manager role
Image Quality Issues
- Upload higher resolution: Use at least 2x the display size
- Check compression: Avoid overly compressed images
- Use SVG format: For crisp scaling at any size
Images Not Saving
- Check file permissions: Verify write permissions on the server
- Review error logs: Check browser console for upload errors
- Verify storage space: Ensure adequate disk space on the server
- Check file upload limits: Review nginx/server upload size limits
Advanced Customization
For more advanced branding options, you can:
- Custom CSS: Add custom stylesheets via Website Settings > Custom CSS
- Theme Customisation: Modify colour schemes in Website Settings
- Custom Scripts: Add JavaScript for enhanced branding features
- Print Format: Customise document headers with Company letterhead
