WEST SIDE CALI KILLERS
Glossy Login Tutorial 23104840
WEST SIDE CALI KILLERS
Glossy Login Tutorial 23104840
WEST SIDE CALI KILLERS
Would you like to react to this message? Create an account in a few clicks or log in to continue.


HOME OF WSCK CLAN
 
HomeSearchLatest imagesstoreRegisterLog in

Share
 

 Glossy Login Tutorial

View previous topic View next topic Go down 
AuthorMessage
CSS_Helper
Private
Private
CSS_Helper

Country : USA
Posts : 14
Caps : 15
Times Thanked : 0
Age : 25
Location : Modesto, Ca
Browser : Chrome

Glossy Login Tutorial Empty
PostSubject: Glossy Login Tutorial   Glossy Login Tutorial I_icon_minitimeTue 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.]
Back to top Go down
 

Glossy Login Tutorial

View previous topic View next topic Back to top 
Page 1 of 1

 Similar topics

-
» Sony Vegas Pro [10/11] Tutorial: How to add a watermark to a video

Permissions in this forum:You cannot reply to topics in this forum
WEST SIDE CALI KILLERS :: Computer Related :: Coding :: CSS-