Menu Close Menu

Menu

  • 0
    • Number of items in cart: 0

      • Your cart is empty.
      • Total: $0.00
      • Checkout
  • Home
  • Sold Only Here
    • HTML Templates
    • eCommerce Template
    • Shopify Themes
    • WordPress Themes
    • Dropshipping Website
    • Services
    • Free Items
  • All Items
  • Blog
  • About Us
  • Contact Us
    • Login
    • Register
    • Customer Dashboard
    • Vendor Dashboard
    • Edit Profile
How to customize WordPress login page

SkyBootstrap

How to customize WordPress login page

How to customize wordpress login page

How to customize WordPress login page

You can make more beautiful of your WordPress login page. here has include some css or you can do css by yourself.
Today i will show how you can customize your wordpress login page.
you can do it 2 way
1. copy all code and paste it in your functions.php file.
2. create another file and do include it in your functions.php file. e.g.
require_once(‘inc/custom-login.php’);
and paste all code in custom-login.php file

//login page css
function custom_enqueue_script(){ ?>
		<style type="text/css">
		.skyb_login.login input[type="text"],
		.skyb_login.login input[type="email"],
		.skyb_login.login input[type="password"],
		.skyb_login.login .submit .button-primary{
			-webkit-transition: 0.3s;
			-o-transition: 0.3s;
			transition: 0.3s;
		}
		.skyb_login.login .submit .button-primary,
		.skyb_login.login form .input{
			box-shadow: none;
		}
		.skyb_login.login .submit .button-primary,
		.skyb_login.login form,
		.skyb_login.login form .input,
		.skyb_login.login .checkmark,
		.skyb_login.login p.message,
		.skyb_login.login #login_error{
			border-radius: 3px;
		}
		.skyb_login.login .submit .button-primary:hover,
		.skyb_login.login #backtoblog a:hover,
		.skyb_login.login #nav a:hover{
			opacity: 0.85;
		}
		.skyb_login.login #backtoblog a,
		.skyb_login.login #nav a,
		.skyb_login.login #backtoblog a:hover,
		.skyb_login.login #nav a:hover		{
			color: #ffffff;
		}
		.skyb_login.login,
		.skyb_login.login .submit .button-primary{
			background: #8C7DFC;
		}
		.skyb_login.login .submit .button-primary{
			border: 1px solid #8c7dfc;
			font-size: 14px;
			height: 40px;
			padding-left: 25px;
			padding-right: 25px;
			text-shadow: 0 -1px 1px #8c7dfc, 1px 0 1px #8c7dfc, 0 1px 1px #8c7dfc, -1px 0 1px #8c7dfc;
		}
		.skyb_login #login h1 a{
			background-image: url('https://skybootstrap.com/wp-content/uploads/2017/12/skybootstrap-logo.png');
			background-size: 100% auto;
			width: auto;
			margin-bottom: 30px;
		}
		.skyb_login #login h1 a:active{
			border:none;
			box-shadow: none;
		}
		.skyb_login.login form .input{
			padding-left: 10px;
			padding-right: 10px;
			border:1px solid #8C7DFC;
			margin-top: 7px;
		}
		.skyb_login.login form .input:focus,
		.skyb_login.login input[type="text"]:focus,
		.skyb_login.login input[type="email"]:focus,
		.skyb_login.login input[type="password"]:focus{
			box-shadow: 0 0 2px rgba(140, 125, 252, 0.8);
		}
		.skyb_login.login .forgetmenot{
			margin-top: 7px;
		}
		.skyb_login.login .forgetmenot label{
			position: relative;
			padding-left: 15px;
			height: 27px;
			line-height: 27px;
			display: block;
		}
		 .skyb_login.login input#rememberme{
			opacity: 0;
			margin: 0;
			visibility: hidden;
		}
		.skyb_login.login input#rememberme:checked{
			content:none;
		}
		.skyb_login.login .checkmark {
			position: absolute;
			top: 0;
			left: 0;
			height: 25px;
			width: 25px;
			background-color: #f6f6f6;
			border:1px solid #8C7DFC;
			-webkit-transition: 0.1s;
			-o-transition: 0.1s;
			transition: 0.1s;
		}
		.skyb_login.login input#rememberme ~ .checkmark:hover {
			background-color: #ececec;
		}
		.skyb_login.login input#rememberme:checked ~ .checkmark {
			background-color: #8C7DFC;
		}
		.skyb_login.login .checkmark:after {
			content: "";
			position: absolute;
			display: none;
		}
		.skyb_login.login input#rememberme:checked ~ .checkmark:after {
			display: block;
		}
		.skyb_login.login .checkmark:after {
			left: 9px;
			top: 5px;
			width: 5px;
			height: 10px;
			border: solid #fff;
			border-width: 0 3px 3px 0;
			-webkit-transform: rotate(45deg);
			-ms-transform: rotate(45deg);
			transform: rotate(45deg);
		}
		.skyb_login.login p.message{
			margin-bottom: 5px;
		}
		</style>

