Custom WordPress Login Screen
February 19th, 2011 at 01:16pm Jason 211 views
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.
1. Functions.php
<?php function custom_login() { echo '<link rel="stylesheet" type="text/css" href="'.get_bloginfo('template_directory').'/custom-login/custom-login.css" />'; } add_action('login_head', 'custom_login'); ?>
2. Add New CSS Rules
html {background:#17272d url(../images/pbd-body.jpg) 0 0 repeat-x;}
A Simple Template Example
/* Custom Login Styles */ html {background:#17272d url(../images/pbd-body.jpg) 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/pbd-title.png) 0 0 no-repeat; width:415px; height:70px; } 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 */
via: http://www.problogdesign.com/wordpress/custom-wordpress-login-screen/
Entry Filed under: WordPress Tagged with: wordpress
Hot Posts Hot Comments Hot Tags
- apartment bbpress blog class CMS code CSS div dream english friends girl Google hot Hot Dog html job JS life lines love Madonna menu Michael Jackson movie oral english PHP plugin saying school sexy site student students submenu success tags teacher teaching txt university video website widget wordpress
Leave a Comment
Some HTML allowed:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">
Trackback this post | Subscribe to the comments via RSS Feed