Smashing Christmas Lights - Đập phá đèn giáng sinh 1.1

PVS

Super Moderator
Thành viên BQT
Tham gia
28/02/2015
Bài viết
16,833
Được Like
12,691
Smashing Christmas Lights - Đập phá đèn giáng sinh 1.1

Đây là một template modification "đơn giản" mà thêm smashable christmas lights (có âm thanh) trên header của bạn.

xmaslights.PNG


Capture.PNG

Demo online: http://www.schillmania.com/projects/snowstorm/lights/?size=tiny

Bạn cần phải tải về tập tin zip đính kèm và giải nén ra, tôi nghĩ rằng nên bao gồm tất cả mọi thứ bạn cần. Tải nó lên thư mục ROOT của bạn (nơi XenForo được cài đặt). Điều này là quan trọng, tôi nghĩ rằng script dự kiến là một đường dẫn tập tin nghiêm ngặt.

Bắt đầu với chỉnh sửa template page_container_js_head, trước <!--XenForo_Require:JS--> thêm:
Mã:
    <script src="/lights/soundmanager2-nodebug-jsmin.js"></script>
    <script type="text/javascript" src="http://yui.yahooapis.com/combo?2.6.0/build/yahoo-dom-event/yahoo-dom-event.js&2.6.0/build/animation/animation-min.js"></script>
    <script src="/lights/christmaslights.js"></script>

Chú ý: Thứ tự các IS quan trọng, vì sao chép và dán!

Lưu ý, thay đổi từ PAGE_CONTAINER vào header. Vì vậy, mở template header và sau:
Mã:
<xen:hook name="header">
<div id="header">

Thêm:
Mã:
<xen:include template="smashing_lights" />

Bây giờ bạn đang thực hiện với các chỉnh sửa, vì vậy bây giờ bạn cần phải tạo ra hai template mới, do đó tạo ra template mới và đặt tên là smashing_lights. Dán đoạn code sau vào nó:
Mã:
<xen:require css="smashing_lights.css" />
<div>
<div id="loading">
  <span>Rendering...</span>
</div>
<div id="lights">
  <!-- lights go here -->
</div>
</div>

Tiếp theo, tạo template smashing_lights.css và thêm vào đoạn code dưới đây:
Mã:
/* XLSF 2007 */
#lights {
position:absolute;
left:0px;
top:0px;
width:100%;
height:52px;
overflow:hidden;
}
.xlsf-light {
position:absolute;
}
body.fast .xlsf-light {
opacity:0.9;
}
.xlsf-fragment {
position:absolute;
background:transparent url(lights/image/bulbs-50x50-fragments.png) no-repeat 0px 0px;
width:50px;
height:50px;
}
.xlsf-fragment-box {
position:absolute;
left:0px;
top:0px;
width:50px;
height:50px;
*width:100%;
*height:100%;
display:none;
}
.xlsf-cover {
position:fixed;
left:0px;
top:0px;
width:100%;
height:100%;
background:#fff;
opacity:1;
z-index:999;
display:none;
}

Lưu và đi đến trang chủ của bạn và phá tan những bóng đèn. Nếu bạn muốn để mặc định cho bóng đèn nhỏ hơn (hoặc lớn hơn), tôi đã đính kèm các kích cỡ khác nhau có sẵn, chỉ cần thay thế christmaslights.js với download của bạn có, và bạn đã thay đổi kích thước.

Chúc các bạn thành công.

Nguồn: xenforo.com​
 

Đính kèm

  • large.zip
    3.8 KB · Lượt xem: 2
  • lightsv1-1.zip
    282.8 KB · Lượt xem: 4
  • medium.zip
    3.8 KB · Lượt xem: 4
  • small.zip
    3.8 KB · Lượt xem: 2
  • tiny.zip
    3.8 KB · Lượt xem: 2
Được quan tâm
Người đăng Chủ đề tương tự Diễn đàn Trả lời Ngày đăng
PVS Template Modifications 0

Chủ đề tương tự


Hướng dẫn sử dụng

XenForo 1 XenForo 2
Translate by PVS

Dịch vụ XenForo của VNXF

Mr. Tuấn

Mobile/Zalo: 0988 488 096

Telegram: bluekpro

Email: [email protected]

Nhà Tài Trợ

Mút Xốp Không Gian
Mút Sofa Không Gian
Top Bottom