This site requires JavaScript to be enabled
External Customer KB > General > Branding
Branding
Article: KB0010427 Published: 02/06/2023 Last modified: 02/06/2023

Whether you're using OneLogin internally or providing it to your customers, it's important to have control over your platform's appearance and create an environment that reflects the visual personality of your organization. Our powerful branding options allow you to customize your OneLogin tenant with the colors, icons, and messaging that make your brand unique, so that it gives your users a consistent experience, integrates with your help desk, and matches your organization's look and feel. This article provides an overview of these branding features and how to configure them for your environment.

OneLogin Branded Login Screen

Additional branding options, such as multiple brands and advanced features, are available through the Branding API, which is currently available in Early Preview. Speak with your OneLogin account representative for more information.

To begin customizing your brand, go to Settings > Branding, enable the Custom Branding toggle and click Save. Additional branding options will appear.

Enable Custom Branding

 


 

Brand

Subdomain

Your unique subdomain identifies your OneLogin address as yours. For example, if your company is called Acme Corp, you could provide your users with the login URL https://acme.onelogin.com so they know they're in the right place. Subdomains are claimed when you sign up for an account; to change yours, reach out to OneLogin support.

Upload your Logo

Hover over the logo to upload a new image or delete one that you've previously uploaded. This replaces the OneLogin logo in the top navigation bar of the user portal and in the login form. For the best results, we recommend that you work with your designers department to choose a landscape-oriented version of your logo or brand mark and use a transparent image file. The maximum file size is 1MB.

Upload your Logo

When you upload a new logo, the preview images on this page dynamically update to show you how your logo will appear to your users after you save your changes.

Upload your Logo

Colors

Here, you can enter a hex code or use the color picker to select the colors that best represent your brand. As with the logo, the preview image lets you see how your colors will appear together once you save them.

  • The Primary Color is applied to the top navigation bar and the top banner of the login form. If your logo is white or in a light tone, it contrasts well against a dark background. For a darker logo, it will look best on a lighter color background. OneLogin's default primary color is #000000 Black.
  • The Accent Color is applied to the action buttons on each page, such as the Save or Continue buttons, as well as various other interactive elements. OneLogin's default accent color is #0093c3 Blue.
Colors

To ensure you always have a readable and attractive interface, OneLogin's algorithm uses Smart Color Logic to detect how light or dark your chosen colors are, and automatically changes its text to the right color for contrast!

Dark Text on Light Background
Light Text on Dark Background

 


 

Login Screen

This page allows you to customize the elements found on the login screen and define how users sign in to OneLogin.

Custom Login Label

This text prompts your users to enter the kind of login ID they can use to sign in. The default will depend on the authentication attributes configured for your account, or for any directories you may have integrated with OneLogin. For example, if your directories use email addresses to authenticate your users, the login label will default to Email. To choose your own label, select Custom Label and enter the text that you'd prefer.

Custom Login Label
Custom Login Label Example

Background Image

Upload image

Click Browse to choose and upload a backdrop for your login screen that resonates with your brand. We recommend an image formatted to 2560x1600 pixels, no larger than 5MB.

Upload a background image

Overlay masking color

If you have a busy backdrop image or one that isn't contrasting well with the login form, you can also choose to add an overlay color to help deemphasize it, so your users can focus on what's important, while still being able to see your recognizable brand. Select or enter any color for the overlay, and choose how strong you'd like it to appear with the Opacity slider. A color with 0% opacity will be completely invisible, while a 100% opaque overlay will appear as a completely solid color.

Background Overlay Settings

 

Background with 50% black overlay
Background with no overlay

Preview

Click Preview to view how your background image and overlay will appear to users in both desktop and mobile browsers. Note that this preview only reflects your background settings; it does not show your current login label or other login page settings.

Desktop Background Preview
Mobile Background Preview

Login help

This is an optional space where you can add additional sign-in instructions for your users in a link at the bottom of the login form.

Login Help

Login Help link example
Login Help text example

