cancel
Showing results for 
Search instead for 
Did you mean: 
Highlighted
Community Member

How to Center Login Logo

Jump to solution

I am updating our theme for Canvas using the Theme Editor. I've been able to make most of the adjustments we want, but when I update the "Login Logo," it always is aligned to the left. I've tried adding whitespace to the logo image and saving it as a PNG and as a JPEG, but it makes the logo smaller and aligns it to the left. I didn't find any help in the How do I create a theme for an account using the Theme Editor? Guide. We don't use custom CSS or JavaScript, so is there anything we can do to get it centered? The login page feels strange and unbalanced, so any suggestions are welcome.

Tags (1)
1 Solution

Accepted Solutions
Highlighted
Community Coach
Community Coach

All righty, I have tinkered around and come up with the following for you:

302528_pastedImage_1.png

All you need to do is create a file called something.css with the following text in it:


.ic-Login-header {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}


And upload that to your theme and apply. As with anything like this. I strongly suggest doing this in your test/beta environment first and checking that nothing else is affected, before you put it into production. Just in case (as I have not tested extensively, though did a few spot checks).

Does that do what you are hoping for?

Cheers,
Stuart

View solution in original post

6 Replies
Highlighted
Community Coach
Community Coach

Hi shanaegalloway@nnu.edu,

Do you have a copy of the logo you could share please, I would like to have a look in my instance with the same file to see what I can come up with.

Many thanks,
Stuart

Highlighted

Hi stuart.ryan@collaborative.education,

Thanks for your reply. That would be appreciated!

We have the logo below applied to the login screen of this NNU instance of Canvas.

Northwest Nazarene University logo

I tried various iterations of it both as PNG and JPEG, but that logo is the one currently applied to the login screen.

Thanks, again!

Highlighted

Hi shanaegalloway@nnu.edu,

I have had a look, play, and tinker, and without the use of Custom CSS, I don't think it is possible to change (by modifying the image dimensions etc).

Is custom CSS you are open to, I know you mentioned you don't have any, was unsure if this was policy related, or simply having none at this stage?

I look forward to hearing from you.

Cheers,
Stuart

Highlighted

Hi stuart.ryan@collaborative.education,

Thanks so much for digging into it for us!

We're not opposed to custom CSS. We just don't have anyone who can create it or revise changes are needed.

This is definitely not a priority matter for us, but we wanted to make sure we looked into our immediate capabilities before deciding if/when we want to tackle CSS.

Thanks again,

Shanae

Highlighted
Community Coach
Community Coach

All righty, I have tinkered around and come up with the following for you:

302528_pastedImage_1.png

All you need to do is create a file called something.css with the following text in it:


.ic-Login-header {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}


And upload that to your theme and apply. As with anything like this. I strongly suggest doing this in your test/beta environment first and checking that nothing else is affected, before you put it into production. Just in case (as I have not tested extensively, though did a few spot checks).

Does that do what you are hoping for?

Cheers,
Stuart

View solution in original post

Highlighted

Wow! Thanks so much, stuart.ryan@collaborative.education! You have been beyond helpful.