code - [Code] Bảng đăng ký, đăng nhập, tìm kiếm, đăng xuất nhanh trượt xuống.

Demo ảnh

Tìm kiếm nhanh

code - [Code] Bảng đăng ký, đăng nhập, tìm kiếm, đăng xuất nhanh trượt xuống. 210

Đăng ký nhanh

code - [Code] Bảng đăng ký, đăng nhập, tìm kiếm, đăng xuất nhanh trượt xuống. 310

Đăng nhập nhanh

code - [Code] Bảng đăng ký, đăng nhập, tìm kiếm, đăng xuất nhanh trượt xuống. 410

Đăng xuất nhanh

Hướng dẫn:

ACP >> Display >> Colors >> CSS
Cho code này vào cuối

Code:

/* Đăng nhập - đăng ký - tìm kiếm */
.frameTop{display:none;padding:10px 0;display:none;color:#DDD;position:relative;width:100%;background:#035e8d}
.frameTop .inputTop,.frameTop fieldset,.frameTop h2,.frameTop > div{width:100%;display:block;height:30px!important;line-height:28px;border:1px solid #DDD;max-width:600px;margin:10px auto;padding:0 10px!important}
.frameTop fieldset{border:0;padding:0!important}
#searchTop fieldset{position:relative;background:#FFF;padding:0 48px 0 0 !important}
#searchTop .btn{position:absolute;right:1px;top:1px;background:url(//i56.servimg.com/u/f56/18/59/49/93/13848712.png) no-repeat center center transparent!important;border:0!important;width:28px;height:28px!important;text-indent:-9999px;background-size:40px 40px!important;padding:0!important}
#searchTop .inputTop{border:0 none!important;margin:0}
#outTop fieldset{text-align:center}
#outTop input[name="confirm"]{background:#d15c00!important;border-color:#b85101!important}
#outTop input[name="confirm"]:hover{background-color:#777!important;border-color:#666!important}
.frameTop h2{border:0 none;text-align:center;margin-bottom:20px!important;font-weight:300}
.frameTop > div{margin-top:0;height:auto!important;border:0}

Cho code này vào chỗ muốn hiện, ví dụ như cuối overall_header

Code:

<!-- BEGIN switch_user_logged_out -->
<li id="submit-menu" class="menu-text menu-text-small "><a href="/register">ĐĂNG KÝ</a></li>
<li class="menu-text menu-text-small "><a href="/login">ĐĂNG NHẬP</a></li>
<!-- END switch_user_logged_out -->

<div id="searchTop" class="frameTop">
                        <form action="/search" method="get" class="frm-form" name="searchform" style="background:#035e8d">
                            <fieldset>
                                <input placeholder="Vui lòng nhập nội cần tìm" type="search" tabindex="1" name="search_keywords" size="30" value="" class="inputTop" required/>
                                <input type="submit" tabindex="2" class="btn" />
                            </fieldset>
                        </form>
                    </div>
                            <!-- BEGIN switch_user_logged_out -->
                    <div id="loginTop" class="frameTop">
                        <form action="/login" method="post" class="frm-form" name="form_login" style="background:#035e8d">
                            <input placeholder="Tên đăng nhập" type="text" tabindex="1" name="username" size="30" maxlength="50" value="" class="inputTop" required/>
                            <input placeholder="Mật khẩu" type="password" tabindex="2" name="password" size="30" maxlength="50" class="inputTop" required/>
                            <fieldset>
                                <input type="hidden" name="redirect" value="" />
                                <input type="submit" name="login" tabindex="3" value="Đăng nhập" class="button2" />&nbsp;&nbsp;
                                <label>
                                    <input type="checkbox" name="autologin" id="autologin" tabindex="4" class="checkbox" checked="checked" />&nbsp; Ghi nhớ đăng nhập ?</label>
                            </fieldset>
                        </form>
                    </div>
                    <div id="regTop" class="frameTop">
                        <form action="/register?agreed=true&step=2" method="post" class="frm-form" name="form_register" style="background:#035e8d">
                            <input id="username_reg" placeholder="Tên đăng nhập" type="text" tabindex="1" name="username" size="30" maxlength="20" value="" class="inputTop" title="Tên tài khoản phải có ít nhất 4 ký tự" required/>
                            <input id="email" placeholder="Địa chỉ Email" name="email" tabindex="2" value="" size="30" maxlength="64" type="email" class="inputTop" required/>
                            <input placeholder="Mật khẩu" type="password" tabindex="3" name="password" size="30" maxlength="50" class="inputTop" title="Nên đặt mật khẩu có chữ và số để an toàn hơn cho tài khoản của bạn" required/>
                            <fieldset>
                                <input type="submit" name="submit" tabindex="4" value="Đăng ký" class="button2" />&nbsp;&nbsp;
                                <input class="button2" name="reset" tabindex="5" value="Xác lập lại" type="reset" />
                            </fieldset>
                        </form>
                    </div>
                            <!-- END switch_user_logged_out -->
                    <!-- BEGIN switch_user_logged_in -->
                    <div id="outTop" class="frameTop" style="overflow: hidden; display: none;">
                        <form action="{U_LOGIN_LOGOUT}" method="post" class="frm-form" style="background:#035e8d">
                            <h2>Bạn có thật sự muốn thoát ?</h2>
                            <fieldset>
                                <input type="submit" name="confirm" value="Có">&nbsp;&nbsp;
                                <input class="close" type="button" name="cancel" value="Không">
                            </fieldset>
                        </form>
                    </div>
                    <!-- END switch_user_logged_in -->

                    <script type="text/javascript">
                        //<![CDATA[
                        $(function() {
                            var b, p = location.pathname;
                            "/login" == p || "/register" == p ? ($("#regTop, #loginTop").remove(), $("#username_reg").attr({
                                pattern: "^[^\\d\\.]([\\.\\w\\d]+){2,}",
                                title: "Tên tài khoản phải có ít nhất 3 ký tự và bắt đầu bằng chữ cái hoặc gạch dưới. Chỉ được phép sử dụng chữ cái, số, dấu chấm và dấu gạch dưới"
                            }), $("#pass").attr({
                                pattern: "^(?=.*\\d)(?=.*[a-zA-Z]).{6,}$",
                                title: "Mật khẩu từ 6 ký tự trở lên, bao gồm chữ và số"
                            }), $("#email").attr("type", "email"), $("#email, :password, [name=username]").attr("required", "required")) : ($("a[href^='/login']:not('#logout')").attr({
                                "data-href": "#loginTop",
                                "class": "quickLink"
                            }), $("input[name='redirect']").val(p), $("#logout").attr({
                                "data-href": "#outTop",
                                "class": "quickLink"
                            }), $("a[href^='/register']").attr({
                                "data-href": "#regTop",
                                "class": "quickLink"
                            }));
                            $(".frameTop .close").click(function() {
                                $(this).closest(".frameTop").stop().slideUp();
                            });
                            "/search" == p ? $("#searchTop").remove() : $("a[href='/search'],a[href='/search?tt=1']").attr({
                                "data-href": "#searchTop",
                                "class": "quickLink"
                            });
                            $(".quickLink, .close.topform").click(function(a) {
                                a.preventDefault();
                                $(document).scrollTop(0);
                                a = $(this).data("href");
                                a != b ? (b = a, $(".frameTop").stop().slideUp(), $(a).stop().slideDown()) : ($(a).stop().slideUp(), b = "")
                            })
                        }); //]]>
                    </script>

Tags: #code #tuts