[NODEBB] Help for my custom CSS

[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

[DownPW]

@cagatay said:

yes @downpw

So is taht the problem.
The core migrated to FA6 and no longer automatically includes the compatibility layers. The all.css alone is no longer enough because it only loads icons in native FA6 syntax (fa-solid, fa-regular, etc.). Your old icons using FA4 syntax (fa fa-something) are no longer recognized without the shims.

Hence the need for the three files:

• all.css: the FA6 icons themselves
• v4-shims.css: the mapping table that remaps the old FA4 names to their FA6 equivalents (many icons were renamed between FA4 and FA6)
• v4-font-face.css: redeclares the FontAwesome @font-face with the old family names (FontAwesome instead of "Font Awesome 6 Pro"), so CSS selectors targeting the old font-family keep resolving

So if your customs still use FA4 syntax, all three are required.

I load my Custom FA like this in my ACP/Headers :

<link href="/assets/customfonts/FontAwesome.Pro.6.x.x/css/all.css" rel="stylesheet" />
<link href="/assets/customfonts/FontAwesome.Pro.6.x.x/css/v4-shims.css" rel="stylesheet" />
<link href="/assets/customfonts/FontAwesome.Pro.6.x.x/css/v4-font-face.css" rel="stylesheet" />

[cagatay]

how i create those folders. i added ACP/HEADERS the codes but not working.

[DownPW]

@cagatay said:

how i create those folders. i added ACP/HEADERS the codes but not working.

Adapt path to your custom installation. I don’t know where is your custom FA Folder nor how you use it

[DownPW]

You need to load your Font Awesome CSS files by adjusting this code to the path where you saved them.

But honestly, I don’t know how you’ve configured your site in this regard.

[cagatay]

<meta http-equiv=“Content-Type” content=“text/html; charset=utf-8” />
<link href=“/assets/fonts/fonts.min.css?version=1” rel=“stylesheet”>
<link href=“/assets/customfonts/FontAwesome.Pro.6.x.x/css/all.css” rel=“stylesheet” />
<link href=“/assets/customfonts/FontAwesome.Pro.6.x.x/css/v4-shims.css” rel=“stylesheet” />
<link href=“/assets/customfonts/FontAwesome.Pro.6.x.x/css/v4-font-face.css” rel=“stylesheet” />
<script src=“https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.umd.js”></script>
<link rel=“stylesheet” href=“https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.css”/>
<a id=“pageUp” class=“”><i class=“fas fa-chevron-up”></i></a>
<div id=“readingposition” class=“reading-meter” style=“bottom: 0px;”>
<div class=“reading-meter-background rounded-1 border border-gray-300 ready”>
<div class=“reading-meter-progress-bar rounded-1” id=“progress-bar”>
</div>
</div>
</div>

what i have now

[phenomlab]

@cagatay if you look in the console (developers console in browser) do you see any error messages being returned?

Linux is case sensitive, and it’s possible to have the same filename and folder name in upper and lower case.

I suspect this might be the issue, but I could be wrong.

[cagatay]

Mark, the situation is that since I used your CSS files, I don’t even have the Frontawese folder. Because of that, I really need your direct help. I’d really appreciate it if you could take a look whenever you have some free time.

[cagatay]

Hi Mark, hope you’re doing well. Are you going to be able to help me with this?

[phenomlab]

@cagatay Just looking at this now. Do you have a FA Pro 6 license, or are you trying to use the free version? It’s not immediately clear, and the directory structure on your server is a mess to be honest. Not sure what has happened here.

EDIT - I have it working. DM me.

[cagatay]

thank you Mark.

[DownPW]

so what is the problem of @cagatay mark @phenomlab ?

[cagatay]

i do not know Mark resolved.

[phenomlab]

@DownPW the FA library was missing with no paths defined. I’ve set these in the headers and uploaded the source, including necessary shim files which resolves the issue.

[DownPW]

OK
Likely deleted by mistake from the NodeBB ACP headers.

[phenomlab]

@DownPW Possibly, but the source files were also missing, and @cagatay has a custom theme developed by me.