<?php }
add_filter( 'login_enqueue_scripts', 'custom_enqueue_script' );

// custom js script
function skyb_custom_js_script(){
	 ?>
	<script type="text/javascript">
		document.getElementById('rememberme').insertAdjacentHTML('afterend', '<span class="checkmark"></span>');
	</script>
<?php }
add_action( 'login_footer', 'skyb_custom_js_script' );
do_action( 'skyb_custom_js_script' );

// login title
function custom_login_page_title( $opt ){
	$opt = 'Welcome to our skybootstrap';
	return $opt;
}
add_filter( 'login_headertitle', 'custom_login_page_title' );

// login url
function custom_login_page_url(){

	return home_url();
}
add_filter( 'login_headerurl', 'custom_login_page_url' );
// login faild hide
function custom_login_error_hide(){

	return 'Input Does  Not Match!';
}
add_filter( 'login_errors', 'custom_login_error_hide' );

// logon page body class
function login_page_body_lass( $login_body_class ){
	$login_body_class[] = 'skyb_login';
	return $login_body_class ;
}
add_filter( 'login_body_class', 'login_page_body_lass', 10, 2 );
How to customize wordpress login page reset password

Reset Password Page:

Watch the video How to customize WordPress login page

Watch the video How to customize WordPress login page
Post Views: 2,640
Spread the love
Read More customize WordPress login page customize wp login page WordPress wp login page January 27, 2018

Published by skyboot

Skybootstrap is a web Design and Development service provider. Our Service: WordPress Theme Development | PSD to WordPress | Dropshipping Store Create | Shopify Store Create | Wp Error Fix | Contact Form | Landing Page Create | Bootstrap Landing Page .

Posts by skyboot

Posts navigation

Previous

Best Political WordPress Themes in 2023

Next

contact form 7 not working on godaddy

subscribe our youtube channel
Subscribe our YouTube channel

appsumo plus

closerscopy ai copywriting tool
Closerscopy AI Copywriting Tool

Categories

  • Business (4)
    • eCommerce (3)
  • Digital Marketing (37)
    • B2B Marketing (3)
    • Content Marketing (3)
    • Email Marketing (5)
    • Pinterest Marketing (2)
    • SEO (1)
    • Tools & SaaS Software (24)
    • Video Marketing (3)
  • Fiverr (2)
  • Hosting (1)
  • Landing Page (2)
    • Mobile app landing page (1)
  • Lifetime Deals Products (1)
  • PHP (1)
  • Shopify (6)
  • Social Media Marketing (1)
  • template (1)
  • Trendy WordPress Theme (4)
    • ICO and Cryptocurrency (2)
    • Political (1)
  • Web Development (2)
  • WordPress (9)
  • WordPress Plugin (7)
  • WordPress Themes (1)
 Sign up for a Payoneer card and get paid $25 bonus.
Sign up for a Payoneer card and get paid $25 bonus.
namecheap hosting
Namecheap Web Hosting
hostinger web hosting
Hostinger High-Speed Web Hosting
skybootstrap
High Quality Bootstrap Landing Page Templates

We are working for delivery a high quality landing page for promote your business . Just subscribe and download unlimited landing page.Our some item has premium and we accept:

accept-payment-method
  • 8 Best AI Chatbot Platforms and Apps for Your Website
  • 27 Growth Hacking Strategies Every Startup Should Follow
  • 7 Best Sales Funnel Builders Software to Drive More Sales
  • 5 Best WordPress Gutenberg Blocks Plugins to Create Stunning Websites in 2023
  • 7 Best No Code Development Platforms to Develop Mobile and Web Apps

Categories

  • HTML Templates
  • Services
  • Trending

Get In Touch

Sign up for our newsletter to get latest updates and offers.

© 2017-2022 All Right Reserved SkyBootstrap