Happy New Year theme

General
1

So, do you want a Happy New Year theme?
Choose a simple theme from codpen

On my forum I use this one:

On CSS:

html {
    background-color: #ABF99D !important;
} //Add a colored background if you want//
.happy-new-year {
    background: url(https://j.gifs.com/R66WrE.gif); //I create a little .gif, but if you want you can use an image to preserv resourses// 
    padding: 10px 35px;
    box-shadow: 0 0 20px 1px #F6FF00; //Delete this line if you do not want a box-shadow or change color//
    height: 140px;
    border-radius:6px; //Delete this line if you want square box//
}

.happy-new-year .hny-year {
    float: left;
    }

.happy-new-year .hny-year .hny-year-num {
    font-size: 80px;
}

.happy-new-year .hny-year .hny-year-num:nth-of-type(1) {
    color: #008F02;
}

.happy-new-year .hny-year .hny-year-num:nth-of-type(2) {
    color: #0C06F9;
}

.happy-new-year .hny-year .hny-year-num:nth-of-type(3) {
    color: #FC5A00;
}

.happy-new-year .hny-year .hny-year-num:nth-of-type(4) {
    color: #C30303;
}

.happy-new-year .hny-time {
    color: #fff;
    font-size: 17px;
    text-align: right;
    margin-top: 25px;
}

.happy-new-year .hny-time .text-year {
    font-weight: bold;
    margin-top: 25px;
    font-size: 40px;
    text-align: center;
}
.small{
            display: block;
            font-size: 20px;
            margin-top: 20px;
            text-align: center;
        }

        .color1{color: #FC5A00;}
        .color2{color: #FFF;}
        
.list-controls {
    padding-top: 30px;
}

On TOP:

<div data-new-year="2016" class="happy-new-year">
  <div class="hny-year animated zoomIn"></div>
  <div class="hny-time"> 
    <div class="animated slideInDown"><span>Missing&nbsp;</span><span class="hny-time-d"> //You can add text here//
</span><span class="hny-time-h"></span><span class="hny-time-m"></span><span class="hny-time-s"></span></div>
    <div class="text-year animated flipInX">Happy New Year  <small class="small">from <b class="color1">some text</b><b class="color2">some text</b></small></div> //Add text instead "some text" or delete this line//
  </div>
</div>

On BODY:



<script>
    $(document).ready(function() {
    $('.happy-new-year').is(function() {
        var hny_new_year = $(this).attr('data-new-year');
        var hny_text = "";
        var i;
        for (i = 0; i < hny_new_year.length; i++) {
            hny_text += '<span class="hny-year-num">' + hny_new_year[i] + '</span>';
        }

        $(this).children('.hny-year').html(hny_text);

        function newyear() {
            $('.happy-new-year').is(function() {
                var d = new Date();
                var ny = {
                    d: 31, // days
                    h: 24, // hours
                    m: 59, // minutes
                    s: 59 // seconds
                };
                var yt = {
                    d: ny.d - d.getDate(),
                    h: ny.h - (d.getHours() + 1),
                    m: ny.m - d.getMinutes(),
                    s: ny.s - d.getSeconds()
                };
                $(this).find('.hny-time-d').html(yt.d + ' days ');
                $(this).find('.hny-time-h').html(yt.h + ' hours ');
                $(this).find('.hny-time-m').html(yt.m + ' minutes ');
                $(this).find('.hny-time-s').html(yt.s + ' seconds');
            });
        }
        newyear();
        setInterval(function() {
            newyear();
        }, 1000);
    });
});
</script>

Tested on Firefox and Chrome.

Screenshot:

3.png1171×243 86.4 KB

Add this line on CSS
margin-top: 10px; (or what you want) in this element .happy-new-year .hny-year if you want lower text “2016” inside the box:

4.png1150×180 33.8 KB

7 Likes