Skip to content
Sudonix

[NodeBB] Focus Mode : simply immersive reading for NodeBB

Customisation
1 1 62
  • DownPWundefined

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

    PW and WS Spirit alive

    👍
    2
  • DownPWundefined DownPW marked this topic as a regular topic
Log in to reply

Related Topics
  • crazycellsundefined

    navigation menu panel on mobile

    Solved Customisation nodebb css
    8
    1
    7 Votes
    8 Posts
    2k 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.
  • Pandaundefined

    Whitespace fixes in Nodebb

    Solved Customisation nodebb
    18
    2
    7 Votes
    18 Posts
    4k Views
    phenomlabundefined
    @Panda Just circling back here with something of an update (which I think you’ll like). I’ve completely restructured the ranking system. There are now less ranks, with a higher point threshold to reach them. More importantly, if you reload the site, you’ll notice that the ranks are now icons. I also removed the “Author” badge, and made this a single icon, which (to me) looks much better.
  • Pandaundefined

    Interesting Widget code, but can't fetch API

    Solved Customisation nodebb
    26
    2 Votes
    26 Posts
    7k Views
    phenomlabundefined
    @Panda said in Interesting Widget code, but can’t fetch API: How did you drop that widget into the post there? I hadnt seen this BSgenerator anywhere on sudonix site, do you use it somewhere already? Yes, here https://sudonix.org/topic/414/corporate-bullshit-generator?_=1687774393044 It’s not a “post” or “topic” in the common sense. It is actually a page in it’s own right and leverages nodebb-plugin-custom-pages. This in turn creates a new “route” which behaves like a page, meaning it is then exposed for widgets. @Panda said in Interesting Widget code, but can’t fetch API: Also can you explain more what you mean by calling the code externally. In my API call example, how would I go about doing that? By this, I mean create all the required code in an external JS file that is reachable by the NodeBB instance - so, in “public” for example - or in my case /public/js. The widget then “calls” that file and because it runs outside of the scope of NodeBB, you just need to return the values to the widget. Hope this makes sense?
  • cagatayundefined

    How to fix size of photos & videos NodeBB

    Solved Customisation nodebb nodebb size
    7
    3 Votes
    7 Posts
    2k Views
    phenomlabundefined
    @crazycells pleasure. Using percentages makes much more sense in this case. It’s the same argument with px vs pt vs em with fonts, margins, padding, etc., in the sense that em is generally preferred over px and pt https://stackoverflow.com/questions/609517/why-em-instead-of-px
  • cagatayundefined

    who is read NodeBB

    Customisation read post nodebb
    6
    0 Votes
    6 Posts
    2k Views
    phenomlabundefined
    @cagatay You should ask in the NodeBB forums. Perhaps reference this post https://discuss.flarum.org/d/23066-who-read
  • DownPWundefined

    hover link effect

    Solved Customisation css link hover
    18
    1
    6 Votes
    18 Posts
    3k 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.
  • DownPWundefined

    [NODEBB] Scroll Button

    Solved Customisation css javascript html scroll button
    7
    1
    0 Votes
    7 Posts
    2k Views
    phenomlabundefined
    @downpw ooops. Forgot that. Thanks for adding.
  • DownPWundefined

    [NODEBB] Welcome Message

    Solved Customisation css html nodebb
    20
    2
    13 Votes
    20 Posts
    6k Views
    phenomlabundefined
    @DownPW the ‘js’ code for the banner takes the time from the client, so what it displays really depends on the regional settings for the operating system. I’ve not seen this issue myself but would like to see some examples of screenshots if possible.