Note:   Chào mừng bạn đã đến với diễn đàn Sweet Dream !

You are not connected. Please login or register

Xem chủ đề cũ hơn Xem chủ đề mới hơn Go down Thông điệp [Trang 1 trong tổng số 1 trang]

avatar

Prince379

Xem lý lịch thành viên
Demo:


Cách làm :

Vào Footer Begin thêm đoạn code sau vào cuối

Code:

<script type="text/javascript">
        $(document).ready(function() {

            $(".signin").click(function(e) {
                e.preventDefault();
                $("fieldset#signin_menu").toggle();
                $(".signin").toggleClass("menu-open");
            });

            $("fieldset#signin_menu").mouseup(function() {
                return false
            });
            $(document).mouseup(function(e) {
                if($(e.target).parent("a.signin").length==0) {
                    $(".signin").removeClass("menu-open");
                    $("fieldset#signin_menu").hide();
                }
            });           

        });
</script>

Tiếp theo vào HEader chèn bảng đăng nhập này vào chỗ nào mình muốn

Code:
<!-- BEGIN switch_user_logged_out -->

    <div id="container12">
  <div id="topnav" class="topnav"> Have an account? <a href="login" class="signin" style=""><span>Login</span></a>
 <a href="/register" class="register" style=""><span>Register</span></a> </div>
  <fieldset id="signin_menu" style="display: none; ">

                            <form action="/login?redirect=/" method="post" name="form_login" id="signin">

      <label for="username">Tên Đăng Nhập</label>
 <input class="field" id="log" type="text" size="10" name="username">
        <label for="password">Mật Khẩu</label>
<input class="field" id="pwd" type="password" size="10" name="password">
 <input id="signin_submit" class="bt_login" type="submit" name="login" value="Đăng nhập">
 <label>
  <input name="rememberme" id="rememberme" type="checkbox" checked="checked" value="forever">  Nhớ tôi</label>
      <p class="forgot"> <a href="profile?mode=sendpassword">Quên mật khẩu</a> </p>


                <div class="clear"></div>
 </form>
 <script type="text/javascript">//<![CDATA[
$(function(){$('#signin').attr('action','/login?redirect='+this.location.pathname);});//]]></script>

  </fieldset>
</div> 
 
    <!-- END switch_user_logged_out -->

Cuối cùng cho cái này vào Css :

Code:
/* SinhVienVT.Net Custom Login */
#container12 {
    float:right;
    margin:0 auto;
      margin-top: -6px;
    position: relative;
}




a img {
    border-width:0;
}
#topnav {
    padding:10px 0px 12px;
    font-size:11px;
    line-height:23px;
    text-align:right;
}
#topnav a.signin {
background: #0D3156;
padding: 4px 6px 6px;
text-decoration: none;
font-weight: bold;
color: white;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
#topnav a.signin:hover {
background: #15579B;
}
#topnav a.signin, #topnav a.signin:hover {
}
a.signin {
    position:relative;
    margin-left:3px;
}

a.signin span {
background-image: url("http://4r.ninja9x.net/login/images/toggle_down_light.png");
background-repeat: no-repeat;
background-position: 100% 50%;
padding: 4px 16px 6px 0;
}
#topnav a.register {
background: #0D3156;
padding: 4px 6px 6px;
text-decoration: none;
font-weight: bold;
color: white;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
#topnav a.register:hover {
background: #15579B;
}
#topnav a.register, #topnav a.register:hover {
}
a.register {
    position:relative;
    margin-left:0px;
}

a.register span {
    background-image:url("http://4r.ninja9x.net/login/images/register_light.png");
    background-repeat:no-repeat;
    background-position:100% 50%;
    padding:4px 16px 6px 0;
}


#topnav a.menu-open {
    background:#0d3156!important;
    color:#fff!important;
    outline:none;
}
#small_signup {
    display:inline;
    float:none;
    line-height:23px;
    margin:25px 0 0;
    width:170px;
}
a.signin.menu-open span {
    background-image:url("http://4r.ninja9x.net/login/images/toggle_up_light.png");
    color:#fff;
}

#signin_menu {
    -moz-border-radius-topleft:5px;
    -moz-border-radius-bottomleft:5px;
    -moz-border-radius-bottomright:5px;
    -webkit-border-top-left-radius:5px;
    -webkit-border-bottom-left-radius:5px;
    -webkit-border-bottom-right-radius:5px;
    display:none;
  /* background-color:#0d3156; */
    background:url(http://4r.ninja9x.net/login/images/login_back.png) #0d3156 repeat-x;
    position:absolute;
    width:210px;
    z-index:100;
    border:1px transparent;
    text-align:left;
    padding:12px;
    top: 24.5px;
    right: 0px;
    margin-top:5px;
    margin-right: 0px;
    *margin-right: -1px;
    color:#fff;
    font-size:11px;
}

#signin_menu input[type=text], #signin_menu input[type=password] {
    display:block;
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    border:1px solid #0d3156;
    background:url(http://4r.ninja9x.net/login/images/field_back.png) repeat-x;
    font-size:13px;
    margin:0 0 5px;
    padding:5px;
    width:203px;
}
#signin_menu p {
    margin:0;
}
#signin_menu a {
    color:#fff;
}
#signin_menu label {
    font-weight:normal;
}
#signin_menu p.remember {
    padding:10px 0;
}
#signin_menu p.forgot, #signin_menu p.complete {
    clear:both;
    margin:5px 0;
}
#signin_menu p a {
    color:#fff!important;
}
#signin_menu p a:hover {
    text-decoration:underline;
}

#signin_submit {
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    background-color:#0d3156;
    border:1px solid #fff;
    color:#fff;
    text-shadow:0 -1px 0 #39d;
    padding:4px 10px 5px;
    font-size:11px;
    margin:0 5px 0 0;
    font-weight:bold;
}
#signin_submit::-moz-focus-inner {
padding:0;
border:0;
}
#signin_submit:hover, #signin_submit:focus {
    background-position:0 -5px;
    cursor:pointer;
}

Chú ý : đoạn code sau trong css là đoạn bạn muốn hiển thị bảng đăng nhập đó ở chỗ nào có thể

Code:
#container12 {
    float:right;
    margin:0 auto;
      margin-top: -6px;
    position: relative;
}

Share this post on:diggdeliciousredditstumbleuponslashdotyahoogooglelive

  • avatar

    Bài gửi on Thu Apr 18, 2013 2:58 pm hauforum

    hay. muốn làm cho nó trượt theo trang thì làm thế nào

  • avatar

    Bài gửi on Thu Apr 18, 2013 3:01 pm DN_angel

    điều đó cần 1 ng` khá thạo về css mình thì chịu thua Sad với lại Sweet Dream bọn mình chỉ hỗ trợ cơ bản còn năng cao thì phải đến các diễn đàn có tên tuổi thôi mĩm cười

  • avatar

    Bài gửi on Thu Apr 18, 2013 3:15 pm hauforum

    dù sao cũng cảm ơn rất nhiều Smile

  • Bài gửi Sponsored content

Xem chủ đề cũ hơn Xem chủ đề mới hơn Về Đầu Trang Thông điệp [Trang 1 trong tổng số 1 trang]

Permissions in this forum:
Bạn không có quyền trả lời bài viết

  • TopFree forum | © PunBB | Free forum support | Liên hệ | Report an abuse | Have a free blog with Sosblog