[NODEBB] Help for my custom CSS

[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 :

[DownPW]

I’d like to do the same thing with the website logo.

For example, at Christmas time, I’d like to change my logo to something like a Santa hat, but it’s always cut off.

I’ve tried adjusting the size and margins, and even modifying the logo’s pixels directly, but it doesn’t seem to work. It’s always cut off in the same way.

[DownPW]

said in [NODEBB] Help for my custom CSS:

I’d like to do the same thing with the website logo.

For example, at Christmas time, I’d like to change my logo to something like a Santa hat, but it’s always cut off.

I’ve tried adjusting the size and margins, and even modifying the logo’s pixels directly, but it doesn’t seem to work. It’s always cut off in the same way.

@phenomlab ?

[DownPW]

This post is deleted!

[phenomlab]

I just upgraded to the latest version to see if I could replicate this, which I can’t. Do you perhaps have overriding CSS?

[DownPW]

resolve with :

li[component=post] a[href*=“/groups/administrators”] {
position: absolute !important;
left: 2px;
z-index: 2;
margin-top: 1px;
border-radius: 999px !important;
line-height: 14px;
display: block;
margin-left: 6px !important;
background: var(–bs-user-level-bg) !important;
color: var(–bs-body-color-primary) !important;
width: auto;
}

[phenomlab]

@DownPW great, but use position: absolute; carefully and sparingly

[DownPW]

Hi,

I’d like to enlarge the div so that the logo is fully displayed. Right now, for example, it’s cut off on the right at the glasses.

an idea ?

[DownPW]

if I set :

• {
  overflow: visible !important;
  }
  it’s OK.

I have not overflow: hidden in my custom css on acp…

Maybe because Fancybox add an <a> no ?

[phenomlab]

@DownPW strange. Fancybox doesn’t actually alter the image as far as I recall.

Does it make a difference if you change the class name (in developer mode) from fancybox to say, fancybox1?

If it works, then the class may have that defined already.

[DownPW]

@baris said:

You should change your selectors so it doesn’t look at the entire document. You probably only want to apply fancybox to stuff inside the #content element which is what changes when the user navigates around the page. So use $('#content a').... for your selectors then the forum logo in the header won’t be selected.

I modified the JS Fancybox code now and this code and it seem better

// ---------------------------------------------
// Fancybox Media Reader (Without Website Logo)
// ---------------------------------------------

if (top.location.pathname !== '/login') {
    $(window).on('action:posts.loaded', function(data) {
        console.log("Polling DOM for lazyLoaded images to apply Fancybox");
        $(document).ready(function() {
            $('#content a').not('.forum-logo').not(".avatar").not(".emoji").not(".bmac-noanimate").each(function() {
                $('#content a[href*=".jpg"], #content a[href*=".jpeg"], #content a[href*=".png"], #content a[href*=".gif"], #content a[href*=".webp"]').addClass("noanimate");
            });
        });
    });
}

if (top.location.pathname !== '/login') {
    $(document).ready(function() {
        $(window).on('action:ajaxify.end', function(data) {
            $('#content a').not('.logo').not(".avatar").not(".emoji").not(".bmac-noanimate").each(function() {
                $('#content a[href*=".jpg"], #content a[href*=".jpeg"], #content a[href*=".png"], #content a[href*=".gif"], #content a[href*=".webp"]').addClass("noanimate");
                data.preventDefault()
                // Strip out the images contained inside blockquotes as this looks nasty :)
                $('#content blockquote img').remove();
            });
            Fancybox.bind(
                '#content a[href*=".jpg"], #content a[href*=".jpeg"], #content a[href*=".png"], #content a[href*=".gif"], #content a[href*=".webp"]',
                {
                    groupAll: true,
                }
            );
        });
    });
}

// Chat fancybox - fires when chat module loaded and AJAX calls new chat
$(document).ready(function() {
    $(window).on('action:chat.loaded', function(data) {
        // >>> Se limiter au contenu principal uniquement <<<
        $('#content img').not('.forum-logo').not(".avatar").not(".emoji").not(".bmac-noanimate").each(function() {
            var newHref = $(this).attr("src");
            $(this).wrap("<a class='fancybox' href='" + newHref + "'/>");
            $('#content a[href*=".jpg"], #content a[href*=".jpeg"], #content a[href*=".png"], #content a[href*=".gif"], #content a[href*=".webp"]').addClass("noanimate");
            data.preventDefault();
            // Strip out the images contained inside blockquotes as this looks nasty :)
            $('#content blockquote img').remove();
        });
        Fancybox.bind(
            '#content a[href*=".jpg"], #content a[href*=".jpeg"], #content a[href*=".png"], #content a[href*=".gif"], #content a[href*=".webp"]',
            {
                groupAll: true,
            }
        );
    });
});

For the logo, I must use overflow: visible !important; on [component="brand/logo"]

/* --- Logo --- */
[component="brand/logo"] {
  max-height: 50px;
  width: auto;
  height: auto;
  max-width: 100%;     
  display: block;
  object-fit: contain;  
  object-position: left center;
  overflow: visible !important;
}

Better result !!