Additional Links

You can enter up to three additional links to provide for your users, either to different points in the login flow or to other support sites outside of OneLogin. You can select whether or not they open in a new tab, as well as whether they appear during initial login.

Additional Links
Additional Links Example

Show Forgot Password

Typically, if any user policy in your organization allows users to self-reset their passwords, then the Forgot Password prompt will be displayed for all users, regardless of whether their own user policy allows for self-reset. If a user's policy doesn't permit them to reset their own password, then the option will appear to be available, but will not function for them. For this reason, it's usually recommended that if you allow self-resets for some of your users, you allow them for all, to avoid a confusing user experience for those without permission.

However, if it's necessary for your organization that some of your users have self-reset access but not others, you can disable the Forgot Password prompt for all users instead, so that it never appears in the login form. Those whose policies allow them to use the password-reset tool can still access it directly at https://your-subdomain.onelogin.com/login2#action=password_reset.

Forgot Password
Forgot Password Example

Allowed Redirect Urls

Enter one or more URLs where a user can be redirected after resetting a forgotten password. On your own website, you can then direct password reset requests to this address: https://your-subdomain.onelogin.com/login2?redirect_to=your-redirect-url#action=password_reset

When a user clicks this link, they're sent to OneLogin to reset their password. Once the reset has been completed, they're then redirected to your specified URL, along with a user_identifier parameter containing their OneLogin username.

Note: Redirect URLs do not support wildcards.
Allowed Redirect URLs

Password help instructions

Enter any helpful text here that you'd like to provide for users when they sign in. This text will be displayed above the login prompt.

Password Help Instructions

Recipient Email Field

Select the user attribute with the correct email address for resetting a user's password. Any custom user fields you have configured will appear here. If no other field is selected, the OneLogin default attribute Email is used. If the user doesn't enter the correct address to match this field, the reset confirmation email won't be sent.

Note: There is currently a known issue for users of OneLogin Protect for iOS, in which iOS devices will sometimes default to using the email address associated with the user's iPhone. If your organization has iOS users configured with OneLogin Protect, we recommend leaving this setting as Email to avoid potential conflicts.

Recipient Email Field

Footer

Select if you'd like to display a narrow footer bar at the base of the login page with links for OneLogin's homepage, terms, and privacy policy. This option must be enabled by a OneLogin account manager before it appears for you.

Login Footer Settings
Login Footer Example

 


 

MFA Registration

MFA Registration Message

Enter any text that you'd prefer to replace the default message that appears when registering for Multi-Factor Authentication (MFA).

MFA Registration

 


 

Emails

Email template

OneLogin provides you with a customizable CSS email template that's used for all admin email messages sent to users through OneLogin, such as announcements, invitations, and password reset notifications. You can edit the template to customize your emails' font, colors, logo, and other formatting and styling choices.

Familiarity with HTML and CSS is strongly recommended before making changes to your email template. You can also use macros to customize emails with your unique account attributes. The {{body}} attribute must be included in the template; this is where the actual email content will be inserted.

Email Template
Email Template Example

 


 

Invites

Here, you can customize the content of user invitation emails in a variety of formats. See Inviting Users for more information.

Invites

 


 

Support

Help options

Enable this setting if you'd like to add a Help option to error messages, your users' profile menu, and the login page. This can provide custom support instructions for your users and allows them to send a support request to the email address you specify. You can also require users to complete a reCAPTCHA challenge before submitting their request.

Help Options

 

Help Options - Example Menu Button
Help Options - Example Error Button
Help Options - Example Portal Form

 

Help Options - Example Login Button
Help Options - Example Login Form

Custom error message

Here, you can customize certain error messages to advise your users how they might resolve the error. Hover your cursor over an error's tooltip to view a description of when a user will encounter the error message.

Custom error message

Choose Edit to enter the message's content or Preview to view the error as a user would see it.

Edit error message
Preview error message

Expand/Collapse Comments
:     
Was this helpful?
YesYesNoNo