Bài 1: Hướng dẫn đóng khung giới hạn header footer default Nukeviet

Thứ sáu - 15/04/2022 20:22
Baì viết hướng dẫn người dùng có thể tự làm giao diện theo ý mong muốn
screenshot 1650068456

Để đóng khung được cho header chúng ta làm theo các bước sau

Mở files themes\default\layout\header_extended.tpl

Tìm thẻ và thêm  div class css vào
<header>
và thẻ
</header>
Sau đó thêm vào bên trong
<header>
<div class="wraper">
......
</div>
</div>
bai-1-huong-dan-dong-khung-gioi-han-header-default-nukeviet

Nếu bạn không thích để cái menu section-header-bar thì các bạn có thể làm theo bước sau

Bước 1: Thêm style="background-image: url('{BANNER_SRC}');" vào wraper mới làm bước bên trên 
<div class="wraper" style="background-image: url('{BANNER_SRC}');">
Bước 2: Xóa hết đoạn code như sau
  <div class="section-header-bar">
            <div class="wraper">
                <nav class="header-nav">
                    <div class="header-nav-inner">
                        <div class="contactDefault">
                            [CONTACT_DEFAULT]
                        </div>
                        <div class="social-icons">
                            [SOCIAL_ICONS]
                        </div>
                        <div class="personalArea">
                            [PERSONALAREA]
                        </div>
                    </div>
                    <div id="tip" data-content="">
                        <div class="bg"></div>
                    </div>
                </nav>
            </div>
        </div>
Bài 1: Hướng dẫn đóng khung giới hạn header default Nukeviet

Sau khi xóa thanh menu top sẽ bị tình trạng này trên mobile
screenshot 1650069253

Chúng ta tiếp tục mở file css themes/default/css/style.responsive.css rồi sau đó thêm   padding-top: 10px;  kích thước tùy bạn điều chỉnh
@media (max-width: 767.98px)
.second-nav {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    padding-top: 10px;
}
và thẻ thêm  border: none; vào thẻ #menusite .navbar-default
@media (max-width: 767.98px)
#menusite .navbar-default {
    background-color: #428bca;
    border-color: #428bca;
    border-radius: 0;
    min-height: 0;
    border: none;
}
Hoàn thiện
screenshot 1650069594
 
Tương tự như trên ta mở file themes\default\layout\footer_extended.tpl
<footer class="section-footer-top" id="footer">
<div class="wraper">
Sửa lại như sau
<div class="wraper">
<footer  id="footer">
tương tự
</div>
    </footer>
Sửa thành
    </footer>
</div>
  <nav class="section-footer-bottom footerNav2">
        <div class="wraper">
Sửa thành
  <div class="wraper">
<nav class="section-footer-bottom footerNav2">
       
    </div>
    </nav>
sửa thành
 </nav> 
 </div>
    
Hưởng thành quả
FireShot Capture 034 Công Ty Luật 5S luat5s tms
 

Tác giả: admin

  Ý kiến bạn đọc

Thông báo

Tặng website chuyên nghiệp khi mua tên miền và hosting
Tham gia nhóm hỗ trợ trên Zalo tại đây 
Nộp tiền online kích hoạt ngay ở đây hoặc nạp qua các kênh

MOMO :  0904999955 
MBBANK: 0904999955 Phan Ngọc Anh / Quân đội MBBANK, Bắc Sài Gòn
Nội dung nạp tiền: ten_tai_khoan_nuke 

Thống kê

  • Đang truy cập11
  • Thành viên online2
  • Máy chủ tìm kiếm2
  • Khách viếng thăm7
  • Hôm nay686
  • Tháng hiện tại13,365
  • Tổng lượt truy cập30,141
Bạn đã không sử dụng Site, Bấm vào đây để duy trì trạng thái đăng nhập. Thời gian chờ: 60 giây