Support » Plugin: Theme My Login » 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!

    http://wordpress.org/plugins/theme-my-login/

  • The topic ‘Custom Implementation’ is closed to new replies.