Administrator

How do I customize my sign-in screen?

Follow
Ryan Richins
  • Agilix team member

The sign-in screen can be customized to meet your branding needs

Administrators can keep it simple and just choose a background color or design and a login logo, or completely replace the main content of the sign-in screen with HTML.

Customizable sign-in screen attributes

You can customize the following sign-in screen attributes:

  1. Theme: The default theme color to use for the header and body of the page.
  2. Login Logo: The image to use for the sign-in screen.
  3. Logo: The image to use for the application logo.
  4. Background: The background image or color to use for the default theme and sign-in screen body.
  5. Login Page: An html resource or URL that can appear where the Background color or image would be.
Customizable sign-in screen attributes

Customize using Domain Settings

  1. Open Settings in the Domain toolbar.
Customize using Domain Settings
  1. Select Styles & Themes.
  2. Upload files or make choices for the outlined fields:
    • Theme: The default theme color to use for the header and body of the page.
    • Login Logo: The image to use for the sign-in screen. If not specified, the logo image is used.
      • Required file type: PNG or JPG
      • Ideal size: 256x256
    • Logo: The image to use for the application logo.
      • Required file type: PNG or JPG
      • Ideal size: 72x72
    • Background: The background image to use for the default theme and sign-in screen body. The background image appears blurred behind the default theme color on the sign-in screen. If you don't provide a background image, a solid theme color is used.
      • Recommended file type: JPG
      • Ideal size: 1600x1200
    • Login Page: Specify either a HTML resource with a relative path or a fully qualified URL to overwrite the default sign-in screen body; this resource appears where the background color or image would be.
  3. Save.

Notes

  • Domain configuration is inherited by all subdomains unless explicitly overwritten by a subdomain.
  • For better display on high-density screen, store any image with a resolution two times the rendered size. For better performance, store large images as compressed JPG files.

Comments (10)

Sort by
Aileen Sweeney

I am testing in the echostaging area and my changes do not seem to work in Internet Explorer. Here is the URL to review. The new changes work in Chrome on a desktop, Firefox on a desktop and Safari and Chrome on an iPad. Test this URL in different browsers. I even cleared the IE Cache and history. It still displays the way it looked before I updated the settings.xml to add a theme and a style sheet.

http://oneida.echostaging.agilixapps.com/

Aileen Sweeney

I want to use the default login screens.

The only Class Selector that you show that can be overwritten is the .buzz-main-header Class.

Is there a way to overwrite the the background color for the .buzz-login-page-bottom in an uploaded stylesheet file?

I do not want to change the color of the existing background image, that I specified in the defaultTheme, because that image is also used for internal pages. I just want to specify for the login page that the buzz-login-page-bottom have a background color set to background-color: rgba(255, 255, 255, 1); I was able to upload a new Styles-boces.css file and specified that stylesheet file in my settings.xml. However, the background color on the bottom half of the page is still showing the Theme color for the theme="LightBlue". My stylesheet overwrite works and makes the bottom background color white in Chrome and Safari but not in IE. It looks like the only way around this new Login screen, being implemented on October 1, is to create separate loginPage="sign-in.html".

Brad Marshall
  • Agilix team member

Hello Aileen, we technically support only the .buzz-main-header class. However, the file does allow you to change many other styles, but would be unsupported.

That said, I looked into your issue. I will try to identify why it would be conflicting with the existing styles, but if you add one more selector it would work in IE.

For example: div.buzz-login-page div.buzz-login-page-bottom

Let me know if that works for you.

Aileen Sweeney

Adding the style for those two elements does not work in IE, I added them to a separate style sheet but the login page is still showing the background color for the theme style sheet that is in styles/themes/LightBlue-681bac5a.css - I verified and tried this out in a test sub-domain

http://oneidatest.echostaging.agilixapps.com/

Login pages were created for all of our sub-domains based on the pre-Oct 1, Buzz login page where I could customize the bottom 1/2 of the login screen for the teacher, student, parent and admin and make the top white using the .less file.

I was able to change the login top half using my style sheet over-ride file in the echostaging area but not the bottom which I want to be white. see this test page and how it looks in Chrome vs. IE

http://oneidatest.echostaging.agilixapps.com/

Here is the settings.xml related items
<defaultTheme
icon="icon.png"
background="background_images.png"
backgroundThumbnail="background_image.png"
logo="logo.png"
loginLogo="loginLogo.png"
theme="LightBlue"/>

<style>
<definition-list>
<definition path="variables.less" order="1" />
</definition-list>
<file-list key="path">
<file path="Styles-boces.css" order="1" />
</file-list>
</style>

Brad Marshall
  • Agilix team member

In your CSS file, change the selector to:

div.buzz-login-page div.buzz-login-page-bottom

Note, on the second class I also specified "div". This is different than your current CSS file on your test site.

Brad Marshall
  • Agilix team member

Also, I am seeing some other problems with your CSS file. You specify a couple of classes without a period. For example, you have "buzz-main-nav" when it should be ".buzz-main-nav".

Aileen Sweeney

Thanks for catching this. My eyes were going buggy. This works now.

Brad Marshall wrote

In your CSS file, change the selector to:
div.buzz-login-page div.buzz-login-page-bottom
Note, on the second class I also specified "div". This is different than your current CSS file on your test site.
I fixed the other issue you pointed out too. This now shows correctly in IE too. YAHOO

Brad Marshall
  • Agilix team member

Great to hear that, Aileen!

Aileen Sweeney

What is the ideal, recommend dimension/size for a course card image, for all devices (phones,tablets and desktop computers)?

Brad Marshall
  • Agilix team member

We recommend images to be twice as large as displayed. Currently, the Course Card is displayed at 175px by 175px. This means that I would recommend 350px by 350px.

Please sign in to leave a comment.