<h2 class="PlaygroundEditorTheme__h2" dir="ltr">Introduction</h2>Customizing your JuggleHire instance's branding helps create a consistent and professional experience for your candidates and team members. Through the admin settings panel, you can easily update various branding elements to align with your organization's visual identity. <h2 class="PlaygroundEditorTheme__h2" dir="ltr">Accessing Branding Settings</h2><ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">URL: Navigate to `/admin/brand-settings` in your JuggleHire installation</li><li value="2" class="PlaygroundEditorTheme__listItem">Access: Only administrators have permission to modify branding settings</li><li value="3" class="PlaygroundEditorTheme__listItem">Location: Find the branding section in the admin settings dashboard</li></ul> <h2 class="PlaygroundEditorTheme__h2" dir="ltr">Available Customization Options</h2><h3 class="PlaygroundEditorTheme__h3" dir="ltr">Application Name</h3><ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">Update the name that appears throughout the application</li><li value="2" class="PlaygroundEditorTheme__listItem">This name will be displayed in:</li><li value="3" class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__nestedListItem"><ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">Application header</li><li value="2" class="PlaygroundEditorTheme__listItem">Browser title</li><li value="3" class="PlaygroundEditorTheme__listItem">Email communications</li><li value="4" class="PlaygroundEditorTheme__listItem">System-generated documents</li></ul></li></ul> <h3 class="PlaygroundEditorTheme__h3" dir="ltr">Logo Configuration</h3><ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">Upload Requirements: </li><li value="2" class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__nestedListItem"><ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">Recommended size: 180x60 pixels</li><li value="2" class="PlaygroundEditorTheme__listItem">Supported formats: PNG, JPG, SVG</li><li value="3" class="PlaygroundEditorTheme__listItem">Maximum file size: 2MB</li></ul></li><li value="2" class="PlaygroundEditorTheme__listItem">Your logo will appear in the application header and email templates </li></ul><h3 class="PlaygroundEditorTheme__h3" dir="ltr">Favicon Settings</h3><ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">Upload Requirements: </li><li value="2" class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__nestedListItem"><ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">Recommended size: 32x32 or 512x512 pixels</li><li value="2" class="PlaygroundEditorTheme__listItem">Format: SVG, PNG</li><li value="3" class="PlaygroundEditorTheme__listItem">Maximum file size: 1MB</li></ul></li><li value="2" class="PlaygroundEditorTheme__listItem">This icon appears in browser tabs and bookmarks </li></ul><h3 class="PlaygroundEditorTheme__h3" dir="ltr">Color Scheme</h3><ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">Choose your primary brand color</li><li value="2" class="PlaygroundEditorTheme__listItem">The selected color will be applied to:</li><li value="3" class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__nestedListItem"><ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">Buttons and interactive elements</li><li value="2" class="PlaygroundEditorTheme__listItem">Navigation highlights</li><li value="3" class="PlaygroundEditorTheme__listItem">Important UI components </li></ul></li></ul><h2 class="PlaygroundEditorTheme__h2" dir="ltr">How to Update Branding</h2><ol class="PlaygroundEditorTheme__ol1"><li value="1" class="PlaygroundEditorTheme__listItem">Log in to your JuggleHire admin account</li><li value="2" class="PlaygroundEditorTheme__listItem">Navigate to `/admin/brand-settings`</li><li value="3" class="PlaygroundEditorTheme__listItem">Locate the "Branding" section</li><li value="4" class="PlaygroundEditorTheme__listItem">Update desired elements:</li><li value="5" class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__nestedListItem"><ol class="PlaygroundEditorTheme__ol2"><li value="1" class="PlaygroundEditorTheme__listItem">Enter new application name</li><li value="2" class="PlaygroundEditorTheme__listItem">Upload new logo/favicon</li><li value="3" class="PlaygroundEditorTheme__listItem">Select brand colors</li></ol></li><li value="5" class="PlaygroundEditorTheme__listItem">Click "Save Changes" to apply updates </li></ol><h2 class="PlaygroundEditorTheme__h2" dir="ltr">Verifying Changes</h2>After saving your branding updates:<ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">Refresh your browser to see the new branding</li><li value="2" class="PlaygroundEditorTheme__listItem">Check different pages to ensure consistent application</li><li value="3" class="PlaygroundEditorTheme__listItem">Verify email templates reflect the new branding</li><li value="4" class="PlaygroundEditorTheme__listItem">Test the favicon in different browsers </li></ul><h2 class="PlaygroundEditorTheme__h2" dir="ltr">Best Practices</h2><ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">Use high-quality images for logo</li><li value="2" class="PlaygroundEditorTheme__listItem">Ensure your logo has adequate contrast with the background</li><li value="3" class="PlaygroundEditorTheme__listItem">Test your branding across different devices and screen sizes</li><li value="4" class="PlaygroundEditorTheme__listItem">Keep backup copies of your branding assets</li></ul> <h2 class="PlaygroundEditorTheme__h2" dir="ltr">Need Help?</h2>If you encounter any issues while updating your branding: <ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">Double-check file requirements</li><li value="2" class="PlaygroundEditorTheme__listItem">Clear your browser cache by running your-app.com/run-optimize</li><li value="3" class="PlaygroundEditorTheme__listItem">Contact support if problems persist</li></ul> Your JuggleHire installation should now reflect your organization's brand identity across all touchpoints. <img src="https://firebasestorage.googleapis.com/v0/b/click-connector-staging.appspot.com/o/83c890_image-(18).1734332606076.webp?alt=media" alt="" width="inherit" height="inherit"><img src="https://firebasestorage.googleapis.com/v0/b/click-connector-staging.appspot.com/o/83c890_image-(19).1734332641950.webp?alt=media" alt="" width="inherit" height="inherit">

