WEST SIDE CALI KILLERS


HOME OF WSCK CLAN
 
HomeCalendarFAQSearchMemberlistUsergroupsstoreRegisterLog in

Share | 
 

 Glossy Login Tutorial

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

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

PostSubject: 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.]
Back to top Go down
 

Glossy Login Tutorial

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

 Similar topics

-
» login 3 times only?
» Power Sword Tutorial (with more to follow)
» good c++ tutorial series
» Battle Chronicler Tutorial
» Vehicle Weathering Tutorial

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