Skip to content

[NODEBB] Help for my custom CSS

Solved Customisation
237 5 84.0k 3
  • @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

  • 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

    @DownPW I’d give the widget itself an id and then add custom css to that

    653aad37-edd8-4dee-a212-74a9249ea722-image.png

    div#onlineusers {
        left: 0;
        right: 0;
        margin: 0 auto;
        position: relative;
    }
    

    ffc39563-255e-488d-b325-f866ae7694c4-image.png

  • @phenomlab

    Yep, it’s a good idea thanks to you but I’d like to display it without div card-header and body like the first screen

  • @phenomlab

    Yep, it’s a good idea thanks to you but I’d like to display it without div card-header and body like the first screen

    @DownPW In that case, change the container code to

    9a2d4511-bf9b-42d0-8021-b6d47ec4ae1c-image.png

    <div id="onlineusers">{{body}}</div>
    

    And same CSS class

    div#onlineusers {
        justify-content: center;
        display: flex;
    }
    

    Then add padding and margin to suit

  • Perfect my friend 😉

  • Hello mark 🙂

    I wanted for test purposes, to put the welcome message in the Brand menu in the header widget.

    I commented in the footer widget the corresponding code then I added it in my brand header widget:

    <span id="thisuser" class="getUsername">, &nbsp;<a href="/me"><span class="username">DownPW</span></a></span>
    

    I commented out the old CSS to add the new:

    /* Welcome Message Username on Header */
    span#thisuser {
         margin-top: 0.7rem;
         margin-left: 2px;
         margin-right:-2px;
         font-size: .875rem;
         line-height: 1.4rem;
         font-weight: 500;
    }
    

    So far everything is fine, the result is correct :

    4c4eedf9-e511-4e3c-acb8-0049035729a6-image.png

    But as soon as I select links in the left sidebar (home, recent, etc …), the message is added and displayed as many times as I select a link .

    theme swatch menu.gif

    Did I miss something or do you have an idea to solve this bug?

    Thanks my friend 😉

  • Hello mark 🙂

    I wanted for test purposes, to put the welcome message in the Brand menu in the header widget.

    I commented in the footer widget the corresponding code then I added it in my brand header widget:

    <span id="thisuser" class="getUsername">, &nbsp;<a href="/me"><span class="username">DownPW</span></a></span>
    

    I commented out the old CSS to add the new:

    /* Welcome Message Username on Header */
    span#thisuser {
         margin-top: 0.7rem;
         margin-left: 2px;
         margin-right:-2px;
         font-size: .875rem;
         line-height: 1.4rem;
         font-weight: 500;
    }
    

    So far everything is fine, the result is correct :

    4c4eedf9-e511-4e3c-acb8-0049035729a6-image.png

    But as soon as I select links in the left sidebar (home, recent, etc …), the message is added and displayed as many times as I select a link .

    theme swatch menu.gif

    Did I miss something or do you have an idea to solve this bug?

    Thanks my friend 😉

    @DownPW sorry for the delay. That is being caused by ajax which is adding another element each time data is being called. I’d need to see the entire code block where you are adding this to confirm, but from the video you provided, that’s typically caused by the above.

    You only need that specific function to run once at page load - it’s running each time data is being requested which explains the additions.

  • it’s just the brand HTML header widget, just add this code to him

    <span id="thisuser" class="getUsername">,  <a href="/me"><span class="username">DownPW</span></a></span>]
    

    What do you want ? The HTML header widget on welcome message JS code ?

    EDIT : All code in PM

  • it’s just the brand HTML header widget, just add this code to him

    <span id="thisuser" class="getUsername">,  <a href="/me"><span class="username">DownPW</span></a></span>]
    

    What do you want ? The HTML header widget on welcome message JS code ?

    EDIT : All code in PM

    @DownPW thanks. Can you try a theory for me and change that code so it looks like the below

    <span id="thisuserbrand" class="getUsername">,  <a href="/me"><span class="username">DownPW</span></a></span>
    

    I expect this to return nothing, which will prove my theory around the Ajax calls.

  • Nope @phenomlab

    Same things, same problem

  • Nope @phenomlab

    Same things, same problem

    @DownPW then the problem isn’t the existing function. That ID I provided doesn’t exist anywhere and isn’t tied to any elements so should never trigger.


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
    462 Views
    I’m happy to see this
  • Spam spam spam

    Solved Configure nodebb
    6
    2 Votes
    6 Posts
    890 Views
    @Panda said in Spam spam spam: ok, yes Ive seen the queue, it shows IP, but doesnt have a field for comments from registrant. It’s not designed for that. It merely serves as a gateway between posts appearing on your form or not. @Panda said in Spam spam spam: It would be better if nodebb had this plugin included in ACP list, as not only then do you know its approved and should work, but many people cant or dont want to use CLI on the server That’s a question for the NodeBB devs but in all honesty you can’t not use the CLI when installing nodebb so to be this isn’t a big deal.
  • 3 Votes
    6 Posts
    2k Views
    @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.
  • Further Widgets question

    Solved Configure nodebb
    4
    1
    1 Votes
    4 Posts
    884 Views
    @Panda category is for a category in its own, so for example, “fruit” whereas categories is the page that contains all categories as a list.
  • Custom badges

    Solved Customisation nodebb
    103
    2
    49 Votes
    103 Posts
    27k Views
    Perfect
  • [NodeBB] Import custom Font

    Solved Customisation custom fonts nodebb css
    12
    3 Votes
    12 Posts
    3k 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] Stats

    Unsolved Customisation plugin stats script
    20
    1
    2 Votes
    20 Posts
    4k Views
    @phenomlab said in [NODEBB] Stats: @jac or I land up fixing it I wouldn’t put it past you
  • [NODEBB] CSS Style Sheets SelectBox

    Locked Solved Customisation css
    112
    24 Votes
    112 Posts
    34k 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