[NODEBB] Help for my custom CSS

[phenomlab]

@DownPW Possible, yes, although this particular effect uses CSS only for both the text itself, and the shine rollover. It’s actually quite complex in setup and takes several adjustments to get it to look right.

It’s also important to understand if you are using this on a logo, or just text?

[DownPW]

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

It’s also important to understand if you are using this on a logo, or just text?

just text; logo on the left is separate

[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;
}