Nội quy chuyên mục: - Chuyên mục này chỉ hỗ trợ cho các theme mặc định của hệ thống.
- Các giao diện khác bạn vui lòng tìm đến bài viết chia sẻ theme đó để thảo luận.
#166010 gửi bởi insaigonvip
Ngày 21 Tháng 01 2015 , 22:33
Mình có 1 trang làm bằng nukeviet .
Giờ mình muốn có 1 menu bằng html , có thể gắn vào theme hay tạo blocks cũng đc , cụ thể như sau :
Hiệu ứng và sắp xếp như trang : http://logoweb.vn/
Các bạn xem trang của mình : http://sukienlenguyen.com/ . Mình cần gắn chổ sản phẩm và dịch vụ :
Gồm 4 cột và 3 dòng trỏ chuột và hình sẽ đổi hình .
Mình xin cảm ơn trước và Hậu tạ theo yêu cầu của các bạn
#166172 gửi bởi anhyeuviolet
Ngày 26 Tháng 01 2015 , 20:52
Cái này áp dụng cho theme sửa từ modern, và sửa lại giống với theme ngocminh.info mà bạn ở trên đã đưa URL.


Đầu tiên bạn cần thiết lập giao diện là dạng lưới. Mới hay cũ lên trên thì tuỳ bạn.
1/ Mở themes/theme đang dùng/modules/news/theme.php
Tìm
Mã: Chọn hết
function viewcat_grid_new


Tìm và thêm vào bên dưới của
Mã: Chọn hết
$xtpl=new XTemplate("viewcat_grid.tpl",NV_ROOTDIR."/themes/".$module_info['template']."/modules/".$module_file);

đoạn code này
Mã: Chọn hết
$xtpl->assign( 'TEMPLATE', $module_info['template'] );


Bên dưới
Mã: Chọn hết
$xtpl->assign('CONTENT',$array_row_i);

Thêm vào bên dưới
Mã: Chọn hết
$random = rand(1,5);
$xtpl->assign('RANDOM',$random);


2/Tiếp theo, mở themes/theme đang dùng/modules/news/viewcat_grid.tpl
Thêm bên dưới
Mã: Chọn hết
<!-- BEGIN: main -->


Mã: Chọn hết
<script src="/themes/forum/js/transform.js"></script>
<script src="/themes/forum/js/3.js"></script>

<script type="text/javascript" language="javascript" charset="utf-8">
$(document).ready(function ($) {
$('li div.back').hide().css('left', 0);

function mySideChange(front) {
if (front) {
$(this).parent().find('div.front').show();
$(this).parent().find('div.back').hide();

} else {
$(this).parent().find('div.front').hide();
$(this).parent().find('div.back').show();
}
}

$('li').hover(
function () {
$(this).find('div').stop().rotate3Di('flip', 250, {direction: 'clockwise', sideChange: mySideChange});
},
function () {
$(this).find('div').stop().rotate3Di('unflip', 500, {sideChange: mySideChange});
}
);
});
</script>


3/ Mở file CSS mà bạn cấu hình, thường là style.css ( screen.css )

Thêm vào
Mã: Chọn hết
/** Viewcat -grid **/
ul#list-post {
margin: 0px;
padding: 0px;
}
li.list-post {
display: block;
position: relative;
float: left;
margin: 5px;
width: 290px;
height: 300px;
}
div.front {
position: absolute;
overflow: hidden;
top: 0px;
left: 0px;
border: 2px solid #E33C74;
border-radius: 7px;
width: 100%;
height: 100%;
}
li.list-post div.color-type1 {
background: #46aadf;
}
li.list-post div.color-type2 {
background: #7ecad0;
}
li.list-post div.color-type3 {
background: #c04e91;
}
li.list-post div.color-type4 {
background: #c1b746;
}
li.list-post div.color-type5 {
background: #e5a926;
}


