Cách trang trí forum xenforo noel - giáng sinh

Thảo luận trong 'Thủ thuật xenforo - Tut' bắt đầu bởi administrator, 13/12/14.

  1. administrator
    Administrator
    Thành viên BQT Admin Smod Mod

    Tham gia ngày:
    6/2/13
    Chào bạn, bạn muốn trang trí forum của bạn nhân dịp noel, giáng sinh thật ấm áp, hãy theo dõi Tuturial này nhé..

    [​IMG]


    Các bạn cần download tập tin này tại đây.

    Bước 1: Down file đính kèm về, giải nén rồi up holiday_bells vào folder chứa forum

    Bước 2: Thêm đoạn code này vào page_container_js_head (Admincp -> Appearance -> Template -> page_container_js_head)

    Mã:
    <script src="holiday_bells/js/swfobject.min.js"></script>
    <script src="holiday_bells/js/holiday_bells.js"></script>
    <script src="holiday_bells/js/jquery.snowstorm.js"></script>
    Bước 3: Thêm đoạn code này vào sau thẻ </body></html> của PAGE_CONTAINER (Admincp -> Appearance -> Template ->PAGE_CONTAINER)

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

    Bước 4: Thêm đoạn css này vào EXTRA.css hoặc public.css (tùy skin) (Admincp -> Appearance -> Template -> page_container_js_head) hoặc tạo 1 file css mới rồi include vào forum

    Mã:
    /* HOLIDAY BELLS */
    .b-page__content { min-height:120px; }
    .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); }



    Comment tại topic này nếu chưa hoàn thành nhé ! :D
     
    #1
  2. raovathieuqua PageRank 1 Member

    Tham gia ngày:
    23/8/13
    Mình cũng làm hôm qua mà khác của bác admin làm, của mình nếu làm giống bác thì mất tiêu cái phần login cho thành viên. :(
     
    #2
  3. vuongseo2 PageRank 1 Member

    Tham gia ngày:
    15/1/14
    hay quá, vừa vào diễn đàn cái thấy ấn tượng quá bác ak
     
    #3
  4. datdathcmutrans PageRank 1 Member

    Tham gia ngày:
    7/4/14
    Đẹp, để mình thử phát cho forum của mình có không khí xíu ;)
     
    #4
  5. land24h PageRank 1 Member

    Tham gia ngày:
    30/6/14
    Nơi ở:
    Hà Nôi
    Mình ko làm trên web ai hướng dẫn mình làm blog pos mới muốn trang trí cho nó có không khis1 chút
     
    #5

Chia sẻ trang này