[NODEBB] Help for my custom CSS

[phenomlab]

@DownPW And the hue animation? Or just the glass effect?

[DownPW]

I’d like to try it without HUE to start.

But I’m always keen to try lots of things

You could always explain both to me, so I can apply them separately.

[phenomlab]

@DownPW Ok. No problems. Let me get back to you. In real life calling presently.

[DownPW]

OK

Wait News

[Madchatthew]

Yeah I also like the looks and effect of the Sudonix logo at the top. Looks very awesome!

[DownPW]

[phenomlab]

@DownPW coming soon…

[DownPW]

@phenomlab said in [NODEBB] Help for my custom CSS:

@DownPW coming soon…

No problem, I like to annoy you, you know that

French expression: He who loves well, chastises well !

[phenomlab]

@DownPW I made some final alterations to the master code for this effect, and will release very soon.

[phenomlab]

@DownPW here you go

https://sudonix.org/topic/718/glass-shine-effect-on-sudonix-logo

[DownPW]

Ohh super ^^
Thank you Mark

[cagatay]

Hi Mark
My Homepage did not shown on top.

[phenomlab]

@cagatay That looks like you didn’t define a label for the icon. Have a look at /admin/settings/navigation, and you’ll see what I mean

[cagatay]

thank you Mark, fixed.

[cagatay]

how can i add these new year icons to my home page as well?

[DownPW]

@cagatay said in [NODEBB] Help for my custom CSS:

how can i add these new year icons to my home page as well?

JS:

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

CSS:

// ------------------------------------------
// Christmas styling 
// ------------------------------------------
/* Guirlande header */



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

.container.px-md-4.brand-container {
    margin-top: 10px;
}


/*
.skin-noskin #content {
    background: rgba(255, 255, 255, 0.9);
    margin-top: 1rem;
    border-radius: 5px;
}*/

/* end christmas styling */

img#snow-man {
    width: 280px;
}

@media all and (max-width: 768px) {
#snow-man {
    display: none;
  }
  .container.px-md-4.brand-container {
    margin-top: 15px !important;
    }
}   

div#console-nav-tab {
    z-index: 1000;
}

[cagatay]

thank you @DownPW

[DownPW]

Hello @phenomlab

I’d like to increase the size of the avatar image in the right sidebar without widening it, and center all the icons.

I can’t find the right code.

Any ideas?

.sidebar #user_dropdown .avatar {
    margin: 2px 0;
    width: 30px;
    height: 30px;
}

[phenomlab]

@DownPW There isn’t any easy way to achieve this without using position: absolute on the img itself. Even then, you’d need to manually alter the position of the child icons in the same div (the sidebar). Whilst I do see the appeal, it’s not something I’d recommend doing to be honest.

[DownPW]

@phenomlab

I succeeded in the following way by playing with the margins.

.sidebar #user_dropdown .avatar {
    margin: 2px -7px;
    width: 35px;
    height: 35px;
}

Result is good :