Customisation

Hey everyone,

I’m not sure where to post this, I’ll let @phenomlab edit it if necessary.

Already posted here : https://community.nodebb.org/topic/19318/focus-mode-simply-immersive-reading-for-nodebb

I’ve been working on a small client-side script that adds an simply immersive reading mode to NodeBB. No plugin required, just a few lines of custom JS and CSS dropped into the ACP.

I’m just sharing this here for fun : https://github.com/DroidBV8/nodebb-focus-mode

What it does

Pressing F (or clicking the icon in the right sidebar) hides everything that isn’t the content you’re trying to read:

• Both sidebars
• Header / brand bar
• Footer
• Topic thumbnails and sidebar tools (reply, follow, timeline)

The content area reflows to a centered 860px column, font size bumps up slightly, and a reading progress bar appears at the top of the page.

To exit: press F again, Escape, or click the floating button that appears in the bottom-right corner.

Details

Activation effect : a subtle CRT glitch effect plays on toggle. Three CSS variables let you dial the intensity up or down without touching the keyframes:

--fm-glitch-opacity: 1;   /* 0.5 = subtle | 2 = heavy */
--fm-glitch-skew:    1deg;
--fm-glitch-shift:   4px;

Keyboard : F to toggle. Ctrl+F, Cmd+F and Alt+F are ignored so you don’t accidentally trigger it when searching the page.

Scroll preservation : when toggling, the layout shifts because sidebars appear/disappear. The script measures the position of the nearest visible post before and after the layout change, then compensates with scrollBy so you stay exactly where you were.

Topic-only : the button is greyed out on non-topic pages with a tooltip explaining why. Pressing F outside a topic shows a small toast instead of doing nothing silently.

Mobile: disabled entirely under 768px. No button injected, no state restored.

Theming : all colors reference Bootstrap CSS variables (--bs-body-bg, --bs-border-color, --bs-primary, etc.) so it adapts automatically to any NodeBB theme, light or dark.

State : saved in localStorage, restored on next visit. Uses try/catch so it degrades gracefully in private browsing.

Implementation notes

The script is a self-contained IIFE, hooking into the standard NodeBB client-side events:

$(window).on('action:ajaxify.end',   function () { focusMode(); });
$(window).on('action:topic.loaded',  function () { focusMode(); });
// etc.

The glitch effect is pure CSS @keyframes , the JS only adds/removes classes. Layout compensation is synchronous (getBoundingClientRect → scrollBy) with no setTimeout on the scroll itself, which avoids triggering NodeBB’s scroll-based URL updater in a loop.

Compatibility

Tested on NodeBB 3.x with Bootstrap 5 themes. Should work on any setup using the standard sidebar components (nav.sidebar-left, nav.sidebar-right).

Hi I am trying to create a custom page called GameTracker. I head to Navigation and add a custom route. Do i type /gametracker or gametracket.tpl in the route. ? To be honest none of them work. When I go to extend/widgets I do not see the template. I have uninstalled and reinstalled but with same problem. Nothing in logs what I can see. What am I doing wrong. I did this in the past no worries. Many of these older plugins to not install at all for me in the ACP. I get a huge error. Now I cannot even uninstall it without error.

I tried to gove nodebb the benefit of the doubt. I had new OS install, new mongo blah blah blah but soon as I touch this nodebb its a nightmare lol.

I also did not have this below on my page. Maybe thats an older version. Someone was mentioning this here in Sudonix some time ago.

Hi All,

It’s been a while. I took a break from well…everything to be honest. Anyway here I am and I hope you are all well.

I have a question regarding nodebb and external links. Is it possible to make all external links open in a new window by default? Pretty sure it’s not in the settings. A lot has chnaged since I last played around with it.

Thank you in advance.

Hi @phenomlab

As seen in pm, I open this topic to follow the 2 following ones:

https://sudonix.org/topic/200/nodebb-reply-button-arrow-answer/24

