Skip to content

is "night mode" shifting the forum several pixels up?

Solved Configure
8 2 2.5k 1
  • wrote on last edited by
    #1

    I was observing this in our forum for a very long time. Since nodebb community forum does not have night mode installed, I was not able to check there. However, if I click the night mode here, it looks like everything (including boxes, writings, bars, avatars, icons etc) is shifted a little bit up… It is only several pixels I guess, but definitely I can feel a difference before/after…

    Do you observe this or am I hallucinating? 😵 🤔

  • @phenomlab good to hear that I am not alone… 😄

    I do not know the reason for sure yet, but I will report here if I can find a clue…

    wrote on last edited by
    #4

    @crazycells Should be fixed now. Was being caused by some missing margins (left and right) and an odd border: none; setting which should not have been there. If you alternate between the two now, it should look correct.

  • I was observing this in our forum for a very long time. Since nodebb community forum does not have night mode installed, I was not able to check there. However, if I click the night mode here, it looks like everything (including boxes, writings, bars, avatars, icons etc) is shifted a little bit up… It is only several pixels I guess, but definitely I can feel a difference before/after…

    Do you observe this or am I hallucinating? 😵 🤔

    wrote on last edited by
    #2

    @crazycells no, you’re not hallucinating. I’ve noticed this myself and need to fix it. I’m suspecting rogue padding or margin somewhere.

  • @crazycells no, you’re not hallucinating. I’ve noticed this myself and need to fix it. I’m suspecting rogue padding or margin somewhere.

    wrote on last edited by
    #3

    @phenomlab good to hear that I am not alone… 😄

    I do not know the reason for sure yet, but I will report here if I can find a clue…

  • @phenomlab good to hear that I am not alone… 😄

    I do not know the reason for sure yet, but I will report here if I can find a clue…

    wrote on last edited by
    #4

    @crazycells Should be fixed now. Was being caused by some missing margins (left and right) and an odd border: none; setting which should not have been there. If you alternate between the two now, it should look correct.

  • phenomlab phenomlab has marked this topic as solved on
  • @crazycells Should be fixed now. Was being caused by some missing margins (left and right) and an odd border: none; setting which should not have been there. If you alternate between the two now, it should look correct.

    wrote on last edited by
    #5

    @phenomlab yes, it is fixed. is this the code I should use?

    body.lights-out {
    border: none;
    }
    
    
  • @phenomlab yes, it is fixed. is this the code I should use?

    body.lights-out {
    border: none;
    }
    
    
    wrote on last edited by
    #6

    @crazycells You should actually remove the border: none;

  • @crazycells You should actually remove the border: none;

    wrote on last edited by
    #7

    @phenomlab said in is "night mode" shifting the forum several pixels up?:

    @crazycells You should actually remove the border: none;

    how can I remove it?

    Should I edit the plugin and install the modified one?

  • @phenomlab said in is "night mode" shifting the forum several pixels up?:

    @crazycells You should actually remove the border: none;

    how can I remove it?

    Should I edit the plugin and install the modified one?

    wrote on last edited by
    #8

    @crazycells hmm. Good point. I actually use my own version of the dark mode plugin, so not entirely sure. However, I think the CSS is probably the same. I’m not at my PC currently but can check and advise later.


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
  • 4 Votes
    3 Posts
    2k Views
    crazycells
    thanks @DownPW ! this is definitely very helpful.
  • CSS code customization for the link preview plugin

    Solved Customisation css nodebb
    6
    2
    3 Votes
    6 Posts
    3k Views
    phenomlab
    @kadir-ay-0 marking as resolved based on https://community.nodebb.org/topic/17109/manual-build-a-night-mode-for-harmony/5 Please do not raise requests in two places - here and the NodeBB forums. All this does is create unnecessary load for both parties.
  • NodeBB socket with CloudFlare

    Solved Performance socket cloudflare nodebb
    24
    3 Votes
    24 Posts
    14k Views
    DownPW
    Solved. Tuto here and here
  • 4 Votes
    8 Posts
    2k Views
    phenomlab
    @Panda said in Upgrade to NodeBB v3? 2BB or not 2BB, that is the question!: So although thats a plugin it has Widget like element and stopped working on the Theme change Which is normal based on the widgets being reset when you change themes.
  • nodebb loading emojis

    Solved Configure nodebb emojis
    16
    1
    1 Votes
    16 Posts
    6k Views
    phenomlab
    @DownPW sure. Let me have a look at this in more detail. I know nginx plus has extensive support for this, but it’s not impossible to get somewhere near acceptable with the standard version. You might be better off handling this at the Cloudflare level given that it sits in between the requesting client and your server.
  • 1 Votes
    5 Posts
    2k Views
    phenomlab
    @DownPW very useful tip. Thanks
  • Title on homepage of nodebb forum

    Solved Customisation nodebb
    2
    1 Votes
    2 Posts
    2k Views
    phenomlab
    @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.
  • [NODEBB] Welcome Message

    Solved Customisation css html nodebb
    20
    2
    13 Votes
    20 Posts
    9k Views
    phenomlab
    @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.