Baì viết hướng dẫn người dùng có thể tự làm giao diện theo ý mong muốn
Để đó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
Những tin mới hơn
Những tin cũ hơn
- 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