https://sudonix.org/topic/179/nodebb-css-style-sheets-selectbox/109

– For the submit button, on new Topic and reply to a topic, ll work great with default theme (CSS code in ACP) but I end up with some bugs on my Custom themes

– I copied your code for the button in the ACP/custom CSS (for default theme)

.btn-group>.btn:last-child:not(:first-child), .btn-group>.dropdown-toggle:not(:first-child) {
  margin-left: -3px;
}
.btn-group>.btn:not(:first-child):not(:last-child):not(.dropdown-toggle):hover {
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
}
button.btn.btn-primary.composer-submit:hover {
    border-top-right-radius: 4px !important;
    border-bottom-right-radius: 4px !important;
}
.btn .caret {
  margin-left: 2px;
}
.btn-group>.btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
  border-radius: 0px;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  margin-left: 0px;
}

– Ref to the topic I add this :

.btn-primary {
    color: #fff;
    background-color: #337ab7;
    border-color: #337ab7;
}

– After several hours of testing and research, I think I have variable conflicts in the custom CSS and I can’t get by anymore

I list the bugs below to fix here.

I can give you access to modify the CSS file as you wish and do some tests.
A backup of the file is made so it doesn’t matter.

If you can help me with one CSS and explain what you do exactly (delete, add, modfy), I can reproduce on the other themes

!! I give you access and information on PM !!

Bug found. (Maybe other, if you can see that too).

– Problem due to small hack, can be avoided by changing hover color (color a bit darker like in default theme) or other hack:

– Same problem on chat edit button:

– Same problem on advanced search/Save preference button:

Thanks in advance

Hi @phenomlab

I see a welcome Message at the right of your website

I have an HTML widget on ACP with this code :

<div class="getUsername">Bonjour, <a href="/me"><span class="username">MY USERNAME</span></a></div>

And my CSS :

.getUsername {
    padding-top: 20px;
    padding-bottom: 5px;
    text-align: right;
    font-size: 90%;
    line-height: 2.4;
    font-weight: bold;
}

Everything is good except the main one, the display of the username.

I saw that you used the /me on aHref, that can be added in the URL (https://XXXXX.XX/me) to point to the user profile

But how do you display the name of it because my HTML code displays what I ask it to display. In other words “MY USERNAME”

In other words how do you display the name of the user? With JS?

Other things, At this time it is indicated “good evening”.

Quiz of when is the start of the day

Hi @phenomlab ,

I am working on CSS codes to customize the link-preview plugin for some time, but I was unsuccessful so, I wanted to consult you in case I am missing an important line…

Unfortunately, normal previews of this plugin are too big for our taste, just like how iframely used to be…

https://sudonix.org/post/4083

I ended up something like this:

.post-container .content .card {
    display: contents !important;  
}

.link-preview {
    
    .card-img-top {
        height:120px !important;
        width: auto !important;
        overflow: hidden !important;        
        float: left !important;
        padding: 0 5px 0 0 !important;      
    }
    
    .card-body {
        padding: 1px 1px 1px 1px !important;
    }
    
    .card-footer {
        position: relative !important;    
    }
}

But this is nowhere near close to what I was aiming…

This is how it used to be with iframely and what we are aiming:

This is how ugly it looks right now

I hope you can help with this transformation
Thanks,

In the Persona theme, the navbar is at the top left on mobile, but in the Harmony theme, it appears at the bottom. How can I move the navbar to the top left, just like in the Persona theme? Is there a solution for this?

Please help me, I can’t install nodebb, I installed it for a week, the installation was unsuccessful, please help me, I provide the server account and password, my operating system is Ubuntu 22.04, please help me, friends, thank you.

Hi Mark,

I’d like some help customising two forums running NodeBB please if possible.

I wish to change the colours of the buttons below.

And how can I change the board stats widget to look similar to this…

As always, thank you! .

Hello @phenomlab

I use fancy box like you on my nodebb Instance but I have no zoom when I click on a image :

I would like to include a zoom button like you and on Sudonix but with the possibility of zooming several times (once on your site) because I have image with little text

Here my code :

Header:

<!-- Fancybox -->
<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"/>

JS :

// ------------------------------------------
// Fancybox Media Reader
// ------------------------------------------
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() {
            $('a').not('.forum-logo').not(".avatar").not(".emoji").not(".bmac-noanimate").each(function() {
                $('a[href*=".jpg"], a[href*=".jpeg"], a[href*=".png"], a[href*=".gif"], a[href*=".webp"]').addClass("noanimate");
            });
        });
    });
}

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

