Skip to content

[NODEBB] Help for my custom CSS

Solved Customisation
258 5 168.0k 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

    wrote on last edited by

    @DownPW I can’t see the images or videos, but I’ll have a look on your production site.

  • 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

    wrote on last edited by phenomlab

    @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 ?

  • wrote on last edited by

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

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

    wrote on last edited by

    @DownPW What plugins do you have installed ?

  • wrote on last edited by DownPW

    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)
    
    wrote on last edited by

    @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 ?

  • wrote on last edited by DownPW

    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.

    wrote on last edited by

    @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

  • wrote on last edited by DownPW

    @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

    wrote on last edited by

    @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');
        });
    });
    
  • wrote on last edited by DownPW

    @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

    wrote on last edited by

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

  • wrote on last edited by DownPW

    @phenomlab

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

  • @phenomlab

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

    wrote on last edited by

    @DownPW sorry. I meant the imgur plugin author

  • @DownPW sorry. I meant the imgur plugin author

    wrote on last edited by DownPW

    @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

    wrote on last edited by

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

  • wrote on last edited by

    no problem I’m at home tomorrow all the day

    I’ll let you know if I find

  • wrote on last edited by DownPW

    @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 !

    wrote on last edited by

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

  • wrote on last edited by DownPW

    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


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
  • Custom Page - nodebb

    Solved Customisation custom-pages nodebb
    13
    2
    5 Votes
    13 Posts
    3k Views
    DownPW
    I’m happy to see this
  • Sidebar Widget is no longer on the side!

    Moved Solved General nodebb
    4
    2
    2 Votes
    4 Posts
    1k Views
    phenomlab
    @Panda said in Sidebar Widget is no longer on the side!: Ah, so sidebar wont work on mobile? Correct. If you review the docs on bootstrap, you’ll notice that it is designed on a grid system https://getbootstrap.com/docs/5.0/layout/grid/ What I mean by changing the category is moving it on here to general as you posted it in bugs, when it isn’t.
  • Smart Widgets

    Solved Configure nodebb
    9
    3 Votes
    9 Posts
    3k Views
    phenomlab
    @Panda said in Smart Widgets: So why is that, or conversely why would the function to expose username ever be required, as it seems app.user is already an available global object? It is, yes, but not if you are using it outside of a widget. The function I wrote is also historical and comes from the 2.x train
  • Adding fileWrite to nodebb code

    Solved Configure nodebb
    16
    1
    5 Votes
    16 Posts
    5k Views
    phenomlab
    @eveh this might be a question for the NodeBB Devs themselves. In all honesty, I’m not entirely sure without having to research this myself.
  • [NodeBB] First post customization

    Solved Customisation nodebb
    5
    4 Votes
    5 Posts
    3k Views
    crazycells
    @phenomlab thanks
  • NodeBB vs Discourse

    Chitchat nodebb discourse board
    25
    6 Votes
    25 Posts
    14k Views
    RiekMedia
    @phenomlab said in NodeBB vs Discourse: Hetzner eh ? I use them also. In fact, Sudonix is hosted in Nuremberg yes i’m also at hetzner, i have been a customer there for years with a reseller account for domains. My VPS that I host there are also in Nuremberg
  • nodebb-plugin-customize error

    Solved Customisation
    25
    2 Votes
    25 Posts
    17k Views
    RiekMedia
    @phenomlab it work, thanks
  • [NodeBB] Creating new user to auto post content

    Solved Customisation
    3
    0 Votes
    3 Posts
    2k Views
    JAC
    @phenomlab many thanks Mark .