[NODEBB] Help for my custom CSS

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

[cagatay]

Since the latest update, all my icons have disappeared. Could you please advise how to restore them?

[DownPW]

You use custom version of Font Awesome ?

[cagatay]

yes @downpw