Using a Custom Login Page

You can customize the login page with your church’s branding. Setting this up involves adding a shell to HTML Content and an administration setting.

Setting Up Your Custom Login Page

Step 1

Create the shell. Go to Administration > Special Content > HTML Content and click the button to create a New Html File. Give it a meaningful name, such as ShellLogin.

Open the new file and click on the Source button in the Editor menu. Copy the sample code below and paste it into the file. This will get you started with a login shell. You will want to edit the file to include your own banner image and footer information and links. As you edit, you can switch back and forth between source view and standard view by clicking the Source button.

Step 2
Enter the administration setting. Go to Administration > Settings and click on the Add Setting button. Name the setting UX-LoginPageShell and click Submit to save the setting. Then enter as its value the name of the login shell you created in Step 1.

Creating Campus-Specific Login Pages

If your church has multiple campuses, you can create a different login page for each campus. To do this, you will create one HTML Content file for each campus. You will also have one setting for each campus with the format UX-LoginPageShell-{campuscode} where {campuscode} is a short code you select to designate that campus. For example, your Downtown campus might have the code DT. In this case, you will create a setting UX-LoginPageShell-DT and set its value to be the name of the login shell you created for that campus.

Do this for each of your campuses. Then send people to the appropriate login page using URLs with the format https://yourchurchname.tpsdb.com/Logon?campus={campuscode}.

Sample Code for a Login Shell

<html>
<head>
        <link href="/favicon.ico?v=3" rel="shortcut icon" /><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, maximum-scale=1.0">
        <title>Logon to TouchPoint</title>
        <meta content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport" />
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<style type="text/css">body {
    margin: 0;
}

.content-width{
    position: relative;
    width:1200px;
    margin:0 auto;
    padding: 0 10px;
}

.utilitybar {
    background-color: #363636;
    padding: 8px 0;
    text-align: left;
}

.utilitybar a{
    font-size: 10px;
    color:#bbb;
    text-decoration: none;
    transition:0.25s;
}

.utilitybar a:hover{
    color:#fff;
}

.tmpl-header{
    position: relative;
    z-index:1;
    height: 360px;
    padding-top: 28px;
    background-image: url('https://c4265878.ssl.cf2.rackcdn.com/redeemer.1706191428.DT_main_1920.JPG');
    background-repeat: repeat;
    background-position:center;
    border-bottom:24px solid #0084A9;
}

.container{
    max-width: 700px;
    margin:0 auto;
    background-color: pink;
}

.form-wrapper{
    position:absolute;
    z-index:5;
    top:220px;
    max-width: 500px;
    margin-left: 10px;
    margin-right: 10px;
    padding: 0 10px;
    background-color: #ffffff;
}


div.regform {
    background-color: #ffffff;
    padding: 20px 20px 20px 20px;
}
div.confirm {
    background-color: #ffffff;
    padding: 20px 20px 100px 20px;
}
div.container div.footer {
    position: relative;
     bottom: 0px;
}
div.wpcf7{
    background-color:#ffffff;
    border:2px solid transparent;
    box-sizing:border-box;
    resize:none;
}

@media only screen and (min-width: 521px) {
    .form-wrapper{
    left:50%;
    transform: translate(-50%);
    }
}
</style>
<div class="utilitybar">
<div class="content-width">&nbsp;</div>
</div>

<div class="tmpl-header">&nbsp;</div>

<div class="form-wrapper">
<div class="wpcf7"><!--FORM START-->
<style type="text/css">input[type="text"] {
        text-transform: lowercase;
    }
    .account {
        text-align: center;
    }
    .account .form-header {
        font-size: 25px;
        font-weight: 300;
        text-align: center;
        margin: 40px 0;
    }
    .account .no-header {
        margin-bottom: 40px;
    }
    .account .bordered, .account .panel, .account .table, .account hr {
        border-color: #e2e2e2;
    }
    .account .panel {
        max-width: 360px;
        margin: 0 auto;
        padding: 27px;
    }
    .panel, .panel-default {
        border-color: #e4e4e4;
        margin-bottom: 22px;
        position: relative;
        -webkit-box-shadow: none;
        box-shadow: none;
    }
    .account .signin-password {
        position: relative;
    }
    .account .signin-password input {
        padding-right: 70px;
    }
    .account .signin-password .forgot {
        position: absolute;
        right: 10px;
        top: 10px;
        color: #555;
        background: #f1f1f1;
        border-radius: 2px;
        line-height: 25px;
        padding: 0 7px;
        font-size: 12px;
    }
    .account .signin-with {
        max-width: 360px;
        padding: 20px;
        margin: 0 auto;
        text-align: center;
    }
    .account .signin-with .header {
        font-size: 16px;
        font-weight: 300;
        text-align: center;
        margin: 0 0 20px;
    }
    .account .signin-with .header a {
        text-decoration: underline;
    }
    .account .alert {
        width: 360px;
        margin: auto;
        margin-bottom: 20px;
        text-align: left !important;
    }
</style>
<div class="account">
<div class="no-header">&nbsp;</div>

<form action="/Logon" class="panel" method="post"><input id="ReturnUrl" name="ReturnUrl" type="hidden" value="/" />
<div class="form-group"><input autocapitalize="off" autocomplete="off" autocorrect="off" class="form-control input-lg" id="inputEmail" name="UsernameOrEmail" placeholder="username or email" required="required" type="text" /></div>

<div class="form-group signin-password"><input class="form-control input-lg" id="inputPassword" name="Password" placeholder="password" required="required" type="password" /> <a class="forgot" href="/Account/ForgotPassword">Forgot?</a></div>

<div class="form-actions"><input class="btn btn-primary btn-block btn-lg" type="submit" value="Sign In" /></div>
</form>

<div class="signin-with">
<div class="header">need an account? <a href="/Account/ForgotPassword">request password</a></div>
</div>
</div>
</div>
<!--FORM END-->

<div class="text-center" style="margin-top: 80px;">
<p><span style="color:#696969;">Need help? Found a problem with this website? Email <a href="mailto:helpdesk@mychurch.com">helpdesk@mychurch.com</a></span><br />
<span style="color:#696969;">My City | 901.555.1212</span><span style="color:#696969;"> | </span><a href="https://www.mychurch.com/aboutus"><span style="color:#696969;">About Us</span></a> | <a href="http://www.mychurch.com/r/privacy_policy"><span style="color:#696969;">Privacy Policy</span></a></p>
</div>
</div>
</body>
</html>

© 2019 TouchPoint Software, LLC.  All rights reserved.