Yet Another Custom Login Page – Xlinesoft Blog

As many of you know, we recently launched a side project called PicTur. This is a website, built with the help of PHPRunner, that allows users to create beautiful travel stories. Instead of letting your images gather dust, you can create a travel story and share it with the world. Take a look, open an account and maybe create a story or two.

This website was built with the help of PHPRunner and has been heavily customized. We will publish a series of articles talking about the most interesting parts of this project. Let’s start by showing how pages such as login, registration and password reminder have been beautified. First, we found a good login template from Carrd, customized it a bit and imported some CSS into PHPRunner.

Here is the final result:

Login page layout

This is what your login page is supposed to look like in Page Designer if you want to recreate it in your project.

To add an arrow to the “Login” button, select this button in the page designer and in the right side panel choose fa-right-arrow icon from the Font Awesome set.

Header snippet

Insert a code snippet above the login fields and use the following code there:


echo "<h2>Page Header</h2>";
echo "<h3>Logon to your account</h3>";

Custom CSS

The following code goes to Style Editor -> Custom CSS.


.function-login {
    line-height: 1.0;
    min-height: 100vh;
    min-width: 320px;
    overflow-x: hidden;
    word-wrap: break-word;
}

.function-login .panel-heading {
    display: none;
}

.function-login .bs-pagepanel {
    background: none;
}

.function-login:before {
    background-attachment: scroll;
    content: '';
    display: block;
    height: 100vh;
    left: 0;
    pointer-events: none;
    position: fixed;
    top: 0;
    transform: scale(1);
    width: 100vw;
    z-index: -1;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-image: linear-gradient(to top, rgba(235, 235, 235, 0.1), rgba(235, 235, 235, 0.2)), url(images/bg_login.jpg);
}

.function-login .r-panel-form {
    --alignment: left;
    --flex-alignment: flex-start;
    --indent-left: 1;
    --indent-right: 0;
    /*display: flex;*/
    width: 100%;
    align-items: center;
    justify-content: center;
    background-color: rgba(20, 20, 23, 0.788);
    -webkit-backdrop-filter: blur(0.6rem);
    backdrop-filter: blur(0.6rem);
    box-shadow: 0rem 0.875rem 2.125rem 0rem rgb(0 0 0 / 33%);
    border-radius: 1.25rem;
}

.function-login input[type="text"],
.function-login input[type="password"] {
    height: 4.875rem;
    line-height: 4.875rem;
    padding: 0 1.18125rem;
    color: rgba(255, 255, 255, 0.761);
    background-color: rgba(20, 20, 23, 0.361);
    font-size: 1em;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    border-radius: 0.5rem;
    border: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.function-login input[type="text"]:focus,
.function-login input[type="text"]:active,
.function-login input[type="password"]:focus,
.function-login input[type="password"]:active {
    box-shadow: 0 0 0 1px #8571d1, inset 0 0 0 1px #8571d1;
}

.function-login .checkbox label {
    color: rgba(255, 255, 255, 0.761);
    padding-left: 0px;
}

.function-login .checkbox label:before {
    border-radius: 0.5rem;
    color: rgba(255, 255, 255, 0.761);
    background-color: rgba(20, 20, 23, 0.361);
    background-size: 1.434375rem;
    height: 2.53125rem;
    width: 2.53125rem;
    margin-right: 1.265625rem;
    background-position: center;
    background-repeat: no-repeat;
    content: '';
    cursor: pointer;
    display: inline-block;
    flex-grow: 0;
    flex-shrink: 0;
    vertical-align: middle;
    box-shadow: 0 0 0 1px #4c4a55, inset 0 0 0 1px #4c4a55;
}

.function-login label.checked:before {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns=" width="648" height="552" preserveAspectRatio='none' viewBox='0 0 648 552'%3E%3Cpath d='M225.3,517.7L2.1,293.1l68.1-67.7L226,382.3L578.1,35.6l67.4,68.4L225.3,517.7z' fill="rgba(255,255,255,0.761)" /%3E%3C/svg%3E");
}

.function-login label:hover:before {
    box-shadow: 0 0 0 1px #8571D1, inset 0 0 0 1px #8571D1;
}

.function-login input[type="checkbox"] {
    display: none;
}

.function-login [data-itemtype="login_remind"] a,
.function-login [data-itemtype="loginform_register_link"] a {
    color: #FFFFFF;
    font-family: 'Inter', sans-serif;
    text-shadow: 0rem 0.125rem 0.25rem rgb(0 0 0 / 7%);
}

.function-login [data-itemtype="login_remind"] a:hover,
.function-login [data-itemtype="loginform_register_link"] a:hover,
.function-login [data-itemtype="login_remind"] a.active,
.function-login [data-itemtype="loginform_register_link"] a.active {
    color: white !important;
}

.function-login .r-panel-page {
    min-width: auto;
    width: 100%;
    max-width: 100%;
    margin-top: 0px;
}

.function-login form {
    width: 50rem;
    margin: 0 auto;
}

.function-login h2 {
    color: #FFFFFF;
    font-family: 'Inter', sans-serif;
    font-size: 3.25em;
    line-height: 1.25;
    font-weight: 600;
    text-shadow: 0rem 0.125rem 0.25rem rgb(0 0 0 / 7%);
}

.function-login h3 {
    color: rgba(255, 255, 255, 0.902);
    font-family: 'Inter', sans-serif;
    letter-spacing: 0.025rem;
    width: calc(100% + 0.025rem);
    font-size: 1.3em;
    line-height: 1.75;
    font-weight: 400;
    text-shadow: 0.088rem 0.088rem 0.125rem rgb(0 0 0 / 19%);
}

.function-login tr:first-child .clearfix[edit-form-cell] {
    padding: 25px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.function-login tr:nth-child(2) .clearfix[edit-form-cell] {
    text-align: center;
}

.function-login .clearfix[edit-form-cell] .r-edit-field {
    margin-bottom: 10px;
    width: 100% !important;
    padding: 0px !important;
}

.function-login [data-itemtype="login_button"] {
    width: 100%;
    margin-bottom: 10px;
}

.function-login .btn.btn-primary {
    text-align: center;
    width: 100%;
    height: 4.875rem;
    line-height: 4.875rem;
    padding: 0 1.9375rem;
    font-size: 1em;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    border-radius: 0.5rem;
    flex-direction: row-reverse;
    justify-content: flex-end;
    background-color: #7662C4;
    color: #FFFFFF;
    background-image: linear-gradient(142deg, rgba(221, 136, 235, 0.451) 0%, rgba(118, 98, 196, 0.008) 58%);
    background-position: 0% 0%;
    background-repeat: repeat;
    background-size: cover;
    transition: color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease;
    position: relative;
    display: flex;
    align-items: center;
}

.function-login .btn.btn-primary .fa {
    order: 0;
    margin-left: auto;
}

.function-login .btn.btn-primary:hover {
    background-color: #8770E0;
}

.function-login .panel {
    -webkit-box-shadow: none;
    box-shadow: none;
    border: none;
}

.function-login .panel-primary {
    border-color: none;
}

.function-login [data-itemid="login_google"] {
    margin-top: 20px;
}

body.user_forms.function-register .help-block {
    margin-top: 10px;
}

@media (min-width: 320px) and (max-width: 768px) {
    .function-login form {
        max-width: calc(100% - 2.5rem + 0.4725px);
        width: calc(100% - 2.5rem + 0.4725px);
    }
}

.function-login [data-itemtype="login_message"] {
    background: none;
    border: none;
    box-shadow: none;
}

.function-login tr:nth-child(2) * {
    color: white;
}

Appreciate!

Technology