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

[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

[nhl.pl]

No one asks how to add a snowman. Dig up for this topic to let you know secret recipe is available to you.

[kainos]

@nhl.pl How add a snowman?

[DownPW]

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

@nhl.pl How add a snowman?

Answers in this thread...

[kainos]

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

Answers in this thread...

by me Snowman does not appear

[baris]

Did you put it in the acp custom JS tab and enable it?

[kainos]

This post is deleted!

[kainos]

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

Did you put it in the acp custom JS tab and enable it?

It s solved....thanks baris....

[kainos]

But other question.....I need Home Button , and widget Recent Topics ...you can see photo....I have widget Recent Topics but not like here.....