“MỌI SỰ CỐ GẮNG CHƯA CHẮC ĐÃ GẶT HÁI ĐƯỢC KẾT QUẢ NHƯNG MỖI KẾT QUẢ ĐẠT ĐƯỢC CHẮC CHẮN LÀ CẢ MỘT QUÁ TRÌNH CỐ GẮNG”

Hướng dẫn đóng khung giới hạn header footer default Nukevie

Thứ bảy - 23/04/2022 10:58
Baì viết hướng dẫn người dùng có thể tự làm giao diện theo ý mong muốn
Hướng dẫn đóng khung giới hạn header footer default Nukevie
Để đóng khung được cho header chúng ta làm theo các bước sau

1) Mở files themesdefaultlayoutheader_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>

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>

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

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

2) Tương tự như trên ta mở file themesdefaultlayoutfooter_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ả

 

Nguồn tin: nuke.vn

Tổng số điểm của bài viết là: 1 trong 1 đánh giá

Xếp hạng: 1 - 1 phiếu bầu
Click để đánh giá bài viết

Điều Khoản Sử Dụng Dịch Vụ DATAONLINE.IO.VN

1. Chấp Nhận Điều KhoảnKhi bạn truy cập hoặc sử dụng ứng dụng, bạn đồng ý với các điều khoản và điều kiện sử dụng dịch vụ này. Nếu bạn không đồng ý với bất kỳ điều khoản nào trong các điều khoản này, bạn không được phép sử dụng dịch vụ của chúng tôi.2. Quyền Sử Dụng Dịch VụChúng tôi cấp cho bạn...

licham.net

- Click vào nút hiển thị ngày trong tuần hoặc tháng âm lịch để xem chi tiết

- Màu đỏ: Ngày tốt

- Xanh lá: Đầu tháng âm lịch

- Màu vàng: Ngày hiện tại

Thống kê
  • Đang truy cập33
  • Hôm nay8,416
  • Tháng hiện tại94,143
  • Tổng lượt truy cập2,229,836
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