This guide explains how to customize your JuggleHire application's branding elements, including application name, logo, favicon, and color scheme, to match your organization's identity.


## Introduction

Customizing your****JuggleHire****instance's branding helps create a consistent and professional experience for your candidates and team members. Through the admin settings panel, you can easily update various branding elements to align with your organization's visual identity.

## Accessing Branding Settings

* ****URL****: Navigate to \`/admin/brand-settings\` in your****JuggleHire****installation
* ****Access****: Only administrators have permission to modify branding settings
* ****Location****: Find the branding section in the admin settings dashboard

## Available Customization Options

### Application Name

* Update the name that appears throughout the application
* This name will be displayed in:
* * Application header
  * Browser title
  * Email communications
  * System-generated documents

### Logo Configuration

* ****Upload Requirements****:
* * Recommended size: 180x60 pixels
  * Supported formats: PNG, JPG, SVG
  * Maximum file size: 2MB
* Your logo will appear in the application header and email templates

### Favicon Settings

* ****Upload Requirements:****
* * Recommended size: 32x32 or 512x512 pixels
  * Format: SVG, PNG
  * Maximum file size: 1MB
* This icon appears in browser tabs and bookmarks

### Color Scheme

* Choose your primary brand color
* The selected color will be applied to:
* * Buttons and interactive elements
  * Navigation highlights
  * Important UI components

## How to Update Branding

1. Log in to your****JuggleHire****admin account
2. Navigate to \`/admin/brand-settings\`
3. Locate the "Branding" section
4. Update desired elements:
5. 1. Enter new application name
   2. Upload new logo/favicon
   3. Select brand colors
6. Click "Save Changes" to apply updates

## Verifying Changes

After saving your branding updates:

* Refresh your browser to see the new branding
* Check different pages to ensure consistent application
* Verify email templates reflect the new branding
* Test the favicon in different browsers

## Best Practices

* Use high-quality images for logo
* Ensure your logo has adequate contrast with the background
* Test your branding across different devices and screen sizes
* Keep backup copies of your branding assets

## Need Help?

If you encounter any issues while updating your branding:

* Double-check file requirements
* Clear your browser cache by running your-app.com/run-optimize
* Contact support if problems persist

Your****JuggleHire****installation should now reflect your organization's brand identity across all touchpoints.

![](https://firebasestorage.googleapis.com/v0/b/click-connector-staging.appspot.com/o/83c890_image-(18).1734332606076.webp?alt=media)

![](https://firebasestorage.googleapis.com/v0/b/click-connector-staging.appspot.com/o/83c890_image-(19).1734332641950.webp?alt=media)

<h1 class="PlaygroundEditorTheme__h1" dir="ltr">Branding</h1><ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">How to change branding information, name, logo, favicon, application color etc.</li></ul><h2 class="PlaygroundEditorTheme__h2" dir="ltr">Overview</h2>This&nbsp;document&nbsp;outlines the process for managing&nbsp;branding settings within&nbsp;the&nbsp;application. Administrators can&nbsp;update&nbsp;various&nbsp;branding&nbsp;elements, including the application name, logo, favicon, and application&nbsp;color, through&nbsp;the&nbsp;/admin/settings&nbsp;page.<img src="https://firebasestorage.googleapis.com/v0/b/click-connector-staging.appspot.com/o/83c890_image-(17).1734332551355.webp?alt=media" alt="" width="inherit" height="inherit"><h2 class="PlaygroundEditorTheme__h2" dir="ltr">Features</h2><ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">Application&nbsp;Name: Allows&nbsp;the&nbsp;administrator&nbsp;to&nbsp;change&nbsp;the name of&nbsp;the&nbsp;application as displayed&nbsp;to users.</li></ul>2.Logo:Enables&nbsp;the upload&nbsp;of&nbsp;a new logo&nbsp;image that&nbsp;represents the application.3.Favicon:Allows the upload&nbsp;of&nbsp;a&nbsp;favicon image that appears&nbsp;in the browser&nbsp;tab.4.Application Color:Provides an&nbsp;option&nbsp;to&nbsp;set the&nbsp;primary&nbsp;color&nbsp;of the&nbsp;application&nbsp;interface.<h2 class="PlaygroundEditorTheme__h2" dir="ltr">Accessing&nbsp;Branding&nbsp;Settings</h2><ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">URL:&nbsp;/admin/settings</li><li value="2" class="PlaygroundEditorTheme__listItem">Access&nbsp;Level: This page&nbsp;is&nbsp;restricted&nbsp;to users&nbsp;with&nbsp;administrative&nbsp;privileges.</li></ul><h2 class="PlaygroundEditorTheme__h2" dir="ltr">User Interface</h2>The&nbsp;branding&nbsp;settings page&nbsp;consists&nbsp;of a form&nbsp;with&nbsp;the&nbsp;following&nbsp;fields:1.Application Name:<ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">Type: Text Input</li><li value="2" class="PlaygroundEditorTheme__listItem">Description: Enter&nbsp;the desired&nbsp;name for&nbsp;the&nbsp;application.</li></ul>2.Logo:<ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">Type: File Upload</li><li value="2" class="PlaygroundEditorTheme__listItem">Description: Upload an image&nbsp;file&nbsp;to&nbsp;be used&nbsp;as&nbsp;the&nbsp;application&nbsp;logo.</li></ul>3.Favicon:<ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">Type: File Upload</li><li value="2" class="PlaygroundEditorTheme__listItem">Description: Upload&nbsp;an&nbsp;image&nbsp;file&nbsp;to be&nbsp;used as&nbsp;the favicon.</li></ul><img src="https://firebasestorage.googleapis.com/v0/b/click-connector-staging.appspot.com/o/83c890_image-(18).1734332606076.webp?alt=media" alt="" width="inherit" height="inherit">4. Application Color:<ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">Type: Color&nbsp;Picker</li><li value="2" class="PlaygroundEditorTheme__listItem">Description: Select the primary&nbsp;color&nbsp;for the application&nbsp;interface</li></ul><img src="https://firebasestorage.googleapis.com/v0/b/click-connector-staging.appspot.com/o/83c890_image-(19).1734332641950.webp?alt=media" alt="" width="inherit" height="inherit"><h2 class="PlaygroundEditorTheme__h2" dir="ltr">Saving&nbsp;Changes</h2><ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">A&nbsp;success&nbsp;message&nbsp;will&nbsp;be&nbsp;displayed&nbsp;to&nbsp;confirm that&nbsp;the branding&nbsp;settings have&nbsp;been updated.</li></ul><h2 class="PlaygroundEditorTheme__h2" dir="ltr">Displaying Branding Information</h2>The updated branding&nbsp;information&nbsp;will be reflected&nbsp;throughout&nbsp;the&nbsp;application, including:<ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">The&nbsp;application name&nbsp;displayed in&nbsp;the header&nbsp;and title&nbsp;tags.</li><li value="2" class="PlaygroundEditorTheme__listItem">The&nbsp;logo&nbsp;displayed in the&nbsp;header&nbsp;section.</li><li value="3" class="PlaygroundEditorTheme__listItem">The favicon&nbsp;shown in&nbsp;the&nbsp;browser tab.</li><li value="4" class="PlaygroundEditorTheme__listItem">The&nbsp;primary color&nbsp;applied&nbsp;to&nbsp;the application’s&nbsp;user&nbsp;interface.</li></ul><h2 class="PlaygroundEditorTheme__h2" dir="ltr">Conclusion</h2>This documentation&nbsp;provides a&nbsp;comprehensive&nbsp;overview of the branding settings&nbsp;feature within&nbsp;the&nbsp;application. By following the&nbsp;outlined&nbsp;processes, administrators&nbsp;can effectively&nbsp;manage the&nbsp;branding elements&nbsp;to ensure a consistent and appealing&nbsp;user experience.

Branding Customization

How to change branding information, name, logo, favicon, application color etc. <h2 class="PlaygroundEditorTheme__h2" dir="ltr">Overview</h2>This&nbsp;document&nbsp;outlines the process for managing&nbsp;branding settings within&nbsp;the&nbsp;application. Administrators can&nbsp;update&nbsp;various&nbsp;branding&nbsp;elements, including the application name, logo, favicon, and application&nbsp;color, through&nbsp;the&nbsp;/admin/settings&nbsp;page.<img src="https://firebasestorage.googleapis.com/v0/b/click-connector-staging.appspot.com/o/83c890_image-(17).1734332551355.webp?alt=media" alt="" width="inherit" height="inherit"><h2 class="PlaygroundEditorTheme__h2" dir="ltr">Features</h2><ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">Application&nbsp;Name: Allows&nbsp;the&nbsp;administrator&nbsp;to&nbsp;change&nbsp;the name of&nbsp;the&nbsp;application as displayed&nbsp;to users.</li></ul>2.Logo:Enables&nbsp;the upload&nbsp;of&nbsp;a new logo&nbsp;image that&nbsp;represents the application.3.Favicon:Allows the upload&nbsp;of&nbsp;a&nbsp;favicon image that appears&nbsp;in the browser&nbsp;tab.4.Application Color:Provides an&nbsp;option&nbsp;to&nbsp;set the&nbsp;primary&nbsp;color&nbsp;of the&nbsp;application&nbsp;interface.<h2 class="PlaygroundEditorTheme__h2" dir="ltr">Accessing&nbsp;Branding&nbsp;Settings</h2><ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">URL:&nbsp;/admin/settings</li><li value="2" class="PlaygroundEditorTheme__listItem">Access&nbsp;Level: This page&nbsp;is&nbsp;restricted&nbsp;to users&nbsp;with&nbsp;administrative&nbsp;privileges.</li></ul><h2 class="PlaygroundEditorTheme__h2" dir="ltr">User Interface</h2>The&nbsp;branding&nbsp;settings page&nbsp;consists&nbsp;of a form&nbsp;with&nbsp;the&nbsp;following&nbsp;fields:1.Application Name:<ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">Type: Text Input</li><li value="2" class="PlaygroundEditorTheme__listItem">Description: Enter&nbsp;the desired&nbsp;name for&nbsp;the&nbsp;application.</li></ul>2.Logo:<ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">Type: File Upload</li><li value="2" class="PlaygroundEditorTheme__listItem">Description: Upload an image&nbsp;file&nbsp;to&nbsp;be used&nbsp;as&nbsp;the&nbsp;application&nbsp;logo.</li></ul>3.Favicon:<ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">Type: File Upload</li><li value="2" class="PlaygroundEditorTheme__listItem">Description: Upload&nbsp;an&nbsp;image&nbsp;file&nbsp;to be&nbsp;used as&nbsp;the favicon.</li></ul><img src="https://firebasestorage.googleapis.com/v0/b/click-connector-staging.appspot.com/o/83c890_image-(18).1734332606076.webp?alt=media" alt="" width="inherit" height="inherit">4. Application Color:<ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">Type: Color&nbsp;Picker</li><li value="2" class="PlaygroundEditorTheme__listItem">Description: Select the primary&nbsp;color&nbsp;for the application&nbsp;interface</li></ul><img src="https://firebasestorage.googleapis.com/v0/b/click-connector-staging.appspot.com/o/83c890_image-(19).1734332641950.webp?alt=media" alt="" width="inherit" height="inherit"><h2 class="PlaygroundEditorTheme__h2" dir="ltr">Saving&nbsp;Changes</h2><ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">A&nbsp;success&nbsp;message&nbsp;will&nbsp;be&nbsp;displayed&nbsp;to&nbsp;confirm that&nbsp;the branding&nbsp;settings have&nbsp;been updated.</li></ul><h2 class="PlaygroundEditorTheme__h2" dir="ltr">Displaying Branding Information</h2>The updated branding&nbsp;information&nbsp;will be reflected&nbsp;throughout&nbsp;the&nbsp;application, including:<ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">The&nbsp;application name&nbsp;displayed in&nbsp;the header&nbsp;and title&nbsp;tags.</li><li value="2" class="PlaygroundEditorTheme__listItem">The&nbsp;logo&nbsp;displayed in the&nbsp;header&nbsp;section.</li><li value="3" class="PlaygroundEditorTheme__listItem">The favicon&nbsp;shown in&nbsp;the&nbsp;browser tab.</li><li value="4" class="PlaygroundEditorTheme__listItem">The&nbsp;primary color&nbsp;applied&nbsp;to&nbsp;the application’s&nbsp;user&nbsp;interface.</li></ul><h2 class="PlaygroundEditorTheme__h2" dir="ltr">Conclusion</h2>This documentation&nbsp;provides a&nbsp;comprehensive&nbsp;overview of the branding settings&nbsp;feature within&nbsp;the&nbsp;application. By following the&nbsp;outlined&nbsp;processes, administrators&nbsp;can effectively&nbsp;manage the&nbsp;branding elements&nbsp;to ensure a consistent and appealing&nbsp;user experience.

<h2 class="PlaygroundEditorTheme__h2" dir="ltr">Overview</h2>This&nbsp;document&nbsp;outlines the process for managing&nbsp;branding settings within&nbsp;the&nbsp;application. Administrators can&nbsp;update&nbsp;various&nbsp;branding&nbsp;elements, including the application name, logo, favicon, and application&nbsp;color, through&nbsp;the&nbsp;/admin/settings&nbsp;page.<img src="https://firebasestorage.googleapis.com/v0/b/click-connector-staging.appspot.com/o/83c890_image-(17).1734332551355.webp?alt=media" alt="" width="inherit" height="inherit"><h2 class="PlaygroundEditorTheme__h2" dir="ltr">Features</h2><ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">Application&nbsp;Name: Allows&nbsp;the&nbsp;administrator&nbsp;to&nbsp;change&nbsp;the name of&nbsp;the&nbsp;application as displayed&nbsp;to users.</li></ul>2.Logo:Enables&nbsp;the upload&nbsp;of&nbsp;a new logo&nbsp;image that&nbsp;represents the application.3.Favicon:Allows the upload&nbsp;of&nbsp;a&nbsp;favicon image that appears&nbsp;in the browser&nbsp;tab.4.Application Color:Provides an&nbsp;option&nbsp;to&nbsp;set the&nbsp;primary&nbsp;color&nbsp;of the&nbsp;application&nbsp;interface.<h2 class="PlaygroundEditorTheme__h2" dir="ltr">Accessing&nbsp;Branding&nbsp;Settings</h2><ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">URL:&nbsp;/admin/settings</li><li value="2" class="PlaygroundEditorTheme__listItem">Access&nbsp;Level: This page&nbsp;is&nbsp;restricted&nbsp;to users&nbsp;with&nbsp;administrative&nbsp;privileges.</li></ul><h2 class="PlaygroundEditorTheme__h2" dir="ltr">User Interface</h2>The&nbsp;branding&nbsp;settings page&nbsp;consists&nbsp;of a form&nbsp;with&nbsp;the&nbsp;following&nbsp;fields:1.Application Name:<ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">Type: Text Input</li><li value="2" class="PlaygroundEditorTheme__listItem">Description: Enter&nbsp;the desired&nbsp;name for&nbsp;the&nbsp;application.</li></ul>2.Logo:<ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">Type: File Upload</li><li value="2" class="PlaygroundEditorTheme__listItem">Description: Upload an image&nbsp;file&nbsp;to&nbsp;be used&nbsp;as&nbsp;the&nbsp;application&nbsp;logo.</li></ul>3.Favicon:<ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">Type: File Upload</li><li value="2" class="PlaygroundEditorTheme__listItem">Description: Upload&nbsp;an&nbsp;image&nbsp;file&nbsp;to be&nbsp;used as&nbsp;the favicon.</li></ul><img src="https://firebasestorage.googleapis.com/v0/b/click-connector-staging.appspot.com/o/83c890_image-(18).1734332606076.webp?alt=media" alt="" width="inherit" height="inherit">4. Application Color:<ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">Type: Color&nbsp;Picker</li><li value="2" class="PlaygroundEditorTheme__listItem">Description: Select the primary&nbsp;color&nbsp;for the application&nbsp;interface</li></ul><img src="https://firebasestorage.googleapis.com/v0/b/click-connector-staging.appspot.com/o/83c890_image-(19).1734332641950.webp?alt=media" alt="" width="inherit" height="inherit"><h2 class="PlaygroundEditorTheme__h2" dir="ltr">Saving&nbsp;Changes</h2><ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">A&nbsp;success&nbsp;message&nbsp;will&nbsp;be&nbsp;displayed&nbsp;to&nbsp;confirm that&nbsp;the branding&nbsp;settings have&nbsp;been updated.</li></ul><h2 class="PlaygroundEditorTheme__h2" dir="ltr">Displaying Branding Information</h2>The updated branding&nbsp;information&nbsp;will be reflected&nbsp;throughout&nbsp;the&nbsp;application, including:<ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">The&nbsp;application name&nbsp;displayed in&nbsp;the header&nbsp;and title&nbsp;tags.</li><li value="2" class="PlaygroundEditorTheme__listItem">The&nbsp;logo&nbsp;displayed in the&nbsp;header&nbsp;section.</li><li value="3" class="PlaygroundEditorTheme__listItem">The favicon&nbsp;shown in&nbsp;the&nbsp;browser tab.</li><li value="4" class="PlaygroundEditorTheme__listItem">The&nbsp;primary color&nbsp;applied&nbsp;to&nbsp;the application’s&nbsp;user&nbsp;interface.</li></ul><h2 class="PlaygroundEditorTheme__h2" dir="ltr">Conclusion</h2>This documentation&nbsp;provides a&nbsp;comprehensive&nbsp;overview of the branding settings&nbsp;feature within&nbsp;the&nbsp;application. By following the&nbsp;outlined&nbsp;processes, administrators&nbsp;can effectively&nbsp;manage the&nbsp;branding elements&nbsp;to ensure a consistent and appealing&nbsp;user experience.

<h2 class="PlaygroundEditorTheme__h2" dir="ltr">Introduction</h2>Customizing your RecruitX instance's branding helps create a consistent and professional experience for your candidates and team members. Through the admin settings panel, you can easily update various branding elements to align with your organization's visual identity. <h2 class="PlaygroundEditorTheme__h2" dir="ltr">Accessing Branding Settings</h2><ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">URL: Navigate to `/admin/brand-settings` in your RecruitX installation</li><li value="2" class="PlaygroundEditorTheme__listItem">Access: Only administrators have permission to modify branding settings</li><li value="3" class="PlaygroundEditorTheme__listItem">Location: Find the branding section in the admin settings dashboard</li></ul> <h2 class="PlaygroundEditorTheme__h2" dir="ltr">Available Customization Options</h2><h3 class="PlaygroundEditorTheme__h3" dir="ltr">Application Name</h3><ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">Update the name that appears throughout the application</li><li value="2" class="PlaygroundEditorTheme__listItem">This name will be displayed in:</li><li value="3" class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__nestedListItem"><ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">Application header</li><li value="2" class="PlaygroundEditorTheme__listItem">Browser title</li><li value="3" class="PlaygroundEditorTheme__listItem">Email communications</li><li value="4" class="PlaygroundEditorTheme__listItem">System-generated documents</li></ul></li></ul> <h3 class="PlaygroundEditorTheme__h3" dir="ltr">Logo Configuration</h3><ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">Upload Requirements: </li><li value="2" class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__nestedListItem"><ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">Recommended size: 180x60 pixels</li><li value="2" class="PlaygroundEditorTheme__listItem">Supported formats: PNG, JPG, SVG</li><li value="3" class="PlaygroundEditorTheme__listItem">Maximum file size: 2MB</li></ul></li><li value="2" class="PlaygroundEditorTheme__listItem">Your logo will appear in the application header and email templates </li></ul><h3 class="PlaygroundEditorTheme__h3" dir="ltr">Favicon Settings</h3><ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">Upload Requirements: </li><li value="2" class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__nestedListItem"><ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">Recommended size: 32x32 or 512x512 pixels</li><li value="2" class="PlaygroundEditorTheme__listItem">Format: SVG, PNG</li><li value="3" class="PlaygroundEditorTheme__listItem">Maximum file size: 1MB</li></ul></li><li value="2" class="PlaygroundEditorTheme__listItem">This icon appears in browser tabs and bookmarks </li></ul><h3 class="PlaygroundEditorTheme__h3" dir="ltr">Color Scheme</h3><ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">Choose your primary brand color</li><li value="2" class="PlaygroundEditorTheme__listItem">The selected color will be applied to:</li><li value="3" class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__nestedListItem"><ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">Buttons and interactive elements</li><li value="2" class="PlaygroundEditorTheme__listItem">Navigation highlights</li><li value="3" class="PlaygroundEditorTheme__listItem">Important UI components </li></ul></li></ul><h2 class="PlaygroundEditorTheme__h2" dir="ltr">How to Update Branding</h2><ol class="PlaygroundEditorTheme__ol1"><li value="1" class="PlaygroundEditorTheme__listItem">Log in to your RecruitX admin account</li><li value="2" class="PlaygroundEditorTheme__listItem">Navigate to `/admin/brand-settings`</li><li value="3" class="PlaygroundEditorTheme__listItem">Locate the "Branding" section</li><li value="4" class="PlaygroundEditorTheme__listItem">Update desired elements:</li><li value="5" class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__nestedListItem"><ol class="PlaygroundEditorTheme__ol2"><li value="1" class="PlaygroundEditorTheme__listItem">Enter new application name</li><li value="2" class="PlaygroundEditorTheme__listItem">Upload new logo/favicon</li><li value="3" class="PlaygroundEditorTheme__listItem">Select brand colors</li></ol></li><li value="5" class="PlaygroundEditorTheme__listItem">Click "Save Changes" to apply updates </li></ol><h2 class="PlaygroundEditorTheme__h2" dir="ltr">Verifying Changes</h2>After saving your branding updates:<ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">Refresh your browser to see the new branding</li><li value="2" class="PlaygroundEditorTheme__listItem">Check different pages to ensure consistent application</li><li value="3" class="PlaygroundEditorTheme__listItem">Verify email templates reflect the new branding</li><li value="4" class="PlaygroundEditorTheme__listItem">Test the favicon in different browsers </li></ul><h2 class="PlaygroundEditorTheme__h2" dir="ltr">Best Practices</h2><ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">Use high-quality images for logo</li><li value="2" class="PlaygroundEditorTheme__listItem">Ensure your logo has adequate contrast with the background</li><li value="3" class="PlaygroundEditorTheme__listItem">Test your branding across different devices and screen sizes</li><li value="4" class="PlaygroundEditorTheme__listItem">Keep backup copies of your branding assets</li></ul> <h2 class="PlaygroundEditorTheme__h2" dir="ltr">Need Help?</h2>If you encounter any issues while updating your branding: <ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">Double-check file requirements</li><li value="2" class="PlaygroundEditorTheme__listItem">Clear your browser cache by running your-app.com/run-optimize</li><li value="3" class="PlaygroundEditorTheme__listItem">Contact support if problems persist</li></ul> Your RecruitX installation should now reflect your organization's brand identity across all touchpoints. <img src="https://firebasestorage.googleapis.com/v0/b/click-connector-staging.appspot.com/o/83c890_image-(18).1734332606076.webp?alt=media" alt="" width="inherit" height="inherit"><img src="https://firebasestorage.googleapis.com/v0/b/click-connector-staging.appspot.com/o/83c890_image-(19).1734332641950.webp?alt=media" alt="" width="inherit" height="inherit">

JuggleHire is a recruitment software for small businesses. It is self-hosted and currently available on Envato market. This documentation helps you to understand the software and how to use it. From installation to customization.

Was this article helpful?