Hide Knack logo in specific page - Login screen

API & Customization
1

I have a custom logo in my knack app which is an image file. I want to have a javascript or CSS code to make my knack logo invisible in the login screen. 

Once the user logs in, the logo should reappear as regular. 

Is this possible?

I tried CSS but it doesn't work

#view_257.knack-logo {
display; None !important;
}

In above case view_257 is log in screen. 

 

Thanks 

2

Robbie 

 

I tested your method its not working for me. And after trying so many times I think its not worth the effort but still would like to see the solution.

 

Thank you for the reply.

 

3

Hi Ajay,

From what I understand, I don't think you'll be able to do this with CSS alone, as the "knack-logo" id isn't really in a 'view' or 'page'. You'll have to use Javascript here.

I tested the code below, and it works, but it's not elegant. The hooks Knack gives us to listen for with Javascript all appear to occur after the logo is loaded, so the logo is always displayed first, then hidden.

Hope this helps, or inspires a better solution for you! :)


$(document).on('knack-view-render.view_257', function(event, view) {
 var myElement = document.querySelector("#knack-logo");
 myElement.style.display = "none";
});
4

Hello, not sure if this is working. Just tried the example and my logo is not hidden for that specific page.