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

[PVS]

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.

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:

    <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:

<xen:hook name="header">
<div id="header">

Thê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ó:

<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:

/* 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​