Styling the Admin Login

[wvcaudill2]

Hello, I designed a new login box for TutorialMS, but I cant figure out how to implement it correctly. I tried coding it here: http://www.newtuts.com/admin/login2.php

Obviously it didnt work, so im going to upload the PSD file for the administrator login box, and you guys can use it if you want. All I ask is that if you figure out how to make it work correctly, you share it with the rest of us.

Click here to download the PSD

[utjames]

(06-04-2009 08:11 PM)wvcaudill2 Wrote:  All I ask is that if you figure out how to make it work correctly, you share it with the rest of us.

Hi,

I've uploaded some edits of your PSD in a zip file - I had to break the layers up into three separate pics:
cp_login.gif
cp_button.gif
cp_input.gif

Click here to download cp_login.zip

Place the three gif's into your admin/images directory.

Next, in your admin/login.php, replace everything with the following:

Code:

<?php
/*
*  Copyright: (C) 2008 TutorialMS
*              
*  This file is part of TutorialMS.                            
*                                                                            
* TutorialMS is free software: you can redistribute it  
* and/or modify it under the terms of the GNU General    
* Public License as published by the Free Software        
* Foundation, either version 3 of the License, or        
* (at your option) any later version.                            
*                                                                            
* TutorialMS is distributed in the hope that it will be  
* useful, but WITHOUT ANY WARRANTY; without even the    
* implied warranty of MERCHANTABILITY or FITNESS FOR A  
* PARTICULAR PURPOSE.  See the GNU General Public            
* License for more details.                                        
*                                                                            
* You should have received a copy of the GNU General     
* Public License along with TutorialMS.                      
* If not, see <http://www.gnu.org/licenses/>.            
*/
$loginpage = true;
include('includes/header.php');
?>
<?php
if(isset($_POST['submitted'])) {
$username = $_POST['user'];
$password = $_POST['pass'];
$error = '';
$encpassword = md5($password);
    if($username == NULL || $password == NULL) {
        $error='A required field was left blank. <br />';
    }
    if($error == '') {
        $usernameexist = mysql_query("SELECT COUNT(`id`) AS 'usernameexist' FROM `admin` WHERE `name`='".$username."'");
        $data = mysql_fetch_array($usernameexist);
        if($data['usernameexist'] == 0) {
            $error = 'The username you provided does not exist.<br />';
        }
        
        if($error=='') {
            $result = mysql_query("SELECT COUNT(`id`) AS 'validate' FROM `admin` WHERE `password`='".$encpassword."' AND `name`='".$username."'");
            $row = mysql_fetch_array($result);
            if($row['validate']==1) {
                $result = mysql_query("SELECT `name` FROM `admin` WHERE `password`='".$encpassword."' AND `name`='".$username."'") or die(mysql_error());
                $row = mysql_fetch_array($result);
                $_SESSION['admin_user'] = $row['name'];
                echo "<script language=\"JavaScript\">";
                echo "window.location = 'index.php' ";
                echo "</script>";
                die();
            }else{
                $error.='The password you provided was incorrect.<br />';
            }
        }
    }
        
}
?>
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="margin-top:100px;">
    <tr align="left" valign="top">
        <td align="center">
            <table width="400" height="400" class="SubBoxes" cellspacing="0" style="background: url(images/cp_login.gif) left no-repeat;">
                <tr valign="top">
                    <td align="center">
                    <br /><br /><br /><br /><br /><br /><br />
                        <form action="login.php" method="POST"><input type="hidden" name="submitted" value="1" />
                            <table border="0" cellpadding="0" cellspacing="0">                                
                                <tr>
                                    <td align="center"><input type="text" maxlength="15" size="" class="Formstyles" style="width:307px;height:41px;margin: 0 0 0 20px;padding:10px 10px 10px 10px;font-size:15px;color:#525252;border:0;background: url(images/cp_input.gif) no-repeat;" value="Username" onClick="this.value=''" name="user" /></td>
                                </tr>
                                <tr>
                                    <td align="center"><input type="password" maxlength="15" size="" class="Formstyles" style="width:307px;height:41px;margin: 0 0 0 20px;padding:10px 10px 10px 10px;font-size:15px;color:#525252;border:0;background: url(images/cp_input.gif) no-repeat;" value="Password" onClick="this.value=''" name="pass" /></td>
                                </tr>
                                <tr>
                                    <td align="center" colspan="2"><br /><br /><input type="image" value="Login" src="images/cp_button.gif" name="submit" /></td>
                                </tr>
                                <?php
                                    global $error;
                                    
                                    if(!$error=='') {
                                        echo '<tr>
                                                  <td align="center" colspan="2" class="SubmitError">'.$error.'</td>
                                              </tr>';
                                    }
                                ?>
                            </table>
                        </form>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
    <?php include('includes/footer.php'); ?>
</table>
</body>
</html>

It holds together in IE7, IE8, Firefox, and Opera.

Nice design Thanks for sharing!

[NoX]

i can't see the new login page
only blank page..

[wvcaudill2]

Thanks, it works perfectly! You can see it here: Login Page

[NoX]

looks nice

[wvcaudill2]

(06-05-2009 05:54 PM)NoX Wrote:  looks nice

Thanks

[ghdfans2010]

Wow !Interesting!Could you teach me ?

[NoX]

(06-16-2010 10:31 AM)ghdfans2010 Wrote:  Wow !Interesting!Could you teach me ?

Hey,

it's easy to integrate

1. Download the files from: http://www.usertutor.com/cp_login.zip
2. open the file /admin/login.php and replace the old code with the code from second post.
3. save
4. upload
5. test it: http://www.your-domain.tld/admin/
6. say thanks