Welcome to Our Community

Registration on our forums are now open for some days! Feel free to sign up today.

Holiday Garland With Ringing Balls 1.1

Festive holiday balls that move and sound on mouseover | Now with 4 imageset options.

  1. Caldexi
    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
    alkomat, B4N3 and Yoda like this.