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
Thống kê
  • Đang truy cập10
  • Hôm nay2,844
  • Tháng hiện tại33,016
  • Tổng lượt truy cập9,224,499
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