SnapApp Branding & Customization

This guide covers the granular controls available within SnapApp to customize your application’s visual identity. Use these settings to align your interface with corporate brand guidelines through theme selection, color precision, and asset management.

Table of Contents

• 1. Application Settings Overview
• 2. Style & Theming
• Selecting a Theme
• Typography
• 3. Customizing Theme Colors
• Core Color Palette
• Navigation Styling
• 4. Application Branding Assets
• Core Asset Management
• Application Asset Reference Table
• 5. Global Branding (Platform-Wide)
• Global Asset Reference Table
• 6. How It Works: Branding Hierarchy
  • Where are the branding images displayed?
  • Login Screen
  • Favicon
  • SignUp Image
  • Forgot Password Page
  • 404 error page image
  • Open Graph Image

1. Application Settings Overview

Access these settings by navigating to the Application Settings panel. This section manages the identity and core styling of the individual application.

2. Style & Theming

SnapApp provides a robust theme engine that supports both proprietary frameworks and industry-standard design systems.

Selecting a Theme

The Theme Dropdown allows you to choose the foundational CSS framework for your app:

• App Themes: Choose SnapApp (default) for a modern, native experience or Material Design for a Google-inspired look.
• Bootstrap Themes: Includes popular presets such as Cerulean, Cosmo, and Cyborg.

Typography

• Font Selection: Choose your primary typeface (e.g., Product Sans).
• Google Fonts Integration: Click the Google Fonts button to browse and copy/paste the name of the font into the font text field.

3. Customizing Theme Colors

SnapApp allows for color control as well. You can click on any color bar to open the integrated color picker or manually enter RGB/HEX values.

Core Color Palette

Navigation Styling

You can independently brand the navigation bars to ensure they stand out or blend in. The Nav BG Color represents the background navigation bar color. Nav Color is the color of the buttons and text on top of the nav bar.

• Left Nav BG & Color: Customize the background and text color for the vertical sidebar.
• Top Nav BG & Color: Customize the background and text color for the horizontal header.

4. Application Branding Assets

The Application Branding section on the Application Settings page, is where you upload specific brand identity files and advanced overrides.

Core Asset Management

1. Click Browse to select files from your local machine.
2. Click Upload to save the assets to the SnapApp environment.
3. Use the View icon to preview uploaded files.

Application Asset Reference Table

After uploading new assets or updating color codes, ensure you click the Upload button at the bottom of the panel to propagate changes to the application.

5. Global Branding (Platform-Wide)

Global Branding settings manage the “entryway” to your SnapApp environment and systemic pages that are not specific to a single application.

Global Asset Reference Table

After uploading new assets or updating color codes, ensure you click the Upload button at the bottom of the panel to propagate changes to the application.

6. How It Works: Branding Hierarchy

The SnapApp codebase utilizes a “Specific-to-General” hierarchy to determine which styles are rendered.

1. Application Branding (Highest Priority): If an app has a specific color palette or logo, it overrides the global portal settings.
2. Custom CSS/JS Injection: Uploaded files in the Application Branding section take precedence over visual theme selectors for that app.
3. Global Branding (Baseline): If no application settings are defined, the platform falls back to the Global Branding defaults for items like CSS and Favicons.

Where are the branding images displayed?

Login Screen

• Login Icon: On uploading the image from branding section, this icon gets uploaded to the top of login form.

• Login Image: On uploading this image from branding section, this image will be visible in the left side of the login form.

Favicon

On uploading this image from branding section, this image will be visible with the created application.

SignUp Image

On uploading this image from branding section, this image will be visible in the left side of the signup form.

Forgot Password Page

On uploading this image from branding section, this image will be visible in the left side of the forgot password page

404 error page image

On uploading this image from branding section, this image will be visible in the left side of the 404 error page

Open Graph Image

On uploading this image from branding section, the image will be visible in the social media post along with any link.

For support, email us at snapapp@bluevector.ai