How to Customize WordPress Login Page Without Plugin?


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/ In this css file find below code. It is in  starting of that css file,  you can find easily.


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("") 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/ In this file file you have to find below code


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/

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;



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 {




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;








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.

wordpress login page

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.

{ 19 comments… add one }

Leave a Comment

  • Bing My Movies February 18, 2010, 1:02 PM

    Thanks for sharing the tutorial. Looking good to keep an background image.

    • Pascal February 18, 2010, 7:07 PM

      yes, Adding background image in login page it makes you rich in look.
      keep on reading our post.

  • Pascal February 18, 2010, 7:16 PM

    Thanks vivek.

  • George Serradinho February 24, 2010, 6:18 AM

    Thanks for this tutorial, I made the changes to my login page. I have made backups of the css files and saved in another folder as it will be over written when we upgrade to a new version.

    • Pascal February 24, 2010, 7:42 AM

      Hi serradinho i saw your login page. your logo and background color is nice.

  • TechStation BG March 6, 2010, 10:37 PM

    Hey, Pascal! Thanks for sharing those interesting tips with us 🙂 They are really useful, but I really have to point out one thing – your English sounds awful when you’are rushing the things (i.e. talking faster) and it’s really hard to understand your advices… So just an advice – Don’t rush it. When the users wants to see and learn how the things work, he/she doesn’t care how much time it will cost 🙂

    • Pascal March 7, 2010, 6:45 PM

      Hi, Thanks for your suggestion. We will take care of it.

  • BestofBlogger March 8, 2010, 12:27 AM

    Thank you very much. I should do this to my blog. I think you english good 🙂

  • SmashinGeeks March 12, 2010, 5:13 PM Reply
    • Suresh March 12, 2010, 7:23 PM


      thanks..I saw your login page well designed..

  • Ana August 4, 2010, 8:32 PM

    Hello Pascal
    Thanks for the great tutorial. I’m not good with CSS and my website is new, so this helped me a lot.
    I just have one question. To visit my website the visitors must sign up to it, so there is a sign on the login page that says “Only registered users can watch this site. Please register or login”. How can I change the background color of this box?? Is just above the username and password. You can see it if you visit my website
    Would appreciate your help with this!! Thanks in advance!!

    • Pascal August 9, 2010, 6:50 PM

      Hi ana,

      Our thesis team totally move to our membershipsite fourbloggerclub. so nowadays we are solve any single thesis issue or single wordpress issue for $5 only. it is ok for you. send your requirements.
      contact us via contact form

  • Waqqas November 28, 2010, 1:51 AM

    I have replaced the “Wordpress” image on Register Page with the logo of our association using the direct image replace method. I have two questions:
    1. How do I replace/remove the ‘tool tip hover’ text on the logo image? It says ‘Powered by Wordpress’. I wish to change it.
    2. How do I change the weblink associated to the logo image? For now it points to ‘’.
    My website:

  • Oren January 13, 2011, 6:14 PM

    is there a way to edit the text inside the box in login page ?

  • Louise January 27, 2011, 4:11 AM

    When you change the background color of the fresh css file, it changes, in the same time, the background of the admin dashboard. Is there a way to change the background color only for the login page?

  • mathew February 14, 2011, 9:12 PM

    cool tutorials man more power to you

  • ΣMMX April 29, 2011, 10:27 AM

    If you chmod ugo-w colors-fresh.css even after upgrade it is still going to remail in the same order it was before upgrade. Same with chmod ugo-w login.css

    • admin April 30, 2011, 11:03 AM

      What do you mean? Are you saying that even after upgrade the login customization will be active?

  • ΣMMX April 30, 2011, 12:03 PM

    Yes. chmod ugo-w login.css and in the same directory you can do also chmod ugo-w colors-fresh.css