Holiday Garland With Ringing Balls

Unmaintained Holiday Garland With Ringing Balls 1.1

No permission to download
Overview Updates (4) Reviews (14) History Discussion
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.

screencap.webp


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!

6. Happy holidays from JacquiiDesigns & Jacquii's Poetry in Color Forum.
th_smiley-xmaslights.gif



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

screencap_EXTRAS.webp


Online Demo:
  • Like
Reactions: imno007, Tan Tran, Robru and 16 others
Author
JacquiiDesigns
Downloads
231
Views
2,154
First release
Last update

Ratings

5.00 star(s) 13 ratings
Join the discussion More information

More resources from JacquiiDesigns

Share this resource

Latest updates

  1. Two pesky, annoying bugs ==> FIXED!

    Two Bug Fixes... These bug fixes were mainly associated with the holiday_bells.js file: As...

  2. Fixed my mistake

    Ooops. This update fixes my mistake. Now the EXTRAS 3. CSS_EXTRA.txt is correct. Sorry about...

  3. Added extra style options/images

    This update includes 3 extra sets of images which can be seen in the screencap below...
Read more…

Latest reviews

ForestForTrees
I put these up last year and people loved it. I put it up again this year and got another great response. You may want to put it up under a subskin of another skin because if it is on the default skin shown to no-logged in members, it can make it a tad harder to log in. If I remember correctly, if you are persistent, you can get through. I'm glad I found it.
JacquiiDesigns
JacquiiDesigns
Glad you and your users enjoyed it. Hope you had a wonderful holiday.
Upvote 0 Downvote
Gazhyde
Excellent resource. Installed fine on my dev 1.2.2 site, so will add it to my live site later this month, Thanks!
JacquiiDesigns
JacquiiDesigns
You are quite welcome! Enjoy and thanks for the rating ;)
Upvote 0 Downvote
Pierre Boulanger
Looks great.
Thanks you and Merry Christmas!
JacquiiDesigns
JacquiiDesigns
Merry Christmas to you and yours as well. Thanks for the rating = Enjoy ;)
Upvote 0 Downvote
wickedstangs
Very cool add on, I added this to my site and it is awesome... Thank You
JacquiiDesigns
JacquiiDesigns
You're very welcome. Hope you have a wonderful holiday celebration ;)
Upvote 0 Downvote
Ernest L. Defoe
I added this as well on my site. Even though it's a sports site still nice to deck it out for the holidays.
JacquiiDesigns
JacquiiDesigns
Thanks for the rating. Enjoy and happy holidays to you!
Upvote 0 Downvote
DragonFlames
Just installed for Christmas 2013 on the latest Xenforo 1.2.3 and it all works very well indeed. Thank you very much.
JacquiiDesigns
JacquiiDesigns
Thanks for the review. Enjoy and happy holidays!
Upvote 0 Downvote
Claudio
AMAZING!
JacquiiDesigns
JacquiiDesigns
Thanks for the rating = Enjoy ;)
Upvote 0 Downvote
Dodgeboard
Very Very Cool!!
JacquiiDesigns
JacquiiDesigns
Thanks for the rating. Enjoy and happy holidays to you!
Upvote 0 Downvote
Robyn Unc Privette
Such a festive and fun add on for any forum! We love it! The members are trying to play Christmas songs using the sound of the ornaments :)
JacquiiDesigns
JacquiiDesigns
Sweet. I'm so glad you and your members like! Enjoy and happy holidays to you ;)
Upvote 0 Downvote
G
Very Nice! You have one of the best looking forums out there. You are very talented.
JacquiiDesigns
JacquiiDesigns
Thank you so much! Happy holidays to you! ;)
Upvote 0 Downvote
Read more…
Top Bottom