Comments on: Wordpress Snippet #2: Style the login page

By: Mau

Mau — Sat, 09 Jan 2010 19:47:31 +0000

Thank you Brian, this code is great and your explanation makes it work ok, especially for those that are not wp-skilled like myself.

By: Brian Hinson

Brian Hinson — Fri, 08 Jan 2010 20:29:33 +0000

Oh, and you’ll notice that in my above comment, I set #login .message to display:none; This will keep that message from displaying at all!!! Just remove that style, and it will show as normal. I really didn’t need that message for my purposes.

By: Brian Hinson

Brian Hinson — Fri, 08 Jan 2010 20:26:38 +0000

Hi everyone, I saw some asking for help, and I was a little confused at firs, but it works as advertised. Here is how I used it.

1. I copy the above code, all of the above code and put into the functions.php file, the code goes between the php begin and end marks ().

2. You need to make a graphic to replace the original one. It is 326px wide by 67px high. I made my own.

3. in your wordpress theme directory (of the theme you are using), create a css folder (directory, same thing). You may already have one. In that directory make a login.css file. Put your custom css in there. Here is my own custom css to make my page “look right”.

html,
body.login { background-color: #bbb;}
#login h1 a { background: #bbb url(‘../images/header/login.png’) no-repeat top center;}
#login .message { background-color: #ccc; border: 1px solid black; display:none;}
#login form { border: 1px solid black; background-color: #ccc;}
#login label {color: #111;}
#login input {border: 1px solid #999;}
.login #login p#nav a:link,
.login #login p#nav a:visited,
.login #login p#nav a:hover,
.login #login p#nav a:active {color: #111 !important}

I hope this really helps those who are having trouble.

By: Mike Jolley

Mike Jolley — Wed, 30 Dec 2009 16:15:28 +0000

@gofree: I cannot give you the css, but if for example you wanted to change the logo you could use:

#login h1 a {
background:url(images/logo.jpg) no-repeat top;
}

For further CSS help I would recommend looking at W3Schools.

By: gofree

gofree — Wed, 30 Dec 2009 03:53:26 +0000

Very appreciated your reply. Could we have the sample .css file, please?

By: Mike Jolley

Mike Jolley — Tue, 29 Dec 2009 14:59:41 +0000

@gofree: Aside from copying and pasting that code into your themes functions.php file all you have to do is make a /css/login.css in your themes template folder.

By: gofree

gofree — Tue, 29 Dec 2009 11:11:27 +0000

Looking through, still can’t get a scope of modifying. Can you show sample modifying?

It seems that not to modify the above code, but just copy and paste then create .css named it login.css in the template folder. Am I right?

Again, please sample the css, plz.

By: gofree

gofree — Tue, 29 Dec 2009 10:54:51 +0000

So we only need to modify this:
// Hook in
add_filter(“login_headerurl”,”custom_loginpage_logo_link”);
add_filter(“login_headertitle”,”custom_loginpage_logo_title”);
add_action(“login_head”,”custom_loginpage_head”);

we put all code in between php?

By: Mike Jolley

Mike Jolley — Mon, 28 Dec 2009 18:55:41 +0000

@meme: functions.php - plural.

By: meme

meme — Fri, 25 Dec 2009 12:45:16 +0000

hi
thanks for the code
but i really have problem on making it work
where exactly should i place the code, i tried put it on the function.php but that’s not working
should i replace an exciting code with this or what
pleeeease help me on this and tell more details , i really need it