Hướng dẩn rip themes modern nukeviet

Thứ sáu - 28/03/2014 22:37

đầu tiên minh khái quát theme modern có nhiều cải tiển so với defaul
ở theme này có 2 màu , đỏ và màu xanh ,
vậy nên mình hướng dẫn các bạn cơ bạn , những điều khác các bạn có thể tự vọc theme
đầu tiên các bạn cần chú ý các file
-
css/screen.css
css/red.css
css/blue.css
css/news.css
và các file css đi kèm tên modules
các file layout cân chú ý
layout/header.tpl
layout/footer.tpl
layout/layout.body-right.tpl
sau những chú ý đó jo chúng ta chính thức đi tìm nó
đầu tiên chúng ta mở css/screen.css bắt đầu chỉnh sửa
-Hình nền ngoài :dòng 79 > 84
Mã: Chọn tất cảbody {
background: #3e4c58 url(../images/background.png) top center fixed repeat-x;
font-family: Tahoma, Arial, Helvetica, sans-serif;
font-size: 75%;
line-height: 1.4;
}
background: #3e4c58 url(../images/background.png); đây chính là hình nền ngoài
nêu các bạn dùng màu thì xóa đoạn url(../images/background.png), vậy là được

top center fixed : có ý nghĩa hình nền này kích thước lớn muốn cho đứng im khi kéo thanh truọt 
repeat-x: hình nền lập lại 


khi bạn muốn hình nền lặp lại, đứng yên thi css la thế này
Mã: Chọn tất cảbody { 

background: url(../images/bg.jpg) top center fixed repeat-x ;// fiel hình ảnh giữ nguyên khi cuộn

font-family: Tahoma, Arial, Helvetica, sans-serif;
font-size: 75%;
line-height: 1.4;
}

-Hình nền trong
Mã: Chọn tất cả.wrapper {
width: 950px;
border: 10px solid #d8d8d8;
margin: 20px auto 0;
background: #fff;
}

background: #fff;: đây chính là hình nền trong
border: 10px solid #d8d8d8; : màu viền xung quay của màu nền trong
margin: 20px auto 0; khoảng cách header trên 
width: 950px; điều chỉnh độ rộng web
ps: ai thích chèn hình thì lặp lại ở trên (background: url(../images/bg.jpg) top center fixed repeat-x ;// fiel hình ảnh giữ nguyên khi cuộn)
chúng ta tìm hiểu menu top
Mã: Chọn tất cả.topbar .top {
border-bottom: 1px solid #d8d8d8;
background: #fff;
padding: 6px 5px 4px;
}


background: #fff; màu nền menu top
Mã: Chọn tất cảul.module-menu li a {
margin: 0 5px;
color: #737373;
text-decoration: none;
}
color: #737373; màu của menu top
Mã: Chọn tất cảul.module-menu li a:hover {
color: #414f5b;
}
color: #414f5b; màu khi rê chuột vào
Mã: Chọn tất cảul.module-menu li a.current {
color: #b93d00;
}

color: #b93d00; là màu khi vô modunles nào thị sẽ biết đang ở đó
Mặc định theme modern để phần footer nằm riêng , Mình muốn đóng khung phần footer hoặc chèn cái hình nền vào footer thì phải chỉnh sửa sao vậy , loay hoay mãi cứ bị vỡ khung lung tung

mở footer.tpl ra (nguyên bản nhá )
di chuyển thẻ </div> dòng 25 xóa đi
đem xuống
dòng 40 hiện tại dòng 40 đã cso 1 thẻ </div> thêm 1 thẻ từ dòng 25 xuống nữa là thành 2 </div></div>
sau khi chỉnh sửa file tpl ta tiếp tục mở screen.css
tìm thẻ clas footer
Mã: Chọn tất cả#footer {
width: 970px;
margin: 0 auto;
padding: 10px 0;
color: #728a9f;
}
color: #728a9f; màu chữ footer
ta thấy trên đó chưa có màu ta thêm vô background: #f6f6f6; hoặc thay bằng hình ảnh như bài viết trên
Mã: Chọn tất cả#footer a, #footer a:hover {
color: #fff;
}

color: #fff; màu chữ , link footer