Can you help me for this ?

@phenomlab
Do you have any plan to move Sudonix to the Fediverse verison of NodeBB?
Ive done a few tests and finding it quite an intellectual challenge, how far down that road are you currently?

Hello friends,

It’s been a long time since I’ve been on Sudonix and I’m sorry (lots of things to do and I’ve resumed some studies since I was 38 :))

To make up for it, here is a little script that I managed to create with ChatGpt and other sources. (I’m not a great dev)

I think code it’s correct and don’t hesitate Mark @phenom if you see anything.

I’m looking for ways to improve it but it’s functional.

Here is what I would like to update:

• The effect works almost everywhere except when you are in a topic. It would be that it also works in a topic therefore.
• I would also like the effect to work on the entire page. For the moment the left and right navigation bars are ignored without me really knowing why.

Despite everything, I find the effect quite nice and cool

Mark, if you can make the 2 missing points work, I’m in!!!

See you again!!

here the code :

https://github.com/DroidBV8/nodebb-glitch-refresh/tree/main

Hi Mark,

I’m trying to customise the nodebb-plugin-recent-cards widget that I have on my forum, I would like it to show … at the end of box so it doesn’t look so untidy, is this something that’s possible?

Thanks as always

hi @phenomlab , when the forum is used as PWA, there is no easy way to navigate between pages…

Several days ago, I was reading a post on a forum that mentioned another topic, I have encountered an issue when attempting to return to the original post. So, after reading the linked topic, I had to go to categories page and retrace my steps to locate the topic I was reading initially…

Although this can be achieved by page control arrows on destop and mobile browsers, there is no easy way to achieve this on PWA… so I wonder if you can help me adding some page control buttons that appear at the bottom of the page when scrolled up. (maybe it can be integrated to post navigation bar but I believe those buttons should appear in all pages, not only in topics)

Here is just some suggestions to distinguish them from other arrows…

alternatively the arrows or rewind icons that YouTube uses can be used:

Hi @phenomlab , how are you?

I have an info icon because of the glossary plugin, however, the icon is not at the place where I want it to be… I made it smaller with this code, however, I also want to change its position, I think I prefer it further above, on the upper right corner of the word. Do you know which codes should I use?

.glossary-wrapper {
    .fa-info {
        font-size: .500em;
    }
}

Hi , I am talking about the moved labels with arrows on the badge that is listed on topics list… how can I target them with CSS?

Hello, what would be the CSS codes to prevent voting panel (the one on the right bottom of the posts) to disappear in standard NodeBB? It is annoying that it disappears constantly You have them very good on sudonix…

Hi @phenomlab ,

I am trying to make this menu panel longer… What is the easiest way to do this?

What is the best way/plugin to have custom badges like the twitter blue check mark?

@phenomlab I see you have these colorful ones… which are quite close:

Hi,

I would like to ask how to style the tool tip in nodebb-plugin-user-level, that appears when you click on the user level icon. I just want to change some text styling. I’m trying to target it with the dev tools but can’t see any changes to the DOM.

Btw it seems that on your site you removed the level in form of text, it looks nice and minimalistic but the tool tip information doesn’t make much sense to me.

edit: I think I got it, after the stars there come different medals right? I like the star system