Pro Blog Design

Awesome. i lost for words

Keep posting a good post like this guys

Brilliant! I’ve been wanting to do this for ages and was going to just muddle through it myself, but now I have your well written article for guidance! Thank you!

Thank you for the article. It’s simple but very useful . Changing CSS of the login page will make our blog more personal, and usual people don’t reconize this is a WP blog

Awesome tip!

It looks very nice, i will try to do it =).

Thanks

huh, looks like – I can do something about it too, thanks for the tips!

great work!
learning to do it!~~

That’s a great tip! Thanks!

We use wordpress for all our website and clients websites, and this is something which we didn’t really bother to do. It’s surprising how much it finishes the website off. Your post is really easy to understand seems very simple and will finish the website perfect.

This is something I’ve been doing for a while on client sites that are running on WordPress. It makes the site look that much more polished.

Hi,
I have the same error above as the12 and was wondering if you two had an luck resoling that problem? Thanks!

quick question.. how do you get the nice stylized “code” areas?

This is stellar! I have a client that will be using WP and this is exactly what I need and want for their log in screen!

Tadd Mencer’s Latest Post: When life gives you lemons

I just wanted to note that this works really well if you’re replacing the default WordPress logo image with your own logo image file, but it doesn’t work if you’re using HTML/CSS to create the typography for your h1 header title. In order to make that work you have to make changes in wp-login.php and login.css in the wp-admin folder … but you would probably have to make those changes all over again next time you upgrade WordPress.

So if you have created your site with a h1 header title using tags and CSS styling, then in order to achieve this customised login page you’ll have to create a separate image file to replicate the header title, then follow Michael’s instructions with your new image file.

Hope that all makes sense.

Is, there a way to center an image?
I follwed the code that you have here. but then i turned around and decided to create an html page index.html
I can see the text fields to enter username / password but the box doesn’t form?

When, I click on loss password the hacked version that I did from here shows, but the image isn’t the same size what i’d like to do is click on lost password, and the same page from the main page loads up the same way and you can enter your email or user name and you will be sent the password but when I log in, and try to see the main site, it boots me to the login site any reason why? how can I get pass it?

I find some nice article on the website design which infact great help for all webmaster like me.

I receive functions.php errors when I try to login.
All I want to do as add a full page background image behind the login area.
I have tried many different plugins but can’t get this basic thing to happen.

Thanks for the informative article on WordPress custom theme

so expert for me, but, i will try for that… nice tutorial, BeD-BoY

Great tip, this is just what I was looking for!

Thanks,

Thanks for all your work on this. It was nice to learn how to do this without a plugin.

good article

That’s a great tutorial, but I get this “Warning: Cannot modify header information – headers already sent by”, too. There’s nothing wrong with my functions php file. Did anyone find a solution for that problem?

Awesome tut! Been using it as a reference for any clients’ WP site I do. Thanks!

Thanks for this great tut It works awesome on all my WP-sites and I am using it as a professional extra on any client site I built too. Great work

Hey Michael,

You mention in your post that:

“You may find it useful to check out the default WordPress login stylesheet as well. You will find it in /wp-admin/css/login.css and some of the colors will be set through /wp-admin/css/colors-fresh.css”

The following files have a nicer format (i.e. – they are easier to read) for anyone using wordpad as their text editor because they contain line breaks rather than just a single line of code:

/wp-admin/css/login.dev
/wp-admin/css/colors-fresh.dev

Thanks for the great post!

OK for starters I’m very new to this whole blogging thing and I have followed the directions to the best of my ability. Now here’s my problem…

I get a blank (white) screen for my blog this happened after I copied and pasted the code that was given in step 1. I copied it at the end of the functions.php and updated the code, and boom one big white screen for log in and my whole site. PLEASE HELP!!!! I am using the most up to date wordpress.

Oh, I can’t get this to work. My site continues to load the default login screen. The wordpress theme I’m using already has a function.php I’ve tried to simply paste the full code at the bottom but it doesn’t work. I get default login.

I’ve also tried to paste it into my functions.php with the tags because they’re already there.

Please help, thanks!

Website Design & Development and Web Promotion Software Design System help your businesses to get online, increase your sales, rank high on search engines, and increase traffic to their websites.Web marketing is fast becoming the best way for companies around the globe to develop business and generate sales.
Software Design System has the expertise to deliver a structured Internet marketing strategy tailored to your company’s precise needs and designed to deliver you more customers

Thanks for the tutorial….

Hello,

I also found a site with describes how you can easily hook into the wordpress logo link & linktitle.


function collage_custom_login_link($url)
{
// Return a url; in this case the homepage url of wordpress
return get_bloginfo('url');
}
function collage_custom_login_title($message)
{
// Return title text for the logo to replace 'wordpress'; in this case, the blog name.
return get_bloginfo('name');
}
add_filter("login_headerurl","collage_custom_login_link");
add_filter("login_headertitle","collage_custom_login_title");
lets you edit the logo link. You use css to change the logo itself.

Very nice tutorial! Thank you very much!

Hey, great tutorial! I’m using it on my new website.

Is there a way to get rid of the link to wordpress? I don’t mind giving them credit in a link at the bottom or something instead, but this is my logo now!

Excellent article

Thanks a lot

this works really well if you’re replacing the default WordPress logo image with your own logo image file, but it doesn’t work if you’re using HTML/CSS to create the typography for your h1 header title

thankz.

Hey Michael,
I’m trying to do a simple customization of a login screen and I’m using this tutorial as a guide. All I really want to do is get a background image to repeat on my login page. Your tutorial also showed me how to change the wordpress logo to be larger than the default one(thanks).
Anyway, I used your css code example and altered it with my image information.
Here’s what I have: (I know I’ll probably need to change the repeat-x to just a repeat to get my image to repeat in both directions, but I just want to get it to show up without altering your code too much first.

/* Custom Login Styles */
 
html {background:#002653 url(../images/BSFD_BlueBackgroundSquare.png) 0 0 repeat-x;} /* Page background. Can’t use the body tag for this! */
h1 a { /* Title image (The “WordPress Logo”). Remember to update the height and width your image’s dimensions */
background:url(../images/bsfd_login-logo.png) 0 0 no-repeat;
width:500px;
height:136px;
}
 
body.login {border-top-color:#dff4fc;} /* Top bar background color */
.login p#backtoblog a:link, .login p#backtoblog a:visited {color:#17272d;} /* Link effects in top bar */
.login p#backtoblog a:hover, .login p#backtoblog a:active {color:#17272d;text-decoration:underline;} /* Rollover link effects in top bar */

The custom logo (bsfd_login-logo.png) is working fine, but my background image (BSFD_BlueBackgroundSquare.png) is not showing up on my login page and the background color doesn’t appear to be working either (not that I’ll need it once my repeating image shows up). I have both logos in the images folder for my theme (suffusion). I am using Worpress version 3.0.1.

Here is a link to my login page http://bsfd.org/schedule/wp-login.php.

Do you see anything wrong with my code? I’m not a css expert by any means. Any help you could offer would be great!
Thanks in advance.
Joel.