CSS_Helper Private
Country : Posts : 14 Caps : 15 Times Thanked : 0 Age : 25 Location : Modesto, Ca Browser :
| Subject: Glossy Login Tutorial Tue Aug 07, 2012 9:00 pm | |
| This Tutorial was made by The_Graphics and I'm going to show you how to put your own Login on your site Step 1.Go to the Admin Panel and go to Display > Templates > General > index_body and Modify it and find this whole chunk of code That's the top Login header Code if you want to replace it with my Login bar - Code:
-
<!-- BEGIN switch_user_login_form_header --> <div class="main"> <form action="{S_LOGIN_ACTION}" method="post" name="form_login"> <div class="user_login_form main-box center"> <label><span class="genmed">{L_USERNAME} :</span> <input class="post" type="text" size="10" name="username" /></label> <label><span class="genmed">{L_PASSWORD} :</span> <input class="post" type="password" size="10" name="password" /></label> <label><span class="gensmall">{L_AUTO_LOGIN}</span> <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} /></label> {S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /> <!-- BEGIN switch_fb_connect --> <span class="fb_or">{switch_user_login_form_header.switch_fb_connect.L_OR}</span> <fb:login-button size="large" onlogin="window.location='/facebook_connect.forum'" v="2" scope="{switch_user_login_form_header.switch_fb_connect.L_FB_PERMISSIONS}">{switch_user_login_form_header.switch_fb_connect.L_FB_LOGIN_BUTTON}</fb:login-button> <!-- END switch_fb_connect --> </div> </form> </div> <!-- END switch_user_login_form_header --> if you DONT want to replace that one replace the footer Login find this code in your templates - Code:
-
<!-- BEGIN switch_user_login_form_footer --> <form action="{S_LOGIN_ACTION}" method="post" name="form_login"> <div class="user_login_form main-box center"> <label><span class="genmed">{L_USERNAME} :</span> <input class="post" type="text" size="10" name="username"/></label> <label><span class="genmed">{L_PASSWORD} :</span> <input class="post" type="password" size="10" name="password"/></label> <label><span class="gensmall">{L_AUTO_LOGIN}</span> <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} /></label> {S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /> <!-- BEGIN switch_fb_connect --> <span class="genmed fb_or">{switch_user_login_form_footer.switch_fb_connect.L_OR}</span> <fb:login-button size="large" onlogin="window.location='/facebook_connect.forum'" v="2" scope="{switch_user_login_form_footer.switch_fb_connect.L_FB_PERMISSIONS}">{switch_user_login_form_footer.switch_fb_connect.L_FB_LOGIN_BUTTON}</fb:login-button> <!-- END switch_fb_connect --> </div> </form> <!-- END switch_user_login_form_footer --> Step 2.Replace anyone of those, Your choice Next is replace anyone of those Login header or footer either one and replace it with mine - Code:
-
<!-- BEGIN switch_user_logged_out --> <div class="login_box"> <form action="{S_LOGIN_ACTION}" method="post" name="form_login"><div class="login_gloss"><center>Login Information</center></div> <input class="post" type="text" placeholder="Username" name="username" required="" id="user" /><br> <input class="post" type="password" placeholder="Password" name="password" required="" id="user" /><br> <input type="submit" name="login" class="edit_button" value="{L_LOGIN}" /> </form> </div> <!-- END switch_user_logged_out --> Step 3.then go to Pictures and colors > Pics management > Colors > CSS Style sheet then put this whole chunk of code in - Code:
-
.login_gloss { padding-bottom: 15px; border-bottom: 1px dashed #d7d7d7; color: #773315; margin-top: 10px; margin-bottom: 10px; font-family: Lobster; font-size: 28px; font-weight: 500; }
.edit_button:active {box-shadow: 0 1px 7px rgba(24, 148, 201, 0.6) inset;} .edit_button { text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4); box-shadow: 0 1px 0px rgba(75, 186, 233, 0.5) inset; position: relative; background-image: linear-gradient(bottom, #1A7DD3 0%, #2CAEE5 100%); background-image: -o-linear-gradient(bottom, #1A7DD3 0%, #2CAEE5 100%); background-image: -moz-linear-gradient(bottom, #1A7DD3 0%, #2CAEE5 100%); background-image: -webkit-linear-gradient(bottom, #1A7DD3 0%, #2CAEE5 100%); background-image: -ms-linear-gradient(bottom, #1A7DD3 0%, #2CAEE5 100%); background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #1A7DD3),color-stop(1, #2CAEE5)) !important; padding: 9px; margin-top: 16px; left: 220px; width: 100px; height: 35px; border: 1px solid #188ec0; color: white; font-weight: bold !important; font-size: 13px !important; font-family: Arial !important; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }
#user { width: 170px; height: 20px; position: relative; left: 176px; top: 4px; } .login_box { box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); -webkit-border-radius: 60px 5px; -moz-border-radius: 60px/5px; border-radius:60px/5px; border: 1px solid #ddd; height: 240px; width: 530px; background-image: linear-gradient(bottom, #EBEBEB 25%, #FCFCFC 100%); background-image: -o-linear-gradient(bottom, #EBEBEB 25%, #FCFCFC 100%); background-image: -moz-linear-gradient(bottom, #EBEBEB 25%, #FCFCFC 100%); background-image: -webkit-linear-gradient(bottom, #EBEBEB 25%, #FCFCFC 100%); background-image: -ms-linear-gradient(bottom, #EBEBEB 25%, #FCFCFC 100%); background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0.25, #EBEBEB),color-stop(1, #FCFCFC)); } @font-face { font-family: 'Lobster'; font-style: normal; font-weight: 400; src: local('Lobster'), url(http://themes.googleusercontent.com/static/fonts/lobster/v5/MWVf-Rwh4GLQVBEwbyI61Q.woff) format('woff'); } and it Should be like this [You must be registered and logged in to see this image.] |
|