How to Customize Wordpress Login Page Without Plugin?

Introduction

In this tutorial I am going to explain about, how to customize your wordpress login page. For doing I am not going to use any plugin. In wordpress, login page is currently default of wordpress style. More number of persons don’t like that default page. So only I am going to put this post. In this post i am  going to change that two pages. You can design those pages  as per your wish. In this tutorial I am going to explain step by step.

How to customize Wordpress Login page?

Go to your wordpress login page. See the default background color. Instead of this you can change color or background image. First you have to decide which one you want color or image.

After Deciding go to your ftp and open color-fresh-css file (path is /public_html/adwordsshop.com/wp-admin/css). In this css file find below code. It is in  starting of that css file,  you can find easily.

html{background-color:#B7CCBC;}

If you want change color only, you can give your color on  that code. If you want background picture replace that code and paste below code as per our video.

html{background:url("http://fourblogger.com/wp-content/uploads/2010/02/autor2.jpg") repeat-y scroll center top transparent;}

In above code you have to give your image path url.

Next is I am going to change the page header section. For that again open that color-fresh-css file(path is /public_html/adwordsshop.com/wp-admin/css). In this file file you have to find below code

body.login{border-top-color:#75040B;}

In above code you have to give your color code as per our video. In this section if you want change this sentence (back to your domain name) find below code as per our video.

.login #backtoblog a{color:#ccc;}

In above code you have to give your color code as per our video.

Next is I am going to change the login section of wordpress. For that open login.css file (path is /public_html/adwordsshop.com/wp-admin/css).

In this file find below code in login.css as per our video.

form {
-moz-border-radius:11px 11px 11px 11px;

-moz-box-shadow:0 4px 18px #C8C8C8;

background:none repeat scroll 0 0 #51E6D9;

border:1px solid #E5E5E5;

font-weight:normal;

margin-left:8px;

padding:16px 16px 40px;

}

In above code, for background, which color you want, give your color code. If you want to change border color also, you can change above code as per our video. In this section if you want to change color of username and password, find below code in login.css and change as per our video.

label {

color:#080AC9;

font-size:13px;

}

In above code change the color as per your wish. If you want  to change the background of username and password box,  find below code in login.css and change as per our video.

#user_pass, #user_login, #user_email {

background:none repeat scroll 0 0 #FFFFFF;

border:1px solid #080AC9;

font-size:24px;

margin-bottom:16px;

margin-right:6px;

margin-top:2px;

padding:3px;

width:97%;

}

In above code which color you want, you can give in background and also if you want change border color, you can change in above code border section. In this section if you want to change color of register and lost your password, find below code in color-fresh-css file and change as per our video.

.login #nav a {

color:#21759B !important;

}

Finally I am going to explain about logo section. Already I put post for this logo section, when compare to old post, below step  is going to be very easy.

For changing logo, find below code in login.css and change as per our video.

h1 a{background:url(../images/logo-login.gif) no-repeat top center;

In above code, you have to give your image url.

After finishing above all process visit your wordpress login page. It is looking nice. Isn’t it? If not, change the colors and image.

Note: Once you upgrade your wordpress version, you have to re-do above process. The reason is now we are changing these things in their core section. So at the time of upgrading your wordpress version, it is  again  showing default wordpress login page.  So you have to bookmark this page now.

I love comments. Share your experience in comment section and if you have any doubt write in comment section.

Related Tutorials:

1. How to Change Background and Border in Thesis Theme
2. How to add Page Navigation Menu without Using Open Hook Plugin in Thesis Theme
3. How to Place Different Background Color for Each Sidebar Heading in Thesis Theme
4. 11 Css Tricks for Thesis Theme Customization
5. How to Add Background Image for Sidebar Heading in Thesis Theme

Tagged as: customize wordpress login page, how to customize wp login page, wordpress login page