div.front img {
width: 100%;
height: 230px;
}
div.back {
background: #fff;
width: 100%;
height: 100%;
border-radius: 7px;
border: 2px solid #47bd2f;
}
div.front h2,div.back h2 {
padding: 5px 10px;
font-size: 18px;
font-weight: bold;
}
div.front h2 a {
color: #000000;
}
div.back h2 a {
color: #db5ab7;
}
div.back p {
display: block;
padding: 5px 10px;
margin: 0px;
font-size: 15px;
max-height: 130px;
overflow: hidden;
color: #000000;
}
div.back a.more {
background: transparent url(../images/readmore.png) scroll top left no-repeat;
float: right;
display: block;
font-size: 15px;
margin-right: 10px;
margin-top: 5px;
padding: 6px;
width: 92px;
height: 21px;
-moz-transition: all .3s;
-webkit-transition: all .3s;
-khtml-transition:all .3s;
-o-transition: all .3s;
}
div.back a.more:hover {
background: transparent url(../images/readmore.png) scroll bottom left no-repeat;
}
/** Het Viewcat -grid **/




4/ Tiếp theo bạn tải 2 file JS đính kèm, giải nén được 2 file JS, bỏ vào thư mục JS bên trong theme của bạn đang dùng.
js.zip


Lưu ý hai dòng này để nó nạp JS cho đúng nè
Mã: Chọn hết
<script src="/themes/forum/js/transform.js"></script>
<script src="/themes/forum/js/3.js"></script>


Thường thì làm đúng thì tới đây là nó quay rồi đấy. Còn lại thì chỉnh sửa lại sao cho nó hạp thẩm mỹ là được ! :D
Đính kèm
(1.58 KB) Chưa tải về lần nào

Cổng nhôm đúc Nhật Bản
http://www.asuzac-acm.com.vn/vi/acm/cong-nhom-duc/
#166188 gửi bởi insaigonvip
Ngày 26 Tháng 01 2015 , 23:39
Chân thành cảm ơn huongpro_love . Và bài hướng dẫn quá tận tình của anhyeuviolet . Nhưng nói thật mình mới sử dụng Nukeviet lần đầu tiên và chưa rành về nó . Mình đã làm theo nhưng chưa đc . anhyeuviolet hay huongpro_love có thể cho mình cái mail , mình send thông tin qua giúp mình với , mình gởi cái card điện thoại chúc tết bạn bè cho vui . :))
Còn tubethv mình không biết cách lấy . Mình send cho bạn nguyên cái code website luôn bạn tự download lấy nhé . Link sau :
Dowload xong nói mình xóa link nhé .
http://www.mediafire.com/download/8pjzy7m9o44mycm/website.rar
#166190 gửi bởi huongpro_love
Ngày 27 Tháng 01 2015 , 01:39
Mình đang bận làm 2 cái website chắc chưa giúp ngay được.
Cái anhyeuviolet hướng dẫn đó là dành cho cách hiển thị tin tức nên nó phức tạp hơn, còn của bạn hình như chỉ là những cái menu thôi phải không?
Vậy bạn chỉ cần tạo cái menu có hiệu ứng Flip như hướng dẫn ở đây là được mà
http://www.thuthuatweb.net/css/tao-hieu ... -css3.html
Bạn xem nếu làm ko được mấy nữa xong việc mình sẽ giúp..
mail: vanhuonghn011291@gmail.com
#166191 gửi bởi huongpro_love
Ngày 27 Tháng 01 2015 , 01:43
Trong đó có đoạn css3
Mã: Chọn hết
.flip3D{ width:240px; height:200px; margin:10px; float:left; }
.flip3D > .front{
position:absolute;
-webkit-transform: perspective( 600px ) rotateY( 0deg );
transform: perspective( 600px ) rotateY( 0deg );
background:#FC0; width:240px; height:200px;
border-radius: 7px;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transition: -webkit-transform .5s linear 0s; transition: transform .5s linear 0s;
}

.flip3D > .back{
position:absolute;
-webkit-transform: perspective( 600px ) rotateY( 180deg );
transform: perspective( 600px ) rotateY( 180deg );
background: #80BFFF;
width:240px;
height:200px;
border-radius: 7px;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transition: -webkit-transform .5s linear 0s;
transition: transform .5s linear 0s;
}

Bạn thay đường dẫn ảnh vào thuộc tính background là được.