Custom Implementation
-
Hey guys, WP and PHP newbie here.
Got this pretty awesome TML plugin here, but my client needs a different implementation/layout of it. So I’ve been messing with login-form.php and theme-my-login.css but I haven’t gotten what I really need.
I need something like this: http://i.imgur.com/ArGZglI.jpg
So far, what I have been trying:
– on the theme’s header.php, I am calling theme_my_login();
– made some css adaptations, they don’t seem to work. pic here and codes below:form-login:
<?php ?> <div class="login" id="theme-my-login<?php $template->the_instance(); ?>"> <?php $template->the_action_template_message( 'login' ); ?> <?php $template->the_errors(); ?> <div id="form-wrapper"> <form name="loginform" id="loginform<?php $template->the_instance(); ?>" action="<?php $template->the_action_url( 'login' ); ?>" method="post"> <div id="form-user"> <div id="label-user"> <label for="user_login<?php $template->the_instance(); ?>"> <?php _e( 'Username' ); ?> </label> </div> <div id="input-user"> <input type="text" name="log" id="user_login<?php $template->the_instance(); ?>" class="input" value="<?php $template->the_posted_value( 'log' ); ?>" size="20" /> </div> </div> <div id="form-pass"> <div id="label-pass"> <label for="user_pass<?php $template->the_instance(); ?>"> <?php _e( 'Password' ); ?> </label> </div> <div id="input-pass"> <input type="password" name="pwd" id="user_pass<?php $template->the_instance(); ?>" class="input" value="" size="20" /> </div> </div> <?php do_action( 'login_form' ); ?> <div id="submit-data" class="submit"> <input type="submit" name="wp-submit" id="wp-submit<?php $template->the_instance(); ?>" value="<?php esc_attr_e( 'Log In' ); ?>" /> <input type="hidden" name="redirect_to" value="<?php $template->the_redirect_url( 'login' ); ?>" /> <input type="hidden" name="instance" value="<?php $template->the_instance(); ?>" /> <input type="hidden" name="action" value="login" /> </div> <div id="remember-data"> <p class="forgetmenot"> <input name="rememberme" type="checkbox" id="rememberme<?php $template->the_instance(); ?>" value="forever" /> <label for="rememberme<?php $template->the_instance(); ?>"> <?php esc_attr_e( 'Remember Me' ); ?> </label> </p> </div> </form> <div id="action-data"> <?php $template->the_action_links( array( 'login' => false ) ); ?> </div> </div> </div>
css:
form { display: inline; } p { color: #FFFFFF; } label { vertical-align: top; display: inline-block; } #form-wrapper { display: inline; float:right; vertical-align: middle; } #form-user { float:left; vertical-align:middle; } #form-pass { float:right; vertical-align:middle; } #input-user { float:left; vertical-align:middle; } #input-pass { float:right; vertical-align:middle; } #form-user { float:left; vertical-align:middle; } #form-pass { float:right; vertical-align:middle; } #submit-data { float:right } .pass { padding-left: 10px; } .user { padding-left: 10px; } #login-shape { width:650px; height:200px; position:relative; z-index:10; display:inline-block; } #action-data { float:right; } #action-data ul { display:block; } #action-data ul li { float:left; padding-left: 5px; } #remember-data { float: right; } .login { padding: 5px; } .login p.error { padding: 5px; border: 1px solid #c00; background-color: #ffebe8; color: #333; } .login p.message { padding: 5px; border: 1px solid #e6db55; background-color: #ffffe0; color: #333; } .login form label { display: inline-block; } .login form p.forgetmenot label { display: inline-block; } .login input { margin: 5px 0; } .profile .screen-reader-text, .profile .screen-reader-text span { height: 1px; left: -1000em; overflow: hidden; position: absolute; width: 1px; } .mu_register .hint { font-size: 12px; margin-bottom: 10px; display: block; } .mu_register label.checkbox { display: inline; } #pass-strength-result { border-style: solid; border-width: 1px; margin: 12px 5px 5px 1px; padding: 3px 5px; text-align: center; width: 200px; } #pass-strength-result.strong, #pass-strength-result.short { font-weight: bold; } #pass-strength-result { background-color: #eee; border-color: #ddd !important; } #pass-strength-result.bad { background-color: #ffb78c; border-color: #ff853c !important; } #pass-strength-result.good { background-color: #ffec8b; border-color: #fc0 !important; } #pass-strength-result.short { background-color: #ffa0a0; border-color: #f04040 !important; } #pass-strength-result.strong { background-color: #c3ff88; border-color: #8dff1c !important; }
result: http://i.imgur.com/R9pDMXs.jpg
Also, when the user logs in, the login form is still there. How can I make it to display the user’s Name and link to his cpanel?
Thanks in advance!
- The topic ‘Custom Implementation’ is closed to new replies.