{"id":2943,"date":"2022-12-21T21:00:38","date_gmt":"2022-12-22T02:00:38","guid":{"rendered":"https:\/\/xlinesoft.com\/blog\/?p=2943"},"modified":"2022-12-21T21:00:38","modified_gmt":"2022-12-22T02:00:38","slug":"yet-another-custom-login-page","status":"publish","type":"post","link":"https:\/\/xlinesoft.com\/blog\/2022\/12\/21\/yet-another-custom-login-page\/","title":{"rendered":"Yet another custom login page"},"content":{"rendered":"<p>As many of you know, we recently launched a side project named <a href=\"https:\/\/pictur.app\/\">PicTur<\/a>. This is a website, built with the help of PHPRunner, that allows users build beautiful travel stories. Instead of letting you pictures collect dust you can create a travel story and share with the world. Take a look open an account and maybe create a story or two.<\/p>\n<p>This website was built with the help of PHPRunner and was heavily customized. We will post series of articles talking about the most interesting parts of this project. Let us start by showing how pages like login, register and remind password were prettified. First, we found a good login template at <a href=\"https:\/\/carrd.co\/\">Carrd<\/a>, customized it a bit and imported CSS into PHPRunner.<\/p>\n<p>This is the end result:<\/p>\n<p><a href=\"https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2022\/12\/login_page.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2022\/12\/login_page-600x451.png\" alt=\"PicTur..app login page\" width=\"600\" height=\"451\" class=\"alignnone size-medium wp-image-2945\" srcset=\"https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2022\/12\/login_page-600x451.png 600w, https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2022\/12\/login_page-1024x769.png 1024w, https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2022\/12\/login_page-768x577.png 768w, https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2022\/12\/login_page.png 1082w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/a><br \/>\n<!--more--><\/p>\n<h3>Login page layout<\/h3>\n<p>Here is how your login page is supposed to look in the Page Designer if you want to re-create the same in your project. <\/p>\n<p><a href=\"https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2022\/12\/login_page_designer.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2022\/12\/login_page_designer-600x374.png\" alt=\"Login page layout in Page Designer \" width=\"600\" height=\"374\" class=\"alignnone size-medium wp-image-2946\" srcset=\"https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2022\/12\/login_page_designer-600x374.png 600w, https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2022\/12\/login_page_designer-1024x638.png 1024w, https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2022\/12\/login_page_designer-768x479.png 768w, https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2022\/12\/login_page_designer.png 1128w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/a><\/p>\n<p>To add an arrow to the &#8220;Sign in&#8221; button select this button in the Page Designer and on the right side panel choose <strong>fa-arrow-right<\/strong> icon from Font Awesome set.<\/p>\n<h3>Header code snippet<\/h3>\n<p>Insert a code snippet above the login fields and use the following code there:<\/p>\n<div class=\"my-syntax-highlighter\">\n<pre><textarea id=\"mshighlighter\" class=\"mshighlighter\" language=\"php\" name=\"mshighlighter\" >\r\necho \"<h2>Page Header<\/h2>\";\r\necho \"<h3>Logon to your account<\/h3>\";<\/textarea><\/pre>\n<\/div>\n<h3>Custom CSS<\/h3>\n<p>The following code goes to Style Editor -> Custom CSS.<\/p>\n<div class=\"my-syntax-highlighter\">\n<pre><textarea id=\"mshighlighter\" class=\"mshighlighter\" language=\"css\" name=\"mshighlighter\" >\r\n.function-login {\r\n    line-height: 1.0;\r\n    min-height: 100vh;\r\n    min-width: 320px;\r\n    overflow-x: hidden;\r\n    word-wrap: break-word;\r\n}\r\n\r\n.function-login .panel-heading {\r\n    display: none;\r\n}\r\n\r\n.function-login .bs-pagepanel {\r\n    background: none;\r\n}\r\n\r\n.function-login:before {\r\n    background-attachment: scroll;\r\n    content: '';\r\n    display: block;\r\n    height: 100vh;\r\n    left: 0;\r\n    pointer-events: none;\r\n    position: fixed;\r\n    top: 0;\r\n    transform: scale(1);\r\n    width: 100vw;\r\n    z-index: -1;\r\n    background-size: cover;\r\n    background-position: center;\r\n    background-repeat: no-repeat;\r\n    background-image: linear-gradient(to top, rgba(235, 235, 235, 0.1), rgba(235, 235, 235, 0.2)), url(images\/bg_login.jpg);\r\n}\r\n\r\n.function-login .r-panel-form {\r\n    --alignment: left;\r\n    --flex-alignment: flex-start;\r\n    --indent-left: 1;\r\n    --indent-right: 0;\r\n    \/*display: flex;*\/\r\n    width: 100%;\r\n    align-items: center;\r\n    justify-content: center;\r\n    background-color: rgba(20, 20, 23, 0.788);\r\n    -webkit-backdrop-filter: blur(0.6rem);\r\n    backdrop-filter: blur(0.6rem);\r\n    box-shadow: 0rem 0.875rem 2.125rem 0rem rgb(0 0 0 \/ 33%);\r\n    border-radius: 1.25rem;\r\n}\r\n\r\n.function-login input[type=\"text\"],\r\n.function-login input[type=\"password\"] {\r\n    height: 4.875rem;\r\n    line-height: 4.875rem;\r\n    padding: 0 1.18125rem;\r\n    color: rgba(255, 255, 255, 0.761);\r\n    background-color: rgba(20, 20, 23, 0.361);\r\n    font-size: 1em;\r\n    font-family: 'Inter', sans-serif;\r\n    font-weight: 400;\r\n    border-radius: 0.5rem;\r\n    border: none;\r\n    -webkit-box-shadow: none;\r\n    box-shadow: none;\r\n}\r\n\r\n.function-login input[type=\"text\"]:focus,\r\n.function-login input[type=\"text\"]:active,\r\n.function-login input[type=\"password\"]:focus,\r\n.function-login input[type=\"password\"]:active {\r\n    box-shadow: 0 0 0 1px #8571d1, inset 0 0 0 1px #8571d1;\r\n}\r\n\r\n.function-login .checkbox label {\r\n    color: rgba(255, 255, 255, 0.761);\r\n    padding-left: 0px;\r\n}\r\n\r\n.function-login .checkbox label:before {\r\n    border-radius: 0.5rem;\r\n    color: rgba(255, 255, 255, 0.761);\r\n    background-color: rgba(20, 20, 23, 0.361);\r\n    background-size: 1.434375rem;\r\n    height: 2.53125rem;\r\n    width: 2.53125rem;\r\n    margin-right: 1.265625rem;\r\n    background-position: center;\r\n    background-repeat: no-repeat;\r\n    content: '';\r\n    cursor: pointer;\r\n    display: inline-block;\r\n    flex-grow: 0;\r\n    flex-shrink: 0;\r\n    vertical-align: middle;\r\n    box-shadow: 0 0 0 1px #4c4a55, inset 0 0 0 1px #4c4a55;\r\n}\r\n\r\n.function-login label.checked:before {\r\n    background-image: url(\"data:image\/svg+xml;charset=utf8,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' 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\");\r\n}\r\n\r\n.function-login label:hover:before {\r\n    box-shadow: 0 0 0 1px #8571D1, inset 0 0 0 1px #8571D1;\r\n}\r\n\r\n.function-login input[type=\"checkbox\"] {\r\n    display: none;\r\n}\r\n\r\n.function-login [data-itemtype=\"login_remind\"] a,\r\n.function-login [data-itemtype=\"loginform_register_link\"] a {\r\n    color: #FFFFFF;\r\n    font-family: 'Inter', sans-serif;\r\n    text-shadow: 0rem 0.125rem 0.25rem rgb(0 0 0 \/ 7%);\r\n}\r\n\r\n.function-login [data-itemtype=\"login_remind\"] a:hover,\r\n.function-login [data-itemtype=\"loginform_register_link\"] a:hover,\r\n.function-login [data-itemtype=\"login_remind\"] a.active,\r\n.function-login [data-itemtype=\"loginform_register_link\"] a.active {\r\n    color: white !important;\r\n}\r\n\r\n.function-login .r-panel-page {\r\n    min-width: auto;\r\n    width: 100%;\r\n    max-width: 100%;\r\n    margin-top: 0px;\r\n}\r\n\r\n.function-login form {\r\n    width: 50rem;\r\n    margin: 0 auto;\r\n}\r\n\r\n.function-login h2 {\r\n    color: #FFFFFF;\r\n    font-family: 'Inter', sans-serif;\r\n    font-size: 3.25em;\r\n    line-height: 1.25;\r\n    font-weight: 600;\r\n    text-shadow: 0rem 0.125rem 0.25rem rgb(0 0 0 \/ 7%);\r\n}\r\n\r\n.function-login h3 {\r\n    color: rgba(255, 255, 255, 0.902);\r\n    font-family: 'Inter', sans-serif;\r\n    letter-spacing: 0.025rem;\r\n    width: calc(100% + 0.025rem);\r\n    font-size: 1.3em;\r\n    line-height: 1.75;\r\n    font-weight: 400;\r\n    text-shadow: 0.088rem 0.088rem 0.125rem rgb(0 0 0 \/ 19%);\r\n}\r\n\r\n.function-login tr:first-child .clearfix[edit-form-cell] {\r\n    padding: 25px;\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: center;\r\n}\r\n\r\n.function-login tr:nth-child(2) .clearfix[edit-form-cell] {\r\n    text-align: center;\r\n}\r\n\r\n.function-login .clearfix[edit-form-cell] .r-edit-field {\r\n    margin-bottom: 10px;\r\n    width: 100% !important;\r\n    padding: 0px !important;\r\n}\r\n\r\n.function-login [data-itemtype=\"login_button\"] {\r\n    width: 100%;\r\n    margin-bottom: 10px;\r\n}\r\n\r\n.function-login .btn.btn-primary {\r\n    text-align: center;\r\n    width: 100%;\r\n    height: 4.875rem;\r\n    line-height: 4.875rem;\r\n    padding: 0 1.9375rem;\r\n    font-size: 1em;\r\n    font-family: 'Inter', sans-serif;\r\n    font-weight: 600;\r\n    border-radius: 0.5rem;\r\n    flex-direction: row-reverse;\r\n    justify-content: flex-end;\r\n    background-color: #7662C4;\r\n    color: #FFFFFF;\r\n    background-image: linear-gradient(142deg, rgba(221, 136, 235, 0.451) 0%, rgba(118, 98, 196, 0.008) 58%);\r\n    background-position: 0% 0%;\r\n    background-repeat: repeat;\r\n    background-size: cover;\r\n    transition: color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease;\r\n    position: relative;\r\n    display: flex;\r\n    align-items: center;\r\n}\r\n\r\n.function-login .btn.btn-primary .fa {\r\n    order: 0;\r\n    margin-left: auto;\r\n}\r\n\r\n.function-login .btn.btn-primary:hover {\r\n    background-color: #8770E0;\r\n}\r\n\r\n.function-login .panel {\r\n    -webkit-box-shadow: none;\r\n    box-shadow: none;\r\n    border: none;\r\n}\r\n\r\n.function-login .panel-primary {\r\n    border-color: none;\r\n}\r\n\r\n.function-login [data-itemid=\"login_google\"] {\r\n    margin-top: 20px;\r\n}\r\n\r\nbody.user_forms.function-register .help-block {\r\n    margin-top: 10px;\r\n}\r\n\r\n@media (min-width: 320px) and (max-width: 768px) {\r\n    .function-login form {\r\n        max-width: calc(100% - 2.5rem + 0.4725px);\r\n        width: calc(100% - 2.5rem + 0.4725px);\r\n    }\r\n}\r\n\r\n.function-login [data-itemtype=\"login_message\"] {\r\n    background: none;\r\n    border: none;\r\n    box-shadow: none;\r\n}\r\n\r\n.function-login tr:nth-child(2) * {\r\n    color: white;\r\n}<\/textarea><\/pre>\n<\/div>\n<p>Enjoy!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>As many of you know, we recently launched a side project named PicTur. This is a website, built with the help of PHPRunner, that allows users build beautiful travel stories. Instead of letting you pictures collect dust you can create a travel story and share 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 was heavily customized. We will post series of articles talking about the most interesting&#8230;<span class=\"clearfix clearfix-post\"><\/span><a href=\"https:\/\/xlinesoft.com\/blog\/2022\/12\/21\/yet-another-custom-login-page\/\" class=\"more-link\">Continue Reading <span class=\"screen-reader-text\">&#8220;Yet another custom login page&#8221;<\/span> <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[16,95,10,1,8],"tags":[],"class_list":["post-2943","post","type-post","status-publish","format-standard","hentry","category-asp-net","category-css","category-news","category-php-category","category-tutorials"],"_links":{"self":[{"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/posts\/2943","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/comments?post=2943"}],"version-history":[{"count":6,"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/posts\/2943\/revisions"}],"predecessor-version":[{"id":2951,"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/posts\/2943\/revisions\/2951"}],"wp:attachment":[{"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/media?parent=2943"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/categories?post=2943"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/tags?post=2943"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}