Skip to content
Sudonix

[NODEBB] Help for my custom CSS

Solved Customisation
245 5 108.8k 3
  • DownPWundefined

    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.

    8d7fea95-a138-42be-9ffd-12448b0b6fcd-image.jpeg

    an idea ?

    PW and WS Spirit alive

    0
  • DownPWundefined

    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 ?

    9780086b-1ca2-4b61-bf56-b4eb9e1c8871-image.jpeg

    PW and WS Spirit alive

    1
  • DownPWundefined 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 ?

    9780086b-1ca2-4b61-bf56-b4eb9e1c8871-image.jpeg

    phenomlabundefined

    @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.

    Mark – Founder, Phenomlab Ltd
    Executive IT & Security Leadership
    Phenomlab Ltd

    0
  • DownPWundefined

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

    PW and WS Spirit alive

    1
  • cagatayundefined

    23121622-50c4-4820-9df3-2c0f1673e070-image.jpeg

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

    0
  • DownPWundefined

    You use custom version of Font Awesome ?

    PW and WS Spirit alive

    0
  • cagatayundefined

    yes @downpw

    0
  • cagatayundefined cagatay

    yes @downpw

    DownPWundefined

    @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" />

    PW and WS Spirit alive

    0
  • cagatayundefined

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

    0
  • cagatayundefined cagatay

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

    DownPWundefined

    @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

    PW and WS Spirit alive

    0
  • DownPWundefined

    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.

    PW and WS Spirit alive

    0
  • cagatayundefined

    <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

    0
Log in to reply

Did this solution help you?
Did you find the suggested solution useful? Support 💗 Sudonix with a coffee ☕
If your organisation needs deeper expertise around infrastructure, security, or technology leadership, learn more about Phenomlab Ltd. Many of the deeper technical guides behind Sudonix are published there.

