Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

LearningBuilder now allows you to use custom background images on the login page. This only applies to local logins, not oauth type login pages.

...

Overview

The standard login page can be given visual flair and branding by using a custom background image.

Configuration instructions

1

Create the image

Files should:

  • Be 16:9 ratio

  • At least 2000px on the longest side

...

  • No more than 72dpi

...

  • In JPG format

Keep the file size as small as possible while keeping the best quality.

...

2

Upload the image

...

to

...

your /client_assets folder

...

Go to your tenant customization are under Admin > Tenant.

...

Find the tenant you want to update and click the “edit” icon.

...

Note

This may require technical support.

Alternatively, you can host the image on any external hosting provider; LearningBuilder just needs a way to reference it via URL.

3

Modify the tenant-specific config settings in Admin → Tenant

Configure the relevant tenant’s Custom CSS using this code:

Code Block
.url-account-login #responsive-main {
background: url(/Content/client_assets/DEFAULT/login-desktop.jpg);
background-size: cover;
}

.login-table-content {
background: rgba(255, 255, 255, .5);
border: 3px solid #eeeeee;
padding:10px;
}

...

Be sure to change the link on line 2

...

to your

...

folder and

...

image name

...

Line 6 sets the background color / opacity behind the left side content

...

blocks so

...

that text is legible against the background

...

. If you don’t need this,

...

delete lines 6 through 10.

...

Example

...