#163932 gửi bởi nhimthulinh
Ngày 28 Tháng 11 2014 , 01:34
Mình nhận nâng cấp dữ liệu website từ nukeviet 3x lên 4x bạn nào có nhu cầu liên hệ mình nha :P
Yahoo/skyper/fb: nhimthulinh08
Call: 0904999944
Email: nhimthulinh08@gmail.com


nhằm giúp các bạn hiệu chỉnh theme default 4.x tốt hơn nay mình lập Pic này hỗ trợ mọi người.
Đầu tiên chúng ta cần nắm được là quan tâm đến file nào, thư mục nào. chúng ta cần tải vài cài đặt phần mềm lấy mã màu và notepad + + về
- Trước hết chúng ta cần tắt chức năng tối ưu hệ thống website trong cấu hình chung.
- Mở các file sau: theme/default/css/style.css
theme/default/css/bootstrap.min.css
1.Hình nền website , tìm css trong file style.css
Mã: Chọn hết
body {
height: 100%;
padding: 0;
margin: 0;
background: #ccc url('../images/bg.png') repeat;
}

Thay hình nền bạn tại đây
Mã: Chọn hết
background: #ccc url('../images/bg.png') repeat;

Nếu chỉ muốn màu thôi thì sẽ sửa thành
Mã: Chọn hết
background: #ccc;

Nếu muốn hình nền đứn
Mã: Chọn hết
g im khi cuộn thì sửa
Mã: Chọn hết
background: url(../images/bg.jpg) top center fixed repeat-x

Màu hình nền bên trong
Mã: Chọn hết
#body {
background: #fff;
border-color: #dadada;
border-style: solid;
border-width: 0 1px 0 1px;
box-shadow: 0 0 4px rgba(0,0,0,0.15);
-webkit-box-shadow: 0 0 4px rgba(0,0,0,0.15);
padding-top: 10px;
}


2. Hiệu chỉnh màu thanh heading tìm css trong file bootstrap.min.css
Mã: Chọn hết
.panel-primary>.panel-heading {
color: #fff;
background-color: #428bca;
border-color: #428bca;
}

background-color: #428bca; -> màu sắc
border-color: #428bca; -> màu chữ
Muốn sửa thành hình thì sửa như sau background-color: #428bca; thay thế bằng
Mã: Chọn hết
background: #ccc url('../images/bg.png') repeat;

3.Màu thanh menu ngang tìm css trong file bootstrap.min.css
tương tự như trên
Mã: Chọn hết
.navbar-default {
background-color: #0855a1;
border-color: #064481;
}

Màu khi active menu
Mã: Chọn hết
.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:hover, .navbar-default .navbar-nav>.active>a:focus {
color: #fff;
background-color: #063b70;
}

Màu khi rê chuột
Mã: Chọn hết
.navbar-default .navbar-nav>li>a:hover,.navbar-default .navbar-nav>li>a:focus{color:#fff;background-color:transparent}


4. Xóa hình nền banner Mở file layout/header_extended.tpl
tìm đoạn
Mã: Chọn hết
<img src="/themes/forum/images/banner.jpg" alt="{SITE_NAME}"/>

Thay hình bạn muốn thay hoặc xóa nó đi
Nếu muốn hiệu chỉnh màu header thì tìm css trong file style.css
Mã: Chọn hết
#header {
height: 100px;
position: absolute;
top: 0;
left: 0;
width: 100%;
background: rgba(255,255,255,0.75);
z-index: 10000;
}
Đính kèm
(265.53 KB) Đã tải về 148 lần
(7.45 MB) Đã tải về 111 lần

