Title: Custom Implementation
Last modified: August 21, 2016

---

# Custom Implementation

 *  [rodritank](https://wordpress.org/support/users/rodritank/)
 * (@rodritank)
 * [12 years, 6 months ago](https://wordpress.org/support/topic/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](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](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/](http://wordpress.org/plugins/theme-my-login/)

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

 * ![](https://ps.w.org/theme-my-login/assets/icon-256x256.png?rev=1891232)
 * [Theme My Login](https://wordpress.org/plugins/theme-my-login/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/theme-my-login/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/theme-my-login/)
 * [Active Topics](https://wordpress.org/support/plugin/theme-my-login/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/theme-my-login/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/theme-my-login/reviews/)

## Tags

 * [css](https://wordpress.org/support/topic-tag/css/)
 * [customization](https://wordpress.org/support/topic-tag/customization/)
 * [php](https://wordpress.org/support/topic-tag/php/)
 * [tml](https://wordpress.org/support/topic-tag/tml/)

 * 0 replies
 * 1 participant
 * Last reply from: [rodritank](https://wordpress.org/support/users/rodritank/)
 * Last activity: [12 years, 6 months ago](https://wordpress.org/support/topic/custom-implementation/)
 * Status: not resolved