Snippets

Custom WP Login – Full Screen Background

Got tired of using WP Plugins so I decided to knock together a quick theme functions snippet, You’ll notice by the sample I’ve edited the Background, Logo, Submit Button & Links. Just upload your images needed to the images folder within your current themes folder and replace the snippets image urls with yours, Once done paste snippet into your themes functions.php document and hit upload file.

I’ve also changed the link colours to change these simply find the current colours and tweak to what ever colour you like.

Thank you for reading & Enjoy

//--------------- Login Screen Wallpaper ---------------//			
	
	function login_enqueue_scripts(){
		echo '
			<div class="background-cover"></div>
			<style type="text/css" media="screen">
				.background-cover
					{
						background:url('.get_bloginfo('template_directory').'/images/background) no-repeat center center fixed; 
						-webkit-background-size: cover; 
						-moz-background-size: cover; 
						-o-background-size: cover; 
						background-size: cover; 
						position:fixed; 
						top:0; 
						left:0; 
						z-index:10; 
						overflow: hidden; 
						width: 100%; 
						height:100%;
					} 
				#login
					{
						z-index:9999; 
						position:relative;
					}
				.login form
					{
						-moz-box-shadow: 0px 0px 0px 0px !important;
						-webkit-box-shadow: 0px 0px 0px 0px !important;
						box-shadow: 0px 0px 0px 0px !important;
					}
				.login h1 a
					{
						background:url('.get_bloginfo('template_directory').'/images/logo.png) no-repeat center top !important; 
					} 
				input.button-primary, button.button-primary, a.button-primary
					{
						-moz-border-radius: 3px !important;
						-webkit-border-radius: 3px !important;
						border-radius: 3px !important; 
						-khtml-border-radius: 3px !important;
						background:url('.get_bloginfo('template_directory').'/images/button.jpg); 
						border:none !important;
						font-weight:normal !important;
						text-shadow:none !important;
					}
				.button:active, .submit input:active, .button-secondary:active
					{
						background:#96C800 !important; 
						text-shadow: none !important;
						
					}
				.login #nav a, .login #backtoblog a
					{
						color:#fff !important;
						text-shadow: none !important;
					}
				.login #nav a:hover, .login #backtoblog a:hover
					{
						color:#96C800 !important;
						text-shadow: none !important;
					}
				.login #nav, .login #backtoblog
					{
						text-shadow: none !important;
					}
				</style>
		';
	}
	add_action( 'login_enqueue_scripts', 'login_enqueue_scripts' );

Source: http://www.media21a.co.uk/themes/muddywater4x4/wp-login.php...

Share this snippet

 

Comments (6) - Leave yours

  1. nyamsprod said:

    Why writing everything in the function.php I’d rather do something cleaner like for instance
    - Add all my css rules in a file, let’s call the file login.css
    - rewrite your long function like this

    add_action(‘login_enqueue_scripts’, ‘mytheme_login_style’);
    function mytheme_login_style() {
    echo ”, PHP_EOL;
    }

    it’s cleaner and easier to edit without fear from screwing up your entire function.php IMHO

    • nyamsprod said:

      My code was remove but what I wanted to echo is just the line of code to display the HTML tag link that point to the login.css file and that’s it!

    • nyamsprod said:

      you seem to add a div with the class background-cover but it’s really not necessary … on WordPress login page there’s a class on the body element so you can add your background by simple adding your rules to body.login … it’s easier too and you don’t add extra markup to the page :)

    • Adam Wadsworth said:

      I dropped all CSS into the just to make easier for people to edit and play around with it, without the need to be uploading multiple style sheets, But saying that I could have linked the style sheet upto the current themes style.css documents.. Cheers for all your input dude.

  2. Niels van Asselt said:

    Hello Adam,

    Was looking for an easy way to customize the login screen without use of a plugin. It looks like the snippet works like a charm but when I opened the website on a smartphone the background image does some strange things when scrolling. Do you know what I can do about that? Have tested it on Android and iPhone.

    Regards, Niels

  3. Niels van Asselt said:

    Never mind, I found a simple jQuery plugin that allows me to add a dynamically-resized background image to any page. I combined this with your code to create a custom login page. Link to the plugin: http://srobbin.com/jquery-plugins/backstretch/ Works great on mobile devices.

    Regards Niels

Leave a Reply

Your email address will not be published. Required fields are marked *

Please respect the following rules: No advertising, no spam, no keyword in name field. Thank you!