Skip to content

[NODEBB] Help for my custom CSS

Solved Customisation
255 5 119.5k 3
  • hello @phenomlab

    I have a very odd bug that I didn’t have before

    I have images and background color defined for each category

    when I open a new topic, the fa icon on the bottom left taskbar does not appear like when I reply to a topic

    Here a gif too see the problem :

    new topic.gif

    And here is the result I want:

    4557001f-9b28-4a10-84e4-46d0dcffe20d-image.png

    I have tried to play with the color or z-index variable in css but nothing works

    I tried disabling the custom CSS on ACP but it’s the same. clear the cache = same

    Have you an idea ?

    You can test on production forum

    @DownPW Seems to come from this code

    66521fca-2e73-4d69-820e-2915f1ecd948-image.png

    It should look like this

    bf8b00ba-a92e-4475-afc1-a6f7e7184373-image.png

    Do you have any custom JS that is altering this, or perhaps a plugin ?

  • I will test without css, js, header and it’s the same 😞

  • I will test without css, js, header and it’s the same 😞

    @DownPW What plugins do you have installed ?

  • Active plugins:

        * @nodebb/nodebb-plugin-reactions@1.0.2 (installed, enabled)
        * @nodebb/nodebb-plugin-user-level@1.0.4 (installed, enabled)
        * nodebb-plugin-beep@0.4.7 (installed, enabled)
        * nodebb-plugin-browsing-users@2.0.4 (installed, enabled)
        * nodebb-plugin-cards@0.3.1 (installed, enabled)
        * nodebb-plugin-composer-default@9.1.0 (installed, enabled)
        * nodebb-plugin-dbsearch@5.1.5 (installed, enabled)
        * nodebb-plugin-emoji@4.0.4 (installed, enabled)
        * nodebb-plugin-emoji-apple@3.0.0 (installed, enabled)
        * nodebb-plugin-extended-markdown@1.6.0 (installed, enabled)
        * nodebb-plugin-global-chat@2.0.0 (installed, enabled)
        * nodebb-plugin-iframely@0.7.16 (installed, enabled)
        * nodebb-plugin-imgur@2.0.5 (installed, enabled)
        * nodebb-plugin-markdown@10.1.0 (installed, enabled)
        * nodebb-plugin-mentions@3.0.11 (installed, enabled)
        * nodebb-plugin-ns-embed@6.0.0 (installed, enabled)
        * nodebb-plugin-poll@2.0.6 (installed, enabled)
        * nodebb-plugin-question-and-answer@0.12.25 (installed, enabled)
        * nodebb-plugin-recent-cards@2.0.22 (installed, enabled)
        * nodebb-plugin-spam-be-gone@1.0.0 (installed, enabled)
        * nodebb-plugin-tenor-gif@2.2.0 (installed, enabled)
        * nodebb-plugin-twitter@0.1.0 (installed, enabled)
        * nodebb-plugin-ws-dice@2.4.2 (installed, enabled)
        * nodebb-rewards-essentials@0.2.1 (installed, enabled)
        * nodebb-theme-persona@12.1.1 (installed, enabled)
        * nodebb-widget-essentials@6.0.0 (installed, enabled)
    
  • Active plugins:

        * @nodebb/nodebb-plugin-reactions@1.0.2 (installed, enabled)
        * @nodebb/nodebb-plugin-user-level@1.0.4 (installed, enabled)
        * nodebb-plugin-beep@0.4.7 (installed, enabled)
        * nodebb-plugin-browsing-users@2.0.4 (installed, enabled)
        * nodebb-plugin-cards@0.3.1 (installed, enabled)
        * nodebb-plugin-composer-default@9.1.0 (installed, enabled)
        * nodebb-plugin-dbsearch@5.1.5 (installed, enabled)
        * nodebb-plugin-emoji@4.0.4 (installed, enabled)
        * nodebb-plugin-emoji-apple@3.0.0 (installed, enabled)
        * nodebb-plugin-extended-markdown@1.6.0 (installed, enabled)
        * nodebb-plugin-global-chat@2.0.0 (installed, enabled)
        * nodebb-plugin-iframely@0.7.16 (installed, enabled)
        * nodebb-plugin-imgur@2.0.5 (installed, enabled)
        * nodebb-plugin-markdown@10.1.0 (installed, enabled)
        * nodebb-plugin-mentions@3.0.11 (installed, enabled)
        * nodebb-plugin-ns-embed@6.0.0 (installed, enabled)
        * nodebb-plugin-poll@2.0.6 (installed, enabled)
        * nodebb-plugin-question-and-answer@0.12.25 (installed, enabled)
        * nodebb-plugin-recent-cards@2.0.22 (installed, enabled)
        * nodebb-plugin-spam-be-gone@1.0.0 (installed, enabled)
        * nodebb-plugin-tenor-gif@2.2.0 (installed, enabled)
        * nodebb-plugin-twitter@0.1.0 (installed, enabled)
        * nodebb-plugin-ws-dice@2.4.2 (installed, enabled)
        * nodebb-rewards-essentials@0.2.1 (installed, enabled)
        * nodebb-theme-persona@12.1.1 (installed, enabled)
        * nodebb-widget-essentials@6.0.0 (installed, enabled)
    

    @DownPW This is going to be painful, but it’s possible that one of these plugins is the cause. Have you tried disabling each one to see if the issue subsides ?

  • The last plugins we installed is the dice plugin, Iframely, and twitter, to be tested…

    Because the others are quite well known and I never noticed this bug with them, but I could be wrong.

  • The last plugins we installed is the dice plugin, Iframely, and twitter, to be tested…

    Because the others are quite well known and I never noticed this bug with them, but I could be wrong.

    @DownPW Hmm. You could use a simple jQuery function to replace that icon with the right one. Just seems a bit “overkill” but might be necessary

  • @phenomlab said in [NODEBB] Help for my custom CSS:

    Hmm. You could use a simple jQuery function to replace that icon with the right one. Just seems a bit “overkill” but might be necessary

    why not, if you can write this query I’m not saying no, just to test

  • @phenomlab said in [NODEBB] Help for my custom CSS:

    Hmm. You could use a simple jQuery function to replace that icon with the right one. Just seems a bit “overkill” but might be necessary

    why not, if you can write this query I’m not saying no, just to test

    @DownPW might be a bit greedy, but try this

    $(document).ready(function() {
        $(window).on('action:ajaxify.end', function(data) {
            $(this).find($(".fa")).removeClass('fa-nbb-none').addClass('fa-commenting-o');
        });
    });
    
  • @phenomlab

    JS code seems not working but…

    I see on ACP, the image of category is uploaded to imgur :

    7ca2e670-4928-43d9-b1fd-530fae97c72a-image.png

    and I see this on dev console :

    b2321b44-7a73-4510-97b2-57fa73a096c9-image.png

    The url seems to not be encoded correctly, I don’t know why ???

    If I change manually the URL in the dev console, it’s OK:

    e7b51ef6-6b5f-48a7-9ed0-4d7e27d299fe-image.png

    d09b152a-a5fd-4243-b4d8-4d9287b07d47-image.png

  • @phenomlab

    JS code seems not working but…

    I see on ACP, the image of category is uploaded to imgur :

    7ca2e670-4928-43d9-b1fd-530fae97c72a-image.png

    and I see this on dev console :

    b2321b44-7a73-4510-97b2-57fa73a096c9-image.png

    The url seems to not be encoded correctly, I don’t know why ???

    If I change manually the URL in the dev console, it’s OK:

    e7b51ef6-6b5f-48a7-9ed0-4d7e27d299fe-image.png

    d09b152a-a5fd-4243-b4d8-4d9287b07d47-image.png

    @DownPW said in [NODEBB] Help for my custom CSS:

    The url seems to not be encoded correctly, I don’t know why ???

    Yes, that certainly seems the case. I think you need to take this issue up with the plugin developer.

  • @phenomlab

    the trick is to know which plugin is in question!!

  • @phenomlab

    the trick is to know which plugin is in question!!

    @DownPW sorry. I meant the imgur plugin author

  • @DownPW sorry. I meant the imgur plugin author

    @phenomlab

    hmmm I don’t thinks so because I have the same problem on NO PRODUCTION VM and I have this bug too without nodebb-imgur-plugin.

    I have test with a local url in public nodebb folder and it’s the same too

    I test to desactivate all plugin one by one for see at the moment

  • @phenomlab

    hmmm I don’t thinks so because I have the same problem on NO PRODUCTION VM and I have this bug too without nodebb-imgur-plugin.

    I have test with a local url in public nodebb folder and it’s the same too

    I test to desactivate all plugin one by one for see at the moment

    @DownPW let me know when your development server is available tomorrow and I’ll take a look at that code I provided previously

  • no problem I’m at home tomorrow all the day

    I’ll let you know if I find

  • @phenomlab

    I think it’s a nodebb issue, because with only one plugin and one theme activate :

    • nodebb-plugin-composer-default@9.1.0 (installed, enabled)
    • nodebb-theme-persona@12.1.1 (installed, enabled)

    Custom CSS, custom JS, custom Header and all custom widgets are disable…

    Result it’s the same, I have this bug.

    On your dev system, can you test to add a logo for a catégorie, delete the icon and test a new topic in this category ?

    I think you will have the same result.

    Let me know if you test too !

  • @phenomlab

    I think it’s a nodebb issue, because with only one plugin and one theme activate :

    • nodebb-plugin-composer-default@9.1.0 (installed, enabled)
    • nodebb-theme-persona@12.1.1 (installed, enabled)

    Custom CSS, custom JS, custom Header and all custom widgets are disable…

    Result it’s the same, I have this bug.

    On your dev system, can you test to add a logo for a catégorie, delete the icon and test a new topic in this category ?

    I think you will have the same result.

    Let me know if you test too !

    @DownPW did you delete the icon ? I’m wondering if this creates an orphaned reference to an icon which of course can’t be read.

  • yes off course I delete it
    because if Idon’t delete the icon, she appears on bubble 🙂

    Open issue here:

    https://github.com/NodeBB/NodeBB/issues/10896

    If I not delete icon, she’s appear but not the image :

    3b93ffe1-e68b-4f78-aa67-fba0f1351c24-image.png

  • The issue is closed @phenomlab

    It’s a nodebb bug. Fixed in 2.5.3 milestone 😉


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
  • 2 Votes
    1 Posts
    297 Views
    No one has replied
  • Please help me, I can't install nodebb

    Locked Solved Customisation nodebb
    7
    5 Votes
    7 Posts
    1k Views
    Installation completed, verified, and tested. Correct installation methodology is below https://docs.nodebb.org/installing/os/ubuntu/
  • 36 Votes
    55 Posts
    20k Views
    @DownPW I see why. The code relies on the existence of [component="topic/quickreply/container"] However, this by definition means that the below has to be enabled [image: 1679077966615-aeef638f-4188-489d-a9f2-f3a26dbca9d8-image.png] It will then work [image: 1679077992245-7fb38631-e0f3-46ef-b652-00929d927b13-image.png] For some unknown reason, this is hidden in Harmony, and only shows if you select it. In v2, it seems that the <section> is deleted altogether in Persona if “Quick Reply” is disabled, meaning it won’t fire as it can’t locate that specific component. The downside is that you might not want the quick reply function, but I think it’s a PITA to scroll up to the top of the post just to reply, so I have it on
  • The best css to customize our logo?

    Solved Customisation css
    2
    1 Votes
    2 Posts
    2k Views
    @Sala This should look better .sidenav .navbar-brand { padding-top: 0.5rem; padding-bottom: 0.5rem; } [image: 1669026666905-e5cec20e-be36-4ee8-9129-fd11ad4656ac-image.png] You can increase the top and bottom padding by increasing the values above.
  • Gettin Erors NodeBB

    Solved Configure nodebb eror
    7
    0 Votes
    7 Posts
    2k Views
    @phenomlab no forum is working goods. there is no eror message since yestarday.
  • NodeBB inline videoplayer

    Solved Customisation nodebb
    12
    3 Votes
    12 Posts
    3k Views
    @phenomlab YAY! It works Thanks so much
  • is "night mode" shifting the forum several pixels up?

    Solved Configure nodebb
    8
    4 Votes
    8 Posts
    2k Views
    @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.
  • NodeBB Design help

    Solved Customisation
    8
    3
    2 Votes
    8 Posts
    3k Views
    @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.