Customizing Cockpit Branding Elements Print

Cockpit allows you to customize various branding elements to personalize your installation. This guide explains how to set up your branding images, text, and links for a consistent look across your panel.

Understanding Branding Fields

Branding Text

• Purpose: This text appears as the title in both the sidebar and login screen
• Example: "COCKPIT PANEL"
• Effect: Creates consistent branding across different parts of the interface
• Recommendation: Use your company or service name

Login Avatar Image URL

• Purpose: Displays an image on the login screen
• Format: Must be a direct image URL (jpg, png, gif)
• Example: "https://i.imgur.com/0r6SLVT.jpeg"
• Best Practices: Use a square image with dimensions of at least 100px by 100px

Branding Image URL

• Purpose: This image displays in both the login screen and sidebar
• Format: Direct image URL (jpg, png, gif)
• Example: "https://i.imgur.com/3icsq2G.png"
• Best Practices: Use a logo with transparent background for best results
• Note: This is your main branding element that appears throughout the panel

Login Avatar URL

• Purpose: Creates a clickable link on the login screen, often used to link to your profile or website
• Format: Any valid URL
• Example: "https://t.me/ianwoneill"
• Recommendation: Use your social media profile or website URL
• Display: This URL is associated with your avatar image, making the image clickable

How to Apply Branding

1. Access the Superadmin Panel
   • Log in with your Superadmin credentials
   • Navigate to the Settings area
2. Locate Branding Settings
   • Find the Branding section
   • All four fields should be filled out for complete branding
3. Enter Your Information
   • Fill in all fields with your custom content
   • For images, use direct image URLs from hosting services like Imgur
4. Save Your Changes
   • Click the Update or Save button to apply your branding
   • Changes will be immediately visible throughout your Cockpit installation

Tips for Effective Branding

• Consistency: Use images that match your brand's color scheme and style
• Image Hosting: Make sure your image hosting is reliable with good uptime
• Image Size: Optimize images for faster loading (under 500KB recommended)
• Testing: Check how your branding looks on both desktop and mobile views
• Avatar Link: Consider linking to a contact method for easy support access

By properly setting up these branding elements, you'll create a professional and cohesive look for your Cockpit panel that enhances user experience and strengthens your brand identity.