First impressions count!

When you land that new client and invite them into Plutio to work on your project together, the first thing they do is login.

If you’re using the Plutio white label option with your own domain name then you’ll already have a nice login page with your own corporate colours and a little logo. That’s neat, but it’s not super custom is it. You can’t do much else.

Wouldn’t it be neat if you could do something like display a message on the login page, or have your own background. Or change the fonts. Or anything you like!

Check out the Repose Creative plutio login page: project.reposecreative.co.uk

Thankfully you can, with just a few lines of code. Read on to find out how.

For this to work you’ll need to be able to add CSS code to your Plutio using the Cloudflare technique. If you’re not already doing that, read up on that here.

Here’s the CSS to add for changing the background (alter the image url to match your background image):

/*Login page background*/
 .page.no-mainMenu .split-page-layout .layout-block.supportive-block {
 background: url(https://mywebsite.co.uk/wp-content/uploads/2019/12/loginbg.jpg)!important;
 background-position: center;
 background-size: cover;}

Here’s the code to add a message underneath the login box:

/*Login page message*/
 .page.no-mainMenu .split-page-layout .form .blocks-section._split-layout::after {background:#631984;
 border-radius: 5px;
 bottom: -140px;
 color: #fff;
 content: "Can't log in? Try using the Forgot your password link above, or emailing [email protected] for assistance!";
 display: block;
 font-weight: 600;
 padding: 20px;
 position: absolute;}

Here’s the code to change the login button colour:

/*Login page button*/
 .page.no-mainMenu .button.fullwidth {background-color: #631984;}

Have fun making that login page look a little special!