Having trouble building custom register/login page

Hi! I'm totally lost trying to create a custom login page from the article I found on your site. I use quite a few WPMU plugins, but for the custom login page I've been using Register Plus Rdeux. I've been trying to add in a custom background in the custom CSS area in the plugin and everything I try has seemed to fail! Now, whenever I visit my login page, it says
"Warning: call_user_func_array() expects parameter 1 to be a valid callback, function 'custom_login_css' not found or invalid function name in /hermes/bosoraweb023/b2155/ipg.fairyatheartcom/Manifestation-Connection/wp-includes/plugin.php on line 406"

Everything I've tried, from uninstalling the plugin to looking at the actual code (not touching anything because honestly I'm a little scared that it will break something), hasn't worked to get rid of the error message. I've been working on this login page for over a week and have had no success...can you help me?

Thank you so much!
Kindest regards,
Audrey

  • Audrey

    Thank you!

    Ok , so I changed the theme and it helped. I'm going to uninstall and reinstall my previous theme and hopefully it will still work.

    I have a few other issues. I'm trying to get a custom background to show and it still isn't working, is this the proper CSS?

    body.login {
    background: #fbfbfb url('http://www.manifestationconnection.com/wp-content/uploads/2013/09/regularjanes-SOFT-GLOW-Bokeh-pack.jpg') no-repeat fixed center;
    }

    I am also trying to change the button style using the CSS from https://premium.wpmudev.org/blog/customize-wordpress-login/ but it also isn't showing.

    The final thing I am trying to do is change the entire Register/login/logo module's location on the page, higher and to the left so that it is above the fold. Is there a custom CSS I can input to move it around on the page.

    I really appreciate your help!

  • Audrey

    Sure! Thank you, I'll take a look at the password input...it's really strange.

    I'm using Register Plus Redux right now to do all of my modifications because going into the files and stylesheets seems way above my head at this point.

    So with Register Plus Redux, there is a custom CSS file that overrides the theme's login CSS and inserts the custom CSS. As of right now I'm using a series of commands to update the logo, box color/transparency/drop shadow, and the login button.

    All this code works, but it's a little slow. This is what I have running as of right now on

    http://www.manifestationconnection.com/wp-login.php?action=register

    .login h1 a {
    	background-image: url('http://www.manifestationconnection.com/?attachment_id=118');
    	background-size: 330px 207px;
    	width: 330px;
    	height: 207px;
    }
    
    .login form {
    	margin-left: auto;
    	margin-right: auto;
    	padding: 30px;
    	border: 1px solid rgba(0,0,0,.2);
    	-moz-border-radius: 5px;
    	-webkit-border-radius: 5px;
    	border-radius: 5px;
    	-moz-background-clip: padding;
    	-webkit-background-clip: padding-box;
    	background-clip: padding-box;
    	background: rgba(121,193,252,0.4);
    	-moz-box-shadow: 0 0 13px 3px rgba(0,0,0,.5);
    	-webkit-box-shadow: 0 0 13px 3px rgba(0,0,0,.5);
    	box-shadow: 0 0 13px 3px rgba(0,0,0,.5);
    	overflow: hidden;
    }
    
    #login .button {
    	width: 260px;
    	height: 44px;
    	-moz-border-radius: 4px;
    	-webkit-border-radius: 4px;
    	border-radius: 4px;
    	float: center;
    	border: 1px solid #3d5a5a;
    	background: #23A2FC;
    	background: -webkit-gradient(linear,left top,left bottom,from(#23A2FC),to(#0070BF));
    	background: -webkit-linear-gradient(top,#23A2FC,#0070BF);
    	background: -moz-linear-gradient(top,#23A2FC,#0070BF);
    	background: -ms-linear-gradient(top,#23A2FC,#0070BF);
    	background: -o-linear-gradient(top,#23A2FC,#0070BF);
    	background-image: -ms-linear-gradient(top,#23A2FC 0%,#0070BF 100%);
    	padding: 10.5px 21px;
    	-webkit-border-radius: 6px;
    	-moz-border-radius: 6px;
    	border-radius: 6px;
    	-webkit-box-shadow: rgba(255,255,255,0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
    	-moz-box-shadow: rgba(255,255,255,0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
    	box-shadow: rgba(255,255,255,0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
    	text-shadow: #333333 0 1px 0;
    	color: #e1e1e1;
    }
    
    input.button-primary:hover {
    	border: 1px solid #3d5a5a;
    	text-shadow: #333333 0 1px 0;
    	background: #23A2FC;
    	background: -webkit-gradient(linear,left top,left bottom,from(#23A2FC),to(#0070BF));
    	background: -webkit-linear-gradient(top,#23A2FC,#0070BF);
    	background: -moz-linear-gradient(top,#23A2FC,#0070BF);
    	background: -ms-linear-gradient(top,#23A2FC,#0070BF);
    	background: -o-linear-gradient(top,#23A2FC,#0070BF);
    	background-image: -ms-linear-gradient(top,#23A2FC 0%,#0070BF 100%);
    	color: #fff;
    }
    
    input.button-primary:active {
    	margin-top: 1px;
    	text-shadow: #333333 0 -1px 0;
    	border: 1px solid #3d5a5a;
    	background: #6da5a3;
    	background: -webkit-gradient(linear,left top,left bottom,from(#23A2FC),to(#0070BF));
    	background: -webkit-linear-gradient(top,#23A2FC,#0070BF);
    	background: -moz-linear-gradient(top,#23A2FC,#0070BF);
    	background: -ms-linear-gradient(top,#23A2FC,#0070BF);
    	background: -o-linear-gradient(top,#23A2FC,#0070BF);
    	background-image: -ms-linear-gradient(top,#23A2FC 0%,#107FC4 100%);
    	color: #fff;
    	-webkit-box-shadow: rgba(255,255,255,0) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
    	-moz-box-shadow: rgba(255,255,255,0) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
    	box-shadow: rgba(255,255,255,0) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
    }
    }

    I've been trying fruitlessly for a long time to insert a background image for the screen, as well as moving the entire unit (Logo, login box, text) to the left and up so that more of it is above the fold. I'm wondering if I can find a plugin that will help me do that in conjunction with Register Plus Redux (they handle custom fields and my auto-mailing for signup etc.)....or just some custom CSS I can plug in to get my background to work!

  • Audrey

    Ok! So finally I figured out how to get it to work! It's fabulous, but now my login/register page won't scroll! I'm not exactly sure what's up. I'm using the plugin Skin Login with the custom CSS:

    .login #login {
            margin-top: 1px;
            margin-left:auto;
            margin-right: auto;
            padding: 0px!important;
    	border: 1px solid rgba(0,0,0,.2);
    	-moz-border-radius: 5px;
    	-webkit-border-radius: 5px;
    	border-radius: 5px;
    	-moz-background-clip: padding;
    	-webkit-background-clip: padding-box;
    	background-clip: padding-box;
    	background: rgba(121,193,252,0.4);
    	-moz-box-shadow: 0 0 13px 3px rgba(0,0,0,.5);
    	-webkit-box-shadow: 0 0 13px 3px rgba(0,0,0,.5);
    	box-shadow: 0 0 13px 3px rgba(0,0,0,.5);
    	overflow: hidden;
    }
    .login form {
    	margin-left: auto;
            margin-right: auto;
    	padding: 25px;
    	background: rgba(121,193,252,0.0);
    	overflow: hidden;
    }

    http://www.manifestationconnection.com/wp-login.php?action=register

    I'm trying to figure it out with custom CSS...something is going on and I'm just not sure what.

    Thank you so much for all your help!!!

  • jmskarte

    Hello Audrey,

    Your page looks good now. Good job :slight_smile:
    only thing left is that the password input is missing a class of input

    if you are unable to apply input class to password fields. you can try following alternative as well

    .login #pass1, .login #pass2 {
    color: #555;
    font-weight: 200;
    font-size: 24px;
    line-height: 1;
    width: 100%;
    padding: 3px;
    margin-top: 2px;
    margin-right: 6px;
    margin-bottom: 16px;
    border: 1px solid #e5e5e5;
    background: #fbfbfb;
    outline: 0;
    -webkit-box-shadow: inset 1px 1px 2px rgba(200,200,200,0.2);
    box-shadow: inset 1px 1px 2px rgba(200,200,200,0.2);
    }

    Let me know how it goes!

    Best Regards
    James

  • Audrey

    Awesome, thank you! I plugged that in and it works!

    The only other issue I'm having is that on a small monitor the form is cut off for the bottom two fields, and the page won't scroll for some reason. (I think it's a plugin issue) My final question is, is there some custom CSS to make the login form element scroll over the background image? (so the image isn't scrolling just the .login #login element) I've seen it done in themes where it's in "boxed" rather than "full width" mode and I was wondering if I could add this to my login/register page with custom CSS. Thank you so so so much for all your help!

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.