Related Topics
  • Pandaundefined

    Nodebb design

    Solved General nodebb
    2
    1 Votes
    2 Posts
    986 Views
    phenomlabundefined
    @Panda said in Nodebb design: One negative is not being so good for SEO as more Server side rendered forums, if web crawlers dont run the JS to read the forum. From recollection, Google and Bing have the capability to read and process JS, although it’s not in the same manner as a physical person will consume content on a page. It will be seen as plain text, but will be indexed. However, it’s important to note that Yandex and Baidu will not render JS, although seeing as Google has a 90% share of the content available on the web in terms of indexing, this isn’t something you’ll likely lose sleep over. @Panda said in Nodebb design: The “write api” is preferred for server-to-server interactions. This is mostly based around overall security - you won’t typically want a client machine changing database elements or altering data. This is why you have “client-side” which could be DOM manipulation etc, and “server-side” which performs more complex operations as it can communicate directly with the database whereas the client cannot (and if it can, then you have a serious security flaw). Reading from the API is perfectly acceptable on the client-side, but not being able to write. A paradigm here would be something like SNMP. This protocol exists as a UDP (UDP is very efficient, as it is “fire and forget” and does not wait for a response like TCP does) based service which reads performance data from a remote source, thus enabling an application to parse that data for use in a monitoring application. In all cases, SNMP access should be “RO” (Read Only) and not RW (Read Write). It is completely feasible to assume complete control over a firewall for example by having RW access to SNMP and then exposing it to the entire internet with a weak passphrase. You wouldn’t do it (at least, I hope you wouldn’t) and the same ethic applies to server-side rendering and the execution of commands.
  • DownPWundefined

    hover link effect

    Solved Customisation css link hover
    18
    1
    6 Votes
    18 Posts
    4k Views
    phenomlabundefined
    @DownPW Looking at the underlying code, class start is being added on hover by jQuery in this function document.querySelectorAll(".button-gradient, .button-transparent").forEach((button) => { const style = getComputedStyle(button); const lines = document.createElement("div"); lines.classList.add("lines"); const groupTop = document.createElement("div"); const groupBottom = document.createElement("div"); const svg = createSVG( button.offsetWidth, button.offsetHeight, parseInt(style.borderRadius, 10) ); groupTop.appendChild(svg); groupTop.appendChild(svg.cloneNode(true)); groupTop.appendChild(svg.cloneNode(true)); groupTop.appendChild(svg.cloneNode(true)); groupBottom.appendChild(svg.cloneNode(true)); groupBottom.appendChild(svg.cloneNode(true)); groupBottom.appendChild(svg.cloneNode(true)); groupBottom.appendChild(svg.cloneNode(true)); lines.appendChild(groupTop); lines.appendChild(groupBottom); button.appendChild(lines); button.addEventListener("pointerenter", () => { button.classList.add("start"); }); svg.addEventListener("animationend", () => { button.classList.remove("start"); }); }); }) The CSS for start is below .button-gradient.start .lines svg, .button-transparent.start .lines svg { animation: stroke 0.3s linear; } And this is the corresponding keyframe @keyframes stroke { 30%, 55% { opacity: 1; } 100% { stroke-dashoffset: 5; opacity: 0; } } It’s using both CSS and SVG, so might not be a simple affair to replicate without the SVG files.
  • Pandaundefined

    Title on homepage of nodebb forum

    Solved Customisation nodebb
    2
    1 Votes
    2 Posts
    2k Views
    phenomlabundefined
    @eveh Welcome board The code you are referring to is custom written as no such functionality exists under NodeBB. However, adding the functionality is relatively trivial. Below are the required steps Navigate to /admin/appearance/customise#custom-header Add the below code to your header, and save once completed <ol id="mainbanner" class="breadcrumb"><li id="addtext">Your Title Goes Here</li></ol> Navigate to /admin/appearance/customise#custom-js and add the below code, then save $(document).ready(function() { $(window).on('action:ajaxify.end', function(data) { // Initialise mainbanner ID, but hide it from view $('#mainbanner').hide(); var pathname = window.location.pathname; if (pathname === "/") { $("#addtext").text("Your Title"); $('#mainbanner').show(); } else {} // If we want to add a title to a sub page, uncomment the below and adjust accordingly //if (pathname === "/yourpath") { //$("#addtext").text("Your Title"); //$('#mainbanner').show(); //} }); }); Navigate to /admin/appearance/customise#custom-css and add the below CSS block .breadcrumb { right: 0; margin-right: auto; text-align: center; background: #0086c4; color: #ffffff; width: 100vw; position: relative; margin-left: -50vw; left: 50%; top: 50px; position: fixed; z-index: 1020; } Note, that you will need to adjust your CSS code to suit your own site / requirements.
  • Madchatthewundefined

    Bootstrap Version

    Solved Customisation nodebb bootstrap
    8
    5 Votes
    8 Posts
    2k Views
    Madchatthewundefined
    @phenomlab That will be nice once they have completed that. It will be interesting to see how long that takes. So for now I will use custom css to make it look the way I want. Frameworks just make things a little faster. Thanks @phenomlab
  • crazycellsundefined

    what does sound/mute button do?

    Solved Customisation nodebb
    20
    1
    9 Votes
    20 Posts
    4k Views
    phenomlabundefined
    @crazycells Yeah, looking at the plugin itself, that’s a hard coded limit [image: 1653494282106-3d6dbc10-185b-4102-9470-0c2731a10750-image.png] I’ll probably remove that… eventually…
  • DownPWundefined

    [NodeBB] [JS SCRIPT/CSS] Theme Switcher

    Customisation theme switcher javascript css theme
    8
    4 Votes
    8 Posts
    4k Views
    phenomlabundefined
    @DownPW done
  • RiekMediaundefined

    NodeBB Design help

    Solved Customisation
    8
    3
    2 Votes
    8 Posts
    2k Views
    phenomlabundefined
    @riekmedia I’ve applied some new CSS to your site. Can you reload the page and try again ? For the record, this is what I added #footer { background: #2d343e; border-top: 4px solid #2d343e; font-size: 0.9em; margin-top: 70px; padding: 80px 0 0; position: relative; clear: both; bottom: 0; left: 0; right: 0; z-index: 1000; margin-left: -15px; margin-right: -338px; } The /categories page seems a bit messed up, so looking at that currently EDIT - issued some override CSS in the CATEGORIES widget <!--- CSS fix for overspill on /categories page - DO NOT DELETE --> <style> #footer { margin-right: -45px; } </style> That should resolve the /categories issue.
  • JACundefined

    [NodeBB] custom Gravatar image not showing

    Solved Customisation
    6
    1 Votes
    6 Posts
    2k Views
    JACundefined
    @jac said in [NodeBB] custom Gravatar image not showing: @phenomlab said in [NodeBB] custom Gravatar image not showing: @jac are you using Custom ? Sure am mate Confirmed Fixed