• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

[Template/Code Modification] Holiday Garland With Ringing Balls 1.1

No permission to download
Compatible XF Versions
1.3, 1.4, 1.5
Holiday Garland With Ringing Balls shared by JacquiiDesigns
This will add festive holiday balls, which move and sound on mouseover, into the header of your Xenforo forum. See it in action at JPiC Forum for Writers.
gwMyQx9.png

REQUIREMENTS
Xenforo forum installed with a moving desire to make it more festive during the holiday season!

DEMO
http://jpicforum.info

INSTRUCTIONS
  1. Unpack the archive and upload the complete holiday_bells folder to your forum's root directory.
  2. Add the following code at the bottom of your page_container_js_head template:
    Code:
    <script src="holiday_bells/js/swfobject.min.js"></script>
    <script src="holiday_bells/js/holiday_bells.js"></script>
  3. Edit your PAGE_CONTAINER template, Find:
    Code:
    </body>
    </html>
    Add directly above it the following code:
    Code:
    <div class="b-page_newyear">
    <div class="b-page_content">
    <i class="b-head-decor">
    <i class="b-head-decor_inner b-head-decor_inner_n1">
    <div class="b-ball b-ball_n1 b-ball_bounce"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
    <div class="b-ball b-ball_n2 b-ball_bounce"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
    <div class="b-ball b-ball_n3 b-ball_bounce"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
    <div class="b-ball b-ball_n4 b-ball_bounce"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
    <div class="b-ball b-ball_n5 b-ball_bounce"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
    <div class="b-ball b-ball_n6 b-ball_bounce"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
    <div class="b-ball b-ball_n7 b-ball_bounce"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
    <div class="b-ball b-ball_n8 b-ball_bounce"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
    <div class="b-ball b-ball_n9 b-ball_bounce"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
    <div class="b-ball b-ball_i1"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
    <div class="b-ball b-ball_i2"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
    <div class="b-ball b-ball_i3"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
    <div class="b-ball b-ball_i4"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
    <div class="b-ball b-ball_i5"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
    <div class="b-ball b-ball_i6"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
    </i>
    <i class="b-head-decor_inner b-head-decor_inner_n2">
    <div class="b-ball b-ball_n1 b-ball_bounce"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
    <div class="b-ball b-ball_n2 b-ball_bounce"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
    <div class="b-ball b-ball_n3 b-ball_bounce"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
    <div class="b-ball b-ball_n4 b-ball_bounce"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
    <div class="b-ball b-ball_n5 b-ball_bounce"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
    <div class="b-ball b-ball_n6 b-ball_bounce"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
    <div class="b-ball b-ball_n7 b-ball_bounce"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
    <div class="b-ball b-ball_n8 b-ball_bounce"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
    <div class="b-ball b-ball_n9 b-ball_bounce"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
    <div class="b-ball b-ball_i1"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
    <div class="b-ball b-ball_i2"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
    <div class="b-ball b-ball_i3"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
    <div class="b-ball b-ball_i4"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
    <div class="b-ball b-ball_i5"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
    <div class="b-ball b-ball_i6"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
    </i>
    <i class="b-head-decor_inner b-head-decor_inner_n3">
    <div class="b-ball b-ball_n1 b-ball_bounce"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
    <div class="b-ball b-ball_n2 b-ball_bounce"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
    <div class="b-ball b-ball_n3 b-ball_bounce"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
    <div class="b-ball b-ball_n4 b-ball_bounce"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
    <div class="b-ball b-ball_n5 b-ball_bounce"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
    <div class="b-ball b-ball_n6 b-ball_bounce"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
    <div class="b-ball b-ball_n7 b-ball_bounce"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
    <div class="b-ball b-ball_n8 b-ball_bounce"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
    <div class="b-ball b-ball_n9 b-ball_bounce"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
    <div class="b-ball b-ball_i1"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
    <div class="b-ball b-ball_i2"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
    <div class="b-ball b-ball_i3"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
    <div class="b-ball b-ball_i4"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
    <div class="b-ball b-ball_i5"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
    <div class="b-ball b-ball_i6"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
    </i>
    <i class="b-head-decor_inner b-head-decor_inner_n4">
    <div class="b-ball b-ball_n1 b-ball_bounce"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
    <div class="b-ball b-ball_n2 b-ball_bounce"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
    <div class="b-ball b-ball_n3 b-ball_bounce"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
    <div class="b-ball b-ball_n4 b-ball_bounce"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
    <div class="b-ball b-ball_n5 b-ball_bounce"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
    <div class="b-ball b-ball_n6 b-ball_bounce"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
    <div class="b-ball b-ball_n7 b-ball_bounce"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
    <div class="b-ball b-ball_n8 b-ball_bounce"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
    <div class="b-ball b-ball_n9 b-ball_bounce"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
    <div class="b-ball b-ball_i1"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
    <div class="b-ball b-ball_i2"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
    <div class="b-ball b-ball_i3"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
    <div class="b-ball b-ball_i4"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
    <div class="b-ball b-ball_i5"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
    <div class="b-ball b-ball_i6"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
    </i>
    <i class="b-head-decor_inner b-head-decor_inner_n5">
    <div class="b-ball b-ball_n1 b-ball_bounce"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
    <div class="b-ball b-ball_n2 b-ball_bounce"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
    <div class="b-ball b-ball_n3 b-ball_bounce"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
    <div class="b-ball b-ball_n4 b-ball_bounce"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
    <div class="b-ball b-ball_n5 b-ball_bounce"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
    <div class="b-ball b-ball_n6 b-ball_bounce"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
    <div class="b-ball b-ball_n7 b-ball_bounce"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
    <div class="b-ball b-ball_n8 b-ball_bounce"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
    <div class="b-ball b-ball_n9 b-ball_bounce"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
    <div class="b-ball b-ball_i1"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
    <div class="b-ball b-ball_i2"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
    <div class="b-ball b-ball_i3"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
    <div class="b-ball b-ball_i4"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
    <div class="b-ball b-ball_i5"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
    <div class="b-ball b-ball_i6"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
    </i>
    <i class="b-head-decor_inner b-head-decor_inner_n6">
    <div class="b-ball b-ball_n1 b-ball_bounce"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
    <div class="b-ball b-ball_n2 b-ball_bounce"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
    <div class="b-ball b-ball_n3 b-ball_bounce"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
    <div class="b-ball b-ball_n4 b-ball_bounce"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
    <div class="b-ball b-ball_n5 b-ball_bounce"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
    <div class="b-ball b-ball_n6 b-ball_bounce"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
    <div class="b-ball b-ball_n7 b-ball_bounce"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
    <div class="b-ball b-ball_n8 b-ball_bounce"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
    <div class="b-ball b-ball_n9 b-ball_bounce"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
    <div class="b-ball b-ball_i1"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
    <div class="b-ball b-ball_i2"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
    <div class="b-ball b-ball_i3"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
    <div class="b-ball b-ball_i4"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
    <div class="b-ball b-ball_i5"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
    <div class="b-ball b-ball_i6"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
    </i>
    <i class="b-head-decor_inner b-head-decor_inner_n7">
    <div class="b-ball b-ball_n1 b-ball_bounce"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
    <div class="b-ball b-ball_n2 b-ball_bounce"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
    <div class="b-ball b-ball_n3 b-ball_bounce"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
    <div class="b-ball b-ball_n4 b-ball_bounce"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
    <div class="b-ball b-ball_n5 b-ball_bounce"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
    <div class="b-ball b-ball_n6 b-ball_bounce"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
    <div class="b-ball b-ball_n7 b-ball_bounce"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
    <div class="b-ball b-ball_n8 b-ball_bounce"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
    <div class="b-ball b-ball_n9 b-ball_bounce"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
    <div class="b-ball b-ball_i1"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
    <div class="b-ball b-ball_i2"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
    <div class="b-ball b-ball_i3"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
    <div class="b-ball b-ball_i4"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
    <div class="b-ball b-ball_i5"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
    <div class="b-ball b-ball_i6"><div class="b-ball_right"></div><div class="b-ball_i"></div></div>
    </i>
    </i>
    </div>
    </div>
  4. Add the following code (which can also be found in the included CSS.text file) to your EXTRA.css template:
    Code:
    /* HOLIDAY BELLS */
    .b-page_content { min-height:10px; }
    .b-head-decor { display:none; }
    .b-page_newyear .b-head-decor { position:absolute; top:0; left:0; display:block; height:115px; width:100%; overflow:hidden; background:url('holiday_bells/images/balls/b-head-decor_newyear.png') repeat-x 0 0; }
    .b-page_newyear .b-head-decor_inner { position:absolute; top:0; left:0; height:115px; display:block; width:373px; }
    .b-page_newyear .b-head-decor::before { content:''; display:block; position:absolute; top:-115px; left:0; z-index:3; height:115px; display:block; width:100%; }
    .b-page_newyear .b-head-decor_inner_n2 { left:373px; }
    .b-page_newyear .b-head-decor_inner_n3 { left:746px; }
    .b-page_newyear .b-head-decor_inner_n4 { left:1119px; }
    .b-page_newyear .b-head-decor_inner_n5 { left:1492px; }
    .b-page_newyear .b-head-decor_inner_n6 { left:1865px; }
    .b-page_newyear .b-head-decor_inner_n7 { left:2238px; }
    .b-ball { position:absolute; }
    .b-ball_n1 { top:0; left:3px; width:59px; height:83px; }
    .b-ball_n2 { top:-19px; left:51px; width:55px; height:70px; }
    .b-ball_n3 { top:9px; left:88px; width:49px; height:67px; }
    .b-ball_n4 { top:0; left:133px; width:57px; height:102px; }
    .b-ball_n5 { top:0; left:166px; width:49px; height:57px; }
    .b-ball_n6 { top:6px; left:200px; width:54px; height:70px; }
    .b-ball_n7 { top:0; left:240px; width:56px; height:67px; }
    .b-ball_n8 { top:0; left:283px; width:54px; height:53px; }
    .b-ball_n9 { top:10px; left:321px; width:49px; height:66px; }
    .b-ball_n1 .b-ball_i { background:url('holiday_bells/images/balls/b-ball_n1.png') no-repeat; }
    .b-ball_n2 .b-ball_i { background:url('holiday_bells/images/balls/b-ball_n2.png') no-repeat; }
    .b-ball_n3 .b-ball_i { background:url('holiday_bells/images/balls/b-ball_n3.png') no-repeat; }
    .b-ball_n4 .b-ball_i { background:url('holiday_bells/images/balls/b-ball_n4.png') no-repeat; }
    .b-ball_n5 .b-ball_i { background:url('holiday_bells/images/balls/b-ball_n5.png') no-repeat; }
    .b-ball_n6 .b-ball_i { background:url('holiday_bells/images/balls/b-ball_n6.png') no-repeat; }
    .b-ball_n7 .b-ball_i { background:url('holiday_bells/images/balls/b-ball_n7.png') no-repeat; }
    .b-ball_n8 .b-ball_i { background:url('holiday_bells/images/balls/b-ball_n8.png') no-repeat; }
    .b-ball_n9 .b-ball_i { background:url('holiday_bells/images/balls/b-ball_n9.png') no-repeat; }
    .b-ball_i1 .b-ball_i { background:url('holiday_bells/images/balls/b-ball_i1.png') no-repeat; }
    .b-ball_i2 .b-ball_i { background:url('holiday_bells/images/balls/b-ball_i2.png') no-repeat; }
    .b-ball_i3 .b-ball_i { background:url('holiday_bells/images/balls/b-ball_i3.png') no-repeat; }
    .b-ball_i4 .b-ball_i { background:url('holiday_bells/images/balls/b-ball_i4.png') no-repeat; }
    .b-ball_i5 .b-ball_i { background:url('holiday_bells/images/balls/b-ball_i5.png') no-repeat; }
    .b-ball_i6 .b-ball_i { background:url('holiday_bells/images/balls/b-ball_i6.png') no-repeat; }
    .b-ball_i1 { top:0; left:0; width:25px; height:71px; }
    .b-ball_i2 { top:0; left:25px; width:61px; height:27px; }
    .b-ball_i3 { top:0; left:176px; width:29px; height:31px; }
    .b-ball_i4 { top:0; left:205px; width:50px; height:51px; }
    .b-ball_i5 { top:0; left:289px; width:78px; height:28px; }
    .b-ball_i6 { top:0; left:367px; width:6px; height:69px; }
    .b-ball_i { position:absolute; width:100%; height:100%; -webkit-transform-origin:50% 0; -moz-transform-origin:50% 0; -o-transform-origin:50% 0; transform-origin:50% 0; -webkit-transition:all .3s ease-in-out; -moz-transition:all .3s ease-in-out; -o-transition:all .3s ease-in-out; transition:all .3s ease-in-out; pointer-events:none; }
    .b-ball_bounce .b-ball_right{position:absolute; top:0; right:0; left:50%; bottom:0; z-index:9; }
    .b-ball_bounce:hover .b-ball_right{ display:none; }
    .b-ball_bounce .b-ball_right:hover{ left:0; display:block!important; }
    .b-ball_bounce.bounce>.b-ball_i{ -webkit-transform:rotate(-9deg); -moz-transform:rotate(-9deg); -o-transform:rotate(-9deg); transform:rotate(-9deg); }
    .b-ball_bounce .b-ball_right.bounce+.b-ball_i { -webkit-transform:rotate(9deg); -moz-transform:rotate(9deg); -o-transform:rotate(9deg); transform:rotate(9deg); }
    .b-ball_bounce.bounce1>.b-ball_i {-webkit-transform:rotate(6deg); -moz-transform:rotate(6deg); -o-transform:rotate(6deg); transform:rotate(6deg); }
    .b-ball_bounce .b-ball_right.bounce1+.b-ball_i {-webkit-transform:rotate(-6deg); -moz-transform:rotate(-6deg); -o-transform:rotate(-6deg); transform:rotate(-6deg); }
    .b-ball_bounce.bounce2>.b-ball_i{ -webkit-transform:rotate(-3deg); -moz-transform:rotate(-3deg); -o-transform:rotate(-3deg); transform:rotate(-3deg); }
    .b-ball_bounce .b-ball_right.bounce2+.b-ball_i{ -webkit-transform:rotate(3deg); -moz-transform:rotate(3deg); -o-transform:rotate(3deg); transform:rotate(3deg); }
    .b-ball_bounce.bounce3>.b-ball_i {-webkit-transform:rotate(1.5deg); -moz-transform:rotate(1.5deg); -o-transform:rotate(1.5deg); transform:rotate(1.5deg); }
    .b-ball_bounce .b-ball_right.bounce3+.b-ball_i { -webkit-transform:rotate(-1.5deg); -moz-transform:rotate(-1.5deg); -o-transform:rotate(-1.5deg); transform:rotate(-1.5deg); }
  5. Done ==> Enjoy!
Happy holidays from JacquiiDesigns & Jacquii's Poetry in Color Forum.
JY3miHd.gif

----------------------------------------------------------------------------------
Newest update includes 3 extra sets of images which can be seen in the screencap below. Instructions are included in the new archive.
r1l1LCR.png

Online Demo
Author
Caldexi
Downloads
4
First release
Last update
Rating
0.00 star(s) 0 ratings

More resources from Caldexi