Fixing that pesky Learn Ultra login page logo issue

Blog Post created by nc36270 on Aug 16, 2019

I take no credit for the content of this blog post. The work involved here is all Santiago Vanegas and going forward I'm going to get him to write his own blog posts with these nuggets in.


One of the things we've heard quite a bit when customers start doing simple changes to their login pages like uploading the institution logo is frustration that the default login page does something funny to logos if they don't fit a certain shape/size and you can end up with a login screen that looks something like this.


Now, this is actually really simple to fix by uploading a custom login page with some simple custom CSS.


By default, the CSS applied to the logo on the page looks like this:

.bb-login .new-logo.customized-logo img {
   width: 15.625rem;
   height: 15.625rem;
   border-radius: 7.8125rem;

In an Ultra enabled environment we have no way to get at this at source to make the change. Instead, we need to navigate to the brands page of the environment and download the login-ultra.jsp file so we can add some custom CSS to resolve the issue.


The CSS we need to add to the file looks like this:

.bb-login .new-logo.customized-logo img {
   width: 15.625rem;
   height: auto;
   border-radius: 0;


We add this to the file in between the end of the <bbNG:jsBlock> and before the cookie disclosure. Note that we have also had to add the <bbNG:cssBlock> to the file to add our custom CSS which is not there by default.


Depending on your logo you could add a max-width or a 100% width. In this case we’re giving an exact width for the logo to display at an exact size on the login block.


This means we get something which looks far more sensible (Yes - I know the logo now looks just like the normal login page now but it is a change I promise )


I've attached an example login-ultra.jsp file with the change in it. Hope this helps.