Custom code transforming your log in pages

I think we can all agree knacks ‘Out of the box’ sign in pages look a little bit dull. I have added some code here to style the login pages.

From this…

To this

You don’t need to add anything in the builder just copy and paste the code below


$(document).on('knack-page-render.any', function() {
   if ($('.kn-login').length) {
     $('#knack-body, .kn-scenes').addClass('loginPage');
     $('#knack-body, .kn-scenes').removeClass('loginPage');


This is if you want just a background colour
#knack-body.loginPage {
  background: coral;

This is if you want to a add a background cover 
#knack-body.loginPage {
  background-image: url("");
  background-size: cover;
  background-position: center;

This is to change the size of logo

#knack-body.loginPage  .knHeader__logo--custom {
  width: 100px;

#knack-body.loginPage .knHeader__title-logo-wrapper {

#knack-body.loginPage {
  display: flex;
  align-items: center;

.kn-login-form {

.loginPage * {

.loginPage .knHeader__title {
  display: none!important;

.loginPage .knHeader {
 background-color: #ffffff00!important;

.kn-login {
  -webkit-box-shadow: 10px 10px 90px -24px rgba(150,147,150,1);
  -moz-box-shadow: 10px 10px 90px -24px rgba(150,147,150,1);
  box-shadow: 10px 10px 90px -24px rgba(150,147,150,1);
  border:1px solid rgb(189, 187, 187);
  background: white;

.kn-login .control input.checkbox {

Thanks for sharing @Johnny_Appknowledged_UK - looking forward to having a play with this one and trying some different background images. :+1:

1 Like

You’re welcome @CarlHolmes enjoy

This Looks Great thank you


Thanks a lot @Johnny_Appknowledged_UK , this is great

I am a complete novice in CSS : I would like to NOT show the logo at all, and struggling with the code.
How would you do this ?

Thanks :pray:

1 Like

@Francois Just add this

1 Like

This looks awesome!

1 Like

This is great. One question, I have a white line dividing the header and the login page, can I get rid of that?
Thanks you for the great code.

1 Like

Thanks @Brian1!

Bit hard to tell, this is based on a app with no code in it all. The only thing I can think of is there might be some other code effecting this.

Drop me a email I’ll be more than happy to fix it with you on a zoom

Thank you, I will look at my code first. If I cant find it I will reach out for sure.

Found it,
I had to add the following code to css:

.loginPage .knHeader–bottom-border {
border-bottom: none;


Hello Johnny
Thanks for you help.
I tried this, but I still have it displayed ; just to make sure, I am talking about this element I would like to remove :

Thnks again


@Francois ping me a message and ill jump on a zoom with you to sort out.

1 Like

@Johnny_Appknowledged_UK - first , thank you for sharing this, it’s incredibly useful.

I’ve been trying to make it work with Google SSO enabled, and I’m hitting a brick wall. The default login screen with an SSO button looks ridiculous, so it needs to be changed.

This (using your code with a couple of small changes) looks OK on mobile, but not on desktop:

It seems the login page actually has three columns, and when you have an SSO button it goes in the rightmost column. I can’t see an obvious way of getting this control to line up in the left column and get the login centred.

If you want to take a look yourself it’s here: Knack

Any ideas? I could just add a new SSO button to the login page and hide the right hand two columns, but I can’t see an obvious way of acheiving that either.

All pointers gratefully received!


Hey @Andrew7

I see you you’ve had a go looking at your CSS but the code can easily become quite messy. The main issue is there is no out container and I would tackle this by starting again with what I’ve posted here. I would create a new outer container using the jquery wrapAll method and go from there.

More than happy to spend some time with you to create this. My email is

Hey everyone, I hope you’ve been enjoying these code snippets. I wanted to let you know that all of my code is now available on my new platform, Appknowledged. Appknowledged has taken over from KnackMods. I encourage all of you to sign up—it’s completely free—and you’ll have access to all of my free content.