Skip to main content

Branding

Customize the visual identity of Mumara Campaigns by adjusting branding elements such as logos, colors, and other design features. This page allows you to tailor the appearance of the platform to match your company's branding, ensuring consistency and professionalism across all user interfaces and communications.

Navigate to Settings → Branding to access branding options.

Page Layout​

The Branding page has four tabs:

TabPurpose
GeneralApplication title, copyright, login screen text, and help buttons
ImagesLogos, favicon, preloader, and login banner
Custom CSSAdd custom CSS to override default styles
Head CodeInsert custom code into the HTML head section

General Tab​

Application Branding​

Configure text elements that appear throughout the application.

Help Article Buttons​

Toggle to enable or disable help article buttons in the breadcrumb bar throughout the application. When enabled, users see contextual help links on each page.

Text Fields​

FieldDescription
Application titleThe name displayed in browser tabs and throughout the interface
Copyright sealCopyright text shown in the application footer (e.g., "Your Company LLC")
Login screen titleHeading displayed on the login page (e.g., "Login to the Application")
Login screen sloganSubheading or welcome text on the login page (e.g., "Use your registered email address and password to sign in")

Click Save to apply changes, or Reset to restore default values.

Images Tab​

Logos and Images​

Upload custom images to replace default branding throughout the application.

ImageSpecificationsDescription
Menu logo167 x 40 px, PNGThe logo displayed in the sidebar menu
Login logo247 x 60 px, PNGThe logo shown on the login screen
Favicon16 x 16 px, ICOThe small icon displayed in browser tabs
Preloader image230 x 230 px, JPGThe image shown while the application loads
Login banner1800 x 2000 px, PNGThe banner image displayed on the login page

Uploading Images​

  1. Click the Change button below the image you want to replace
  2. Select an image file matching the required specifications
  3. Preview the uploaded image
  4. Click Save to apply all image changes

Click Reset to restore all images to their defaults.

Image Guidelines
  • Use the exact dimensions specified for best results
  • PNG format supports transparency for logos
  • Compress images to reduce load times while maintaining quality
  • Test how images appear on different screen sizes

Custom CSS Tab​

Override and Custom CSS​

Add custom CSS rules to modify the application's appearance beyond the standard branding options.

The Custom CSS code editor accepts standard CSS syntax. Your styles are loaded after the default application styles, allowing you to override any element.

Example Customizations​

Hide specific elements:

.hide {
    display: none;
}

Change colors:

.sidebar {
    background-color: #1a1a2e;
}

Custom fonts:

body {
    font-family: 'Your Font', sans-serif;
}

Modify button styles:

.btn-primary {
    background-color: #your-brand-color;
    border-color: #your-brand-color;
}

Applying CSS​

Click Save to apply your custom CSS. Changes take effect immediately - refresh the page to see updates.

CSS Caution

Custom CSS can affect application functionality if not written carefully. Test changes thoroughly and use browser developer tools to identify the correct selectors. Avoid overly broad selectors that might have unintended effects.

Head Code Tab​

Custom Head Section​

Insert custom code to be added to the <head> section of the application. This code is included on every page.

Common Use Cases​

Load external fonts:

<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">

Add analytics tracking:

<script async src="https://www.googletagmanager.com/gtag/js?id=GA_TRACKING_ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'GA_TRACKING_ID');
</script>

Custom meta tags:

<meta name="author" content="Your Company">
<meta name="theme-color" content="#your-brand-color">

Load external JavaScript libraries:

<script src="https://cdn.example.com/library.min.js"></script>

Click Save to apply head code changes.

Script Safety

Only add code from trusted sources. Malicious scripts in the head section can compromise security or break application functionality.

Best Practices​

Image Optimization​

  • Match dimensions - Use the exact pixel sizes specified to avoid stretching or cropping
  • Compress files - Optimize images to reduce load times
  • Test transparency - Verify PNG logos display correctly on different backgrounds
  • Preview on login - Check the login page after uploading login-related images

CSS Guidelines​

  • Use specific selectors - Target exactly what you want to change
  • Test thoroughly - Check all pages after CSS modifications
  • Use browser tools - Inspect elements to find correct class names
  • Keep backups - Copy your CSS before making changes
  • Document changes - Add comments explaining what each rule does

Branding Consistency​

  • Match your brand - Use consistent colors, fonts, and imagery
  • Maintain readability - Ensure text remains legible against backgrounds
  • Consider accessibility - Test color contrast for users with visual impairments
  • Test across devices - Verify branding looks good on desktop and mobile

Troubleshooting​

Logo Not Displaying​

Possible causes:

  • Wrong image format or dimensions
  • File too large
  • Browser cache showing old image

Solutions:

  • Verify format matches requirements (PNG, ICO, JPG as specified)
  • Resize to exact dimensions
  • Clear browser cache and refresh

Custom CSS Not Working​

Possible causes:

  • CSS syntax errors
  • Selectors not specific enough
  • Browser cache

Solutions:

  • Validate CSS syntax (check for missing brackets or semicolons)
  • Use more specific selectors or add !important
  • Clear browser cache
  • Use browser developer tools to debug

Head Code Breaking Pages​

Possible causes:

  • JavaScript errors in custom scripts
  • Malformed HTML tags
  • Conflicting scripts

Solutions:

  • Check browser console for JavaScript errors
  • Validate HTML syntax
  • Remove code and add back incrementally to find the problem
  • Test in an incognito/private window

Next Steps​

Last updated on