Skip to content

[NODEBB] Help for my custom CSS

Solved Customisation
257 5 131.0k 3
  • 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 😉

  • The issue is closed @phenomlab

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

    @DownPW Yes, I saw that. Caused by regression from what I see.

    Thanks

  • @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:

    JS code seems not working but…

    Sorry, that should have been something like this (obviously modify the source and replacement)

    $(document).ready(function() {
        $(window).on('action:ajaxify.end', function(data) {
            $(".row").find($(".fa")).removeClass('fa-fw fa-comments-o').addClass('fa-check-to-slot');
        });
    });
    
  • hi @phenomlab

    on v2.x , I have user online widget in my home page and I can center the widget like this :

    4df43aa7-122e-4696-b8e0-72fa48280350-image.png

    c6409e47-96b9-473b-8fe0-28ec73b050fa-image.png

    because we have a div by default on the widget

    I can’t do the same on v3.x

    Any idea how to get the same result ?

    Thanks Dude


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
  • Please help me, I can't install nodebb

    Locked Solved Customisation nodebb
    7
    5 Votes
    7 Posts
    2k Views
    Installation completed, verified, and tested. Correct installation methodology is below https://docs.nodebb.org/installing/os/ubuntu/
  • Test of youtube embeds

    Solved Configure nodebb
    14
    11 Votes
    14 Posts
    3k Views
    @phenomlab Perfect!!! Many thanks.
  • Blinking text Effect

    Customisation nodebb text effect css
    3
    5 Votes
    3 Posts
    1k Views
    @phenomlab I love it too @phenomlab said in Blinking text Effect: Has that “broken neon light” look that you see in films. It’s exactly that, kind of old neon signs of bar or pubs a bit cyberpunk too
  • CSS codes for fa-info icon

    Solved Customisation nodebb
    9
    1
    6 Votes
    9 Posts
    2k Views
    I have just figured it out… it can be targeted with text-decoration-color: I was mistakenly using color
  • [NodeBB] Import custom Font

    Solved Customisation custom fonts nodebb css
    12
    3 Votes
    12 Posts
    4k Views
    @cagatay you’ll need to define this in the body tag (or another element if you want greater or more granular targets) - for example body { font-family: "Poppins"; font-size: 16px; } Essentially, you use the font-size CSS directive.
  • [NODEBB] CSS Style Sheets SelectBox

    Locked Solved Customisation css
    112
    24 Votes
    112 Posts
    50k Views
    @DownPW as discussed in PM Seems to have been solved with the new JS code that you added allowing the version CSS file change!! Cache problem therefore with the JS of the Switcher theme Based on this, I will close this thread and reference https://sudonix.com/topic/207/nodebb-help-for-my-custom-css/27
  • 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.
  • Customising NodeBB

    Locked Customisation nodebb
    3
    0 Votes
    3 Posts
    2k Views
    Closing this thread as a duplicate of https://sudonix.com/topic/12/nodebb-customisation