Custom code transforming your log in pages

API & Customization Show & Tell
1

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…

Screenshot 2023-04-16 at 14.04.06|6 90x377
Screenshot 2023-04-16 at 14.04.06|6 90x3772880×1574 163 KB

To this

Screenshot 2023-04-16 at 14.50.13
Screenshot 2023-04-16 at 14.50.131920×1038 54.4 KB

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

Javascript

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

CSS


/*
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("https://img.rawpixel.com/s3fs-private/rawpixel_images/website_content/v1016-c-08_1-ksh6mza3.jpg?w=800&dpr=1&fit=default&crop=default&q=65&vib=3&con=3&usm=15&bg=F4F4F3&ixlib=js-2.2.1&s=f584d8501c27c5f649bc2cfce50705c0");
  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 {
  width:fit-content;
  margin:auto;
}

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

.kn-login-form {
  margin:auto;
}

.loginPage * {
   width:100%;
}

.loginPage .knHeader__title {
  display: none!important;
}

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

.kn-login .column.is-half {
  margin:auto;
  border-radius:.6em;
  -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);
  padding:20px;
  background: white;
}

.kn-login .control input.checkbox {
  margin-top:10px;
  width:fit-content;
}
9 Likes
2

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

1 Like
3

You’re welcome @CarlHolmes enjoy

4

This Looks Great thank you

2 Likes
5

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
6

@Francois Just add this

1 Like
7

This looks awesome!

1 Like
8

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
9

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
johnny@appknowledged.co.uk

10

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

11

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

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

Thanks,

12

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 :

image
image1630×535 83.4 KB

Thnks again

Francois

13

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

johnny@appknowledged.co.uk

1 Like
14

@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:

image
image1199×747 42.6 KB

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!

Andrew

15

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 johnny@appknowledged.co.uk

16

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.