Contents
Original code taken from here: http://www.problogdesign.com/wordpress/custom-wordpress-login-screen/
The WordPress admin login page is very easy to customize. With the code below, you can add your own CSS to the login page and make it look however you like.
Best of all, your customizations are all done in your theme files, so the changes will stay when you upgrade WordPress.
Edit your functions.php file
Your theme may or may not have a functions.php file in it already. If it does, paste the code below into the bottom of it. If not, just create a blank file in Notepad and save it with that name.
And remember not to leave any space before or after the <?php and ?> tags as you do this!
function my_custom_login_logo() { echo '<style type="text/css"> h1 a { background-image:url('.get_bloginfo('template_directory').'/images/custom-login-logo.gif) !important; } </style>'; } add_action('login_head', 'my_custom_login_logo');
Edit your theme file
We will need a place to store your new CSS styles and any images you might use. Seeing that they aren’t part of the main site, let’s create a new folder for them.
Create a folder in your theme’s folder and call it “custom-login“.
And inside that folder create a new stylesheet called “custom-login.css”.
Add New CSS Rules
/* Custom Login Styles */ html {background:#003050 url(logo-login.jpg) center 5px no-repeat;font-weight:bold;} /* Page background. Can't use the body tag for this! */ body.login { border-top-color:#011b2d;} /* Top bar background color */ .login p#backtoblog a:link, .login p#backtoblog a:visited {color:#fff;} /* Link effects in top bar */ .login p#backtoblog a:hover, .login p#backtoblog a:active {color:#fff; text-decoration:underline;} /* Rollover link effects in top bar */ /* Use both of these rules if you want to remove the bar across the top of the wordprtess login page. */ body.login { border-top:solid 0px #011b2d; } .login p#backtoblog a:link, .login p#backtoblog a:visited , .login p#backtoblog a:hover, .login p#backtoblog a:active { display:none; } h1 a { /* Title image (The "WordPress Logo"). Remember to update the height and width your image's dimensions */ background:url() 0 0 no-repeat; width:0px; height:0px; margin-bottom:20px; } #login { width: 320px; margin-top: 300px; margin-right: auto; margin-bottom: 7em; margin-left: auto; }
Replace dashboard logo with yours
Just as a client will love to see their own logo on WordPress login page, there’s no doubt that they’ll enjoy viewing it on the dashboard too.
Simply copy the code below and paste it to your <em>functions.php</em> file.
add_action('admin_head', 'my_custom_logo'); function my_custom_logo() { echo '<style type="text/css"> #header-logo { background-image: url('.get_bloginfo('template_directory').'/images/custom-logo.gif) !important; }</style>'; }
Revisions
There are no revisions for this post.
No comments yet.