Question

CSS: How can you use CSS to change the appearance of your Login Page?

  • 6 December 2022
  • 3 replies
  • 253 views
C
Rank

I am a CSS newbie, and I’m finding so many good CSS code ideas here in the community. I’m wondering if anyone has code examples for the following Login page adjustments I’m trying to make. Any tips would be greatly appreciated.

 

I’m trying to accomplish two things: 

 

First, I’d like to change the wording on the SSO Login Button to say something similar to what it says on the Docebo University Login page. See screenshot. I would like our button to say Onna Employee Login. 

 

The second thing I’d like to accomplish is changing the header background color. I’ve figured out how to do this on all pages once you’re logged in, but the changes are not reflecting on the Login page. 

 

Thanks so much for any and all tips! 

 

3 replies

C
Rank

Update: I discovered how to change the wording on the SAML SSO button on the login page. You can do this in the Localization tool. I typed in SAML SSO in the search and was able to change it that way. 

K

Has anyone else discovered how we can modify the login page via CSS? I want to change its look and feel as much as possible, so it comes closer to my companies brand.

N
Rank
Userlevel 6
Badge +2

@klewis there are lots of things that could be done to re-style the login page depending on what you’re trying to do. The main limitation is that we can’t really add content to the page, we can just modify what’s already there.

 

Here’s what I’ve done with mine:

 

 

And here’s the CSS if you want to try it out:

/* Login edits-  Transparent background, aligned right, full screen */
.external-simple-signin {
display: flex;
    flex-direction: column;
    max-height: 2000px;
    position: fixed;
    height: 100%;
    top: 0;
    right: 0;
    margin-top: 52px !important;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.85) !important;
}

.external-simple-signin input[type="text"], .external-simple-signin input[type="password"] {
	background: transparent;
}

 

Reply


Terms & ConditionsCookie settings