Cộng đồng Nuke Việt Nam https://www.nuke.vn/
nhận rip y chang tất cả các loại website cho nukeviet, giao full code , tốc độ nhanh ...
http://pacorp.vn
Skype/Yahoo: nhimthulinh08
Email: ngocanh@pacorp.vn
Fb: fb.com/nhimthulinh08
Call: 0904.9999.55
#163934 gửi bởi nhimthulinh
Ngày 28 Tháng 11 2014 , 01:55
Sau đây mình hướng dẫn các bạn tạo header + menu ngang hiện fullwidth
Demo http://deal.vinanat.vn/
Đầu tiên mở file default\css\style.css và layout/header_extended.tpl
VÀO default\css\admin.css tìm và xóa đoạn
Mã: Chọn hết
@media (min-width:992px){#wraper{margin-bottom:28px;}}

---------------------------
Fullwidth header
Tìm
Mã: Chọn hết
<div id="wraper">
thêm trước nó 1 thẻ css wraperhome ta được
Mã: Chọn hết
<div id="wraperhome"><div id="wraper">

Sau đó kéo xuống dưói tìm thẻ </header> thêm vào sau nó 2 thẻ đóng css </div> </div> <div id="wraper"> và 1 thẻ ta được
Mã: Chọn hết
</header> </div> </div>

---------------------------
Fullwidth menu
Tìm
Mã: Chọn hết
<nav>
thêm trước nó 2 thẻ css wrapermenu và wraperta được
Mã: Chọn hết
<div id="wrapermenu"><div id="wraper">

Sau đó kéo xuống dưói tìm thẻ </nav> thêm vào sau nó 2 thẻ đóng css </div> </div> <div id="wraper"> và 1 thẻ ta được
Mã: Chọn hết
</nav> </div> </div> <div id="wraper">

-------------------------
Tiếp theo mở file default\css\style.css
thêm 2 thẻ css sau vào
Mã: Chọn hết
#wraperhome{width:100%;background:#000;margin:0 auto;}
#wrapermenu{width:100%;background:#000;margin:0 auto;}

sau đó css lại màu sắc hay chiều cao tùy ý

Cộng đồng Nuke Việt Nam https://www.nuke.vn/
nhận rip y chang tất cả các loại website cho nukeviet, giao full code , tốc độ nhanh ...
http://pacorp.vn
Skype/Yahoo: nhimthulinh08
Email: ngocanh@pacorp.vn
Fb: fb.com/nhimthulinh08
Call: 0904.9999.55
#163935 gửi bởi nhimthulinh
Ngày 28 Tháng 11 2014 , 02:18
Demo http://deal.vinanat.vn/
mở file layout/header_extended.tpl
tìm
Mã: Chọn hết
<nav>
<div class="container">
<div class="row">
[MENU_SITE]
</div>
</div>
</nav>

Và thay thế thành đoạn sau
Mã: Chọn hết
<nav class="stickymenu">
<div id="wraper"class="container">
<div class="row">
[MENU_SITE]
</div>
</div>
</nav>

<script type="text/javascript">
$(function() {
var sticky_navigation_offset_top = $('.stickymenu').offset().top;
var sticky_navigation = function(){
var scroll_top = $(window).scrollTop();
if (scroll_top > sticky_navigation_offset_top) {
$('.stickymenu').css({ 'position': 'fixed', 'z-index': 990,'top':0, 'left':0 });
} else {
$('.stickymenu').css({ 'position': 'relative' });
}
};
sticky_navigation();
$(window).scroll(function() {
sticky_navigation();
});
});
</script>


vào file default\css\style.css thêm css
Mã: Chọn hết
.stickymenu {
background: red;
margin: 0 auto 0;
width: 100%;
}

Cộng đồng Nuke Việt Nam https://www.nuke.vn/
nhận rip y chang tất cả các loại website cho nukeviet, giao full code , tốc độ nhanh ...
http://pacorp.vn
Skype/Yahoo: nhimthulinh08
Email: ngocanh@pacorp.vn
Fb: fb.com/nhimthulinh08
Call: 0904.9999.55
#163936 gửi bởi nhimthulinh
Ngày 28 Tháng 11 2014 , 02:27
Căn chỉnh lại 3 cột cho layout
tìm layout.left-body-right.tpl
Mã: Chọn hết
<div class="row">
<div class="col-sm-6 col-md-7 col-sm-push-3 col-md-push-2 ">
[TOP]
{MODULE_CONTENT}
[BOTTOM]
</div>
<div class="col-sm-3 col-md-3 col-sm-push-3 col-md-push-2 ">
[RIGHT]
</div>
<div class="col-sm-3 col-md-2 col-sm-pull-9 col-md-pull-10">
[LEFT]
</div>
</div>


so sánh đoạn trên và đoạn dưói là các bạn sẽ hiểu cách hiệu chỉnh

Mã: Chọn hết
<div class="row">
<div class="col-sm-6 col-md-6 col-sm-push-3 col-md-push-3 ">
[TOP]
{MODULE_CONTENT}
[BOTTOM]
</div>
<div class="col-sm-3 col-md-3 col-sm-push-3 col-md-push-3 ">
[RIGHT]
</div>
<div class="col-sm-3 col-md-3 col-sm-pull-9 col-md-pull-9">
[LEFT]
</div>
</div>

Cộng đồng Nuke Việt Nam https://www.nuke.vn/
nhận rip y chang tất cả các loại website cho nukeviet, giao full code , tốc độ nhanh ...
http://pacorp.vn
Skype/Yahoo: nhimthulinh08
Email: ngocanh@pacorp.vn
Fb: fb.com/nhimthulinh08
Call: 0904.9999.55
#163940 gửi bởi nhimthulinh
Ngày 28 Tháng 11 2014 , 02:49
anhyeuviolet đã viết::D Thanks !!!!!!!!!!!!
Cơ mà cảm ơn cực quá. Có nút like như Xen hay FB thì tốt nhỉ !

:)) chờ đội code làm rum mới sẽ nhanh hơn phpbb củ chuối này

Cộng đồng Nuke Việt Nam https://www.nuke.vn/
nhận rip y chang tất cả các loại website cho nukeviet, giao full code , tốc độ nhanh ...
http://pacorp.vn
Skype/Yahoo: nhimthulinh08
Email: ngocanh@pacorp.vn
Fb: fb.com/nhimthulinh08
Call: 0904.9999.55
#163960 gửi bởi nhimthulinh
Ngày 28 Tháng 11 2014 , 05:48
wanwule đã viết:Thanks bác Nhím, nhờ Bác hướng dẫn làm cái footer giống như http://deal.vinanat.vn/ với. Màu nền kéo dài hết màn hình ... Thanks Bác lần nữa :x

nó tương tự như cái header thôi ban

Cộng đồng Nuke Việt Nam https://www.nuke.vn/
nhận rip y chang tất cả các loại website cho nukeviet, giao full code , tốc độ nhanh ...
http://pacorp.vn
Skype/Yahoo: nhimthulinh08
Email: ngocanh@pacorp.vn
Fb: fb.com/nhimthulinh08
Call: 0904.9999.55