😍Custom Login Page (ok)

https://github.com/srikat/WP-Simple-Custom-Login

143KB

assets.zip

archive

Open

C:\xampp82\htdocs\wp1\wp-content\themes\astra-child\functions.php

<?php
// Start Custom Login Page
add_action('login_enqueue_scripts', 'custom_login_stylesheet');
/**
 * Load style.css on the WordPress login page.
 */
function custom_login_stylesheet()
{
  wp_enqueue_style('custom-login', get_stylesheet_directory_uri() . '/assets/admin/css/style.css');
}
add_filter('login_headerurl', 'my_login_logo_url');
/**
 * Change the URL of the logo in WordPress login page to home URL.
 *
 * @return URL of site's homepage.
 */
function my_login_logo_url()
{
  return home_url();
}
add_filter('login_headertitle', 'my_login_logo_url_title');
/**
 * Filter the title attribute of the header logo above login form.
 *
 * @return string Site title - Site description(tagline).
 */
function my_login_logo_url_title()
{
  return get_bloginfo('name') . ' - ' . get_bloginfo('description');
}
// End Custom Login Page

C:\xampp82\htdocs\wp1\wp-content\themes\astra-child\assets\admin\css\style.scss

#login {
  h1 {
    a {
      background-image: url("../images/logo.svg");
    }
  }
  p#nav {
    a {
      color: #fff;
    }
  }
  p#backtoblog {
    a {
      color: #fff;
    }
  }
  form {
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 20px;
    margin-top: 20px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.05);
    .forgetmenot {
      display: flex;
      align-items: center;
      margin-bottom: 15px !important;
      #rememberme {
        margin: 0;
      }
      label {
        display: block;
        margin-bottom: 0;
      }
    }
  }
  label {
    display: block;
    margin-bottom: 15px;
    font-size: 16px;
    font-weight: bold;
  }
  input[type="text"] {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 1.2em;
  }
  input[type="password"] {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 1.2em;
  }
  input[type="submit"] {
    width: 100%;
    padding: 10px;
    background-color: #333;
    color: #fff;
    border: none;
    border-radius: 5px;
    font-size: 1.2em;
    cursor: pointer;
    &:hover {
      background-color: #444;
    }
  }
  &:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    pointer-events: none;
    z-index: -1;
  }
}
.login {
  background: url("../images/login-background.jpg") no-repeat;
  background-size: cover;
  position: relative;
  background-color: #f5f5f5;
}