Skip to content
Sudonix

Reading Meter Progress bar

Locked Solved Customisation
15 3 2.7k 1
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
  • crazycellsundefined

    navigation menu panel on mobile

    Solved Customisation nodebb css
    8
    1
    7 Votes
    8 Posts
    1k Views
    phenomlabundefined
    @crazycells hmm. That’s odd. I haven’t made any changes from recollection but I could be wrong. I’ll need to check. EDIT - very strange. I honestly don’t recall adding the below CSS block to alter the bottom bar, but you’re right… .bottombar-nav { padding: 0px !important; } I’ve removed this so it reflects stock Harmony.
  • phenomlabundefined

    Switch between list and card view function

    Moved Let's Build It cards layout css
    107
    1
    50 Votes
    107 Posts
    25k Views
    phenomlabundefined
    @crazycells [image: 1711908210287-7f4c7193-7c28-4e2e-80e8-d439ac7285c6-image.png] [image: 1711908232109-3ab9c33d-04b9-4c15-91e6-891450aebfc2-image.png]
  • Pandaundefined

    What is this bar called?

    Solved Customisation nodebb
    92
    1
    36 Votes
    92 Posts
    21k Views
    DownPWundefined
    This is good
  • DownPWundefined

    Footer bar add center text

    Solved Customisation css
    41
    1
    8 Votes
    41 Posts
    9k Views
    DownPWundefined
    @phenomlab said in Footer bar add center text: div#console-nav-tab Ah ok test with bottom: 0px !important; idem
  • DownPWundefined

    Quote design CSS

    Solved Customisation css quote
    15
    1
    4 Votes
    15 Posts
    3k Views
    phenomlabundefined
    @DownPW yes, that does make sense actually. I forgot to mention the layout of Sudonix is custom so that would have an impact on the positioning. Good spot
  • phenomlabundefined

    CSS3: Gradient Generator

    Development css gradient
    1
    1 Votes
    1 Posts
    529 Views
    No one has replied
  • DownPWundefined

    [NODEBB] Help for my custom CSS

    Solved Customisation nodebb css bugfix
    237
    49 Votes
    237 Posts
    80k Views
    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 !!
  • DownPWundefined

    [NodeBB] Import custom Font

    Solved Customisation custom fonts nodebb css
    12
    3 Votes
    12 Posts
    3k Views
    phenomlabundefined
    @cagatay you’ll need to define this in the body tag (or another element if you want greater or more granular targets) - for example body { font-family: "Poppins"; font-size: 16px; } Essentially, you use the font-size CSS directive.