Pimp my NodeBB (codes for the holidays/christmas theme)

[crazycells]

I would like to know the codes for these theme changes please share your secret...

Happy Holidays everyone!

[baris]

The lights are done with

body {
    background-image: url('https://community.nodebb.org/assets/uploads/files/xmas-lights.png');
    background-repeat: repeat-x;
    background-position: top -20px left;
}

The snowman is some custom JS.

$(window).on('action:ajaxify.end', function(ev, data) {
    if (!$('#snow-man').length) {
        $(`<img 
            src="https://www.freeiconspng.com/thumbs/snowman-png/snowman-png-29.png" 
            id="snow-man" 
            class="d-none d-lg-block position-fixed pe-none" style="z-index: 1054; bottom: -50px; right: -100px;"/>
        `).appendTo('body');
    }
});

[crazycells]

@baris thanks...

they will be the same for persona/harmony , right?

is there a way to show the snowman on mobile?

[julian]

How festive, @baris

[baris]

Persona might need some modification to the lights top value since it has a top navbar.

If you wan the snowman on mobile remove this d-none d-lg-block but you might have to add additional css to make it smaller.

[baris]

@julian just need a snowfall javascript lib to people's cpus now

[crazycells]

@baris got it. Thanks!

For persona, I changed them to this:

body .navbar {
    background-image: url('https://imagizer.imageshack.com/img922/3900/FHfbQo.png');
    background-repeat: repeat-x;
    background-position: top -20px left;
    }

Additionally, in case someone wants to get it below the navbar on desktop view but on navbar on mobile view, they can use these:

body {
    background-image: url('https://imagizer.imageshack.com/img922/3900/FHfbQo.png');
    background-repeat: repeat-x;
    background-position: top -20px left;
    background-position-y: top 68px;
    background-attachment: fixed;
}

@media (max-width: 991px) {
    body .navbar {
    background-image: url('https://imagizer.imageshack.com/img922/3900/FHfbQo.png');
    background-repeat: repeat-x;
    background-position: top -20px left;
    background-attachment: fixed;   
    }
}

pixels can be adjusted accordingly...

[phenomlab]

We should change the title of this post to "Pimp my NodeBB"....

[crazycells]

@phenomlab ahahah done...

[julian]

Do I smell a new topic series.....

[crazycells]

@baris said in Pimp my NodeBB (codes for the holidays/christmas theme):

The snowman is some custom JS.

is there anything else we have to do beside copying this code into "Custom Javascript"? It is not working...

[baris]

@crazycells if you are on 2.x then use this

$(window).on('action:ajaxify.end', function(ev, data) {
    if (!$('#snow-man').length) {
        $(`<img 
            src="https://www.freeiconspng.com/thumbs/snowman-png/snowman-png-29.png" 
            id="snow-man" 
            style="position: fixed; z-index: 1054; bottom: -50px; right: -100px;"/>
        `).appendTo('body');
    }
});

[crazycells]

@baris no, I am using NodeBB 3.6.0 ... it is not working on our dev...

[crazycells]

@baris it is fixed thanks for your help...

[crazycells]

Our snowman blocks the pagination wrapper on mobile... it looks like changing z-index works, but I suspect this might break the image on other pages...

z-index: auto

So, I wonder if there is an easy/smarter fix for this?

[baris]

You can try adding pointer-events: none to the snowman css so it ignores clicks.

$(window).on('action:ajaxify.end', function(ev, data) {
    if (!$('#snow-man').length) {
        $(`<img 
            src="https://www.freeiconspng.com/thumbs/snowman-png/snowman-png-29.png" 
            id="snow-man" 
            style="pointer-events: none; position: fixed; z-index: 1054; bottom: -50px; right: -100px;"/>
        `).appendTo('body');
    }
});

[crazycells]

@baris Thanks a lot, this neatly solved the issue.

[omega]

Deck the Node with Custom Code fra la la la laa la la la laa

Merry Christmas