Portal Branding Settings: How to Customize Website and Mobile Appearance

Summary

A comprehensive guide to customizing the visual identity of your KnowledgeCity portal, including website logos, colors, banner slider configuration, and mobile app branding.

Introduction

The Portal Branding settings allow you to tailor the look and feel of your learning portal across both web and mobile platforms. This is where you upload logos, set brand colors, configure the homepage banner slider, and define the visual appearance of your mobile app. Consistent branding ensures your learners recognize your training environment while creating a professional, cohesive experience. For a complete overview of all Portal Settings tabs, refer to Understanding and Navigating Your Portal Settings in KnowledgeCity LMS.

Steps to Follow

Accessing Portal Branding Settings

Follow the steps below to access the branding configuration:

1. Log in to your KnowledgeCity LMS as a Super Admin.

2. Locate the Settings dropdown menu on the top panel of the LMS interface and select Portal Settings.

3. The Portal Settings page contains two branding-related tabs:

   • Website branding – For web portal appearance

   • App branding – For mobile application appearance

Website Branding

The Website branding tab controls how your learning portal appears to users on desktop.

Configuring Portal Logos

Three logo types can be uploaded to establish your portal's visual identity:

To upload or change a logo:

1. Click the Change Logo button next to the desired logo type.

2. Select an image file from your computer following the supported formats.

3. The new logo appears immediately in the live preview panel on the right.

Configuring Portal Theme and Colors

The Portal Theme section controls the color scheme applied throughout your website.

Portal Theme
Select from available theme options: Default, Kaleidoscope, Impulse, Dynamics, or Custom to start with a predefined color palette.

Primary Color

• The primary color applies to homepage blocks, buttons, and links.

• The main background color is automatically set to 10% opacity of your selected primary color.

• Click the color picker to select a hex value.

Secondary Color

• Toggle Add secondary color ON to enable a secondary brand color.

• The secondary color applies to additional homepage blocks, buttons, and links.

• The main background uses 10% opacity of the selected secondary color.

• Click to select a hex value or Toggle OFF to disable secondary color usage.

Footer Color

• Sets the background color for your portal footer.

A preview of the Home page button and Sign In button is available next to the color pickers, showing how your selected colors will appear on interactive elements on the learning portal.

Configuring the Banner Slider

The banner slider appears on your portal homepage and can display promotional content, or announcements.

Enable the Slider
Toggle Show slider on index page ON to display the banner slider on your homepage.

Adding and Managing Slides
Each slide can be configured with the following options:

Slide Type Dropdown
Select the content type for your slide:

• Image with text – Display an image with overlaid title and subtitle

• Image – Display an image only

• Video – Display video content (configuration options may vary)

Text Content (for Image with text type)

• Title: Enter the main heading (maximum 50 character allowed)

• Subtitle: Enter supporting text (maximum 160 character allowed)

• Translate: Click to open a form where you can set titles and subtitles for available portal languages

Destination Page Link
Enter a URL where users will be redirected when clicking the slide. Leave empty if no link is needed.

Image Uploads

Upload Methods:

• Drag and drop an image into the upload area

• Click Upload image to browse your files

• To replace an existing image, click the current image preview

Add Tint
Toggle Add tint ON to apply a semi-transparent overlay over the image, improving text readability.

Managing Multiple Slides

• Click Add slide to create additional slides

• Use the slide tabs to navigate between different slides

• Click Remove slide to delete the current slide

App Branding

The App branding tab controls how your organization appears in the KnowledgeCity mobile application.

Configuring App Logo

App Logo

• Supported formats: jpg, png, svg.

• Click Upload Logo to select an image from your computer.

• The uploaded logo appears in the live preview mockup on the right.

Configuring App Colors

Three color settings define the appearance of your mobile app:

To set colors:

1. Click the color picker next to each color field.

2. Select a color using the picker a hex value directly.

3. Changes reflect immediately in the mobile app mockup on the right.

Live Preview

The right side of the App branding tab displays a realistic mobile device mockup showing:

• Your app logo in position.

• Primary, secondary, and navigation bar colors applied to the interface.

• Real-time updates as you make changes.

Save Your Changes

After configuring your desired branding settings in either tab, scroll to the bottom of the page and click Save changes to apply all modifications. Changes will not take effect until the Save button is clicked.

Conclusion

You have successfully configured the branding settings for your KnowledgeCity LMS portal. The website logos, theme colors, banner slider, and mobile app appearance now reflect your organization's unique identity. Consistent branding across web and mobile platforms creates a professional, trustworthy learning environment that resonates with your users.