The Branding settings allow you to customize the appearance of your account and create a more consistent, white-labeled experience for your Clients. From logos and browser icons to light mode and dark mode styling, the Branding tools give you control over how your business is visually presented throughout the platform. This article will walk you through the available branding options and how to customize them.
How to get to the Branding Page
For step-by-step instructions with screenshots, see the Step-by-Step section at the bottom of this article.
Step 1: Click Business Tools
Step 2: Click the Branding tab
Branding Sections Explained
Light Mode / Dark Mode
The Light Mode and Dark Mode settings allow you to customize how your branding appears based on your Client’s device or browser theme preferences.
When 'Enable Dark Mode' is turned on, Clients using devices or browsers set to dark mode will automatically see the Dark Mode version of your branding settings. Clients using light mode will continue to see your Light Mode branding configuration.
Use the Light and Dark tabs to switch between editing each mode independently. Any branding changes you make while a mode is active will apply specifically to that display mode. This allows you to customize elements such as logos, colors, and styling separately for both light and dark viewing experiences.
Logo
The Logo section allows you to customize how your business logo and browser icon are displayed throughout the platform.
Logo Customization
Upload your business logo to display within Client-facing areas of the platform. You can further customize how the logo appears using the available display settings:
- Logo Width
- Adjusts the displayed size of your logo.
- Alignment
- Controls whether the logo is aligned to the left, center, or right side of the page.
- Top/Bottom Padding
- Adds spacing above and below the logo to help improve layout and visual balance.
*A recommended logo size of approximately 440 pixels wide by 200–300 pixels tall is suggested for best results.
Browser Icon
The Browser Icon (also known as a favicon) is the small icon displayed in browser tabs and bookmarks. Uploading a custom browser icon helps reinforce your branding throughout the user experience.
*A recommended browser icon size of 512 x 512 pixels is suggested for best quality and compatibility.
Browser Tab Preview
The Browser Tab Preview provides a preview of how your browser icon and business name will appear within a browser tab.
Background & Layout
The Background & Layout section allows you to customize the overall appearance and visual styling of your account pages. These settings help create a more branded and polished experience for your Clients.
Brand Color
The Primary Brand Color is used throughout the platform for buttons, highlights, links, and other accent elements. Selecting a brand color helps create a consistent visual identity across your account.
Background Colors
Customize the colors used throughout the platform layout:
- Content Background Color
- Controls the background color used for content containers, cards, and page sections.
- Body Background Color
- Controls the main page background color displayed behind the content areas.
Container Corners
The Corner Radius setting controls how rounded the corners of containers and content sections appear throughout the platform. Lower values create sharper corners, while higher values create a softer, more rounded appearance.
Background Image
Upload a custom background image to further personalize the appearance of your pages. Supported image formats include JPG and PNG.
Background Image Opacity
Adjusts the visibility of the background image. Lower opacity values make the image more subtle, while higher values make the image more prominent behind the page content.
Menu
The Menu section allows you to customize the appearance and styling of the platform’s navigation menu. These settings help you create a navigation experience that matches your brand and visual preferences.
Font Settings
Customize the appearance of the menu text throughout the platform:
- Font Family
- Select the font style used for menu headings and navigation items.
- Case
- Controls how menu text is displayed:
- Normal Case - Standard capitalization
- Uppercase - Displays all text in uppercase letters
- Lowercase - Displays all text in lowercase letters
- Controls how menu text is displayed:
- Weight
- Adjusts the thickness of the menu font, ranging from thin to bold/heavy text styles.
Menu Width
Controls the width of the navigation menu. Increasing the width provides more space for menu items and your logo.
Menu Colors
Customize the colors used throughout the navigation menu:
- Heading Color
- Controls the color of section headings within the menu.
- Navigation Color
- Controls the default color of navigation items.
- Selected Color
- Controls the text or icon color used for the currently selected menu item.
- Selected Background Color
- Controls the background color displayed behind the active or selected menu item.
- Hover Background Color
- Controls the background color displayed when hovering over menu items.
- Background Color
- Controls the overall background color of the navigation menu.
Menu Background
Upload a custom background image for the navigation menu to further personalize the appearance of your account.
Background Image Opacity
Adjusts the visibility of the menu background image. Lower opacity values create a more subtle effect, while higher values make the image more prominent.
Buttons & Forms
The Buttons & Forms section allows you to customize the appearance of buttons, form fields, and interactive elements throughout the platform. These settings help create a more polished and consistent experience that matches your brand styling.
Font Settings
Customize the appearance of text used within buttons and form elements:
- Font Family
- Select the font style used throughout buttons and form fields.
- Case
- Controls how button and form text is displayed:
- Normal Case - Standard capitalization
- Uppercase - Displays all text in uppercase letters
- Lowercase - Displays all text in lowercase letters
- Controls how button and form text is displayed:
- Weight
- Adjusts the thickness of the font, ranging from thin to bold/heavy styles.
Solid Button Colors
Customize the appearance of solid-style buttons:
- Text
- Controls the default text color displayed on solid buttons.
- Background
- Controls the default background color of solid buttons.
- Hover Text
- Controls the text color displayed when hovering over a solid button.
- Hover Background
- Controls the background color displayed when hovering over a solid button.
Outline Button Colors
Customize the appearance of outline-style buttons:
- Text & Border
- Controls the default text and border color of outline buttons.
- Background
- Controls the default background color of outline buttons.
- Hover Text & Border
- Controls the text and border color displayed when hovering over an outline button.
- Hover Background
- Controls the background color displayed when hovering over an outline button.
Corner Radiuses
Customize the roundness of buttons and form fields throughout the platform:
- Button Radius
- Controls how rounded button corners appear.
- Form Field Radius
- Controls how rounded form field corners appear.
Buttons & Forms Preview
The preview section provides a live example of how your buttons and form fields will appear based on your current customization settings.
Typography
The Typography section allows you to customize the fonts and text styling used throughout the platform. These settings help create a more consistent and branded reading experience for your Clients.
Headlines
Customize the appearance of headings and titles displayed throughout the platform:
- Font Family
- Select the font style used for headlines and section titles.
- Case
- Controls how headline text is displayed:
- Normal Case - Standard capitalization
- Uppercase - Displays all headline text in uppercase letters
- Lowercase - Displays all headline text in lowercase letters
- Controls how headline text is displayed:
- Headline Color
- Controls the color used for headlines and titles.
- Weight
- Adjusts the thickness of headline text, ranging from thin to bold/heavy styles.
Body Text
Customize the appearance of standard paragraph and content text:
- Font Family
- Select the font style used for body text throughout the platform.
- Case
- Controls how body text is displayed:
- Normal Case - Standard capitalization
- Uppercase - Displays all body text in uppercase letters
- Lowercase - Displays all body text in lowercase letters
- Controls how body text is displayed:
- Text Color
- Controls the color used for body text and general content.
- Weight
- Adjusts the thickness of body text, ranging from thin to bold/heavy styles.
- Adjusts the thickness of body text, ranging from thin to bold/heavy styles.
Links
- Link Color
- Controls the color used for clickable links throughout the platform.
- Controls the color used for clickable links throughout the platform.
Typography Preview
The Typography Preview section provides a live example of how your selected typography settings will appear across headlines, body text, and links.
Tags
The Tags section allows you to customize the default colors used for tags displayed throughout the platform. Tags help visually organize and categorize information, making it easier to quickly identify different types of items within your workflow.
Tag Colors
Customize the colors used for different tag types:
- Product Tag Color
- Controls the color used for Product-related tags.
- Order Tag Color
- Controls the color used for Order-related tags.
- Client Tag Color
- Controls the color used for Client-related tags.
Using distinct colors for each tag type can help improve visibility, organization, and overall user experience throughout the platform. Note: when creating specific tags, you can override the default Tag color and set a custom color for that specific tag.
Important Notes
- Until the New Interface is launched for your Clients, they will not be able to see the changes you make to the Branding page.
- All changes are immediately shown - no 'Save' necessary!
- You can still access the Code Editor, if needed, to make further customizations to your branding.
Getting to the Branding Page
Step-by-step:
Step 1: Click on the Business Tools tab in the navigation on the left-hand side of the page.
Step 2: In the sub-navigation, click the Branding tab. This will launch the Branding page where you can customize the appearance of your account.
For any additional questions, our Support team is ready to help you!
Call: (509) 515-3338
Email: Support@HDPhotoHub.com
Or use the chat button in your account for live assistance.