Skip to content

[NODEBB] Help for my custom CSS

Solved Customisation
257 5 142.4k 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)
    

    @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

  • 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


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
  • SEO and Nodebb

    Performance nodebb seo
    2
    2 Votes
    2 Posts
    1k Views
    @Panda It’s the best it’s ever been to be honest. I’ve used a myriad of systems in the past - most notably, WordPress, and then Flarum (which for SEO, was absolutely dire - they never even had SEO out of the box, and relied on a third party extension to do it), and NodeBB easily fares the best - see below example https://www.google.com/search?q=site%3Asudonix.org&oq=site%3Asudonix.org&aqs=chrome..69i57j69i60j69i58j69i60l2.9039j0j3&sourceid=chrome&ie=UTF-8#ip=1 However, this was not without significant effort on my part once I’d migrated from COM to ORG - see below posts https://community.nodebb.org/topic/17286/google-crawl-error-after-site-migration/17?_=1688461250365 And also https://support.google.com/webmasters/thread/221027803?hl=en&msgid=221464164 It was painful to say the least - as it turns out, there was an issue in NodeBB core that prevented spiders from getting to content, which as far as I understand, is now fixed. SEO in itself is a dark art - a black box that nobody really fully understands, and it’s essentially going to boil down to one thing - “content”. Google’s algorithm for indexing has also changed dramatically over the years. They only now crawl content that has value, so if it believes that your site has nothing to offer, it will simply skip it.
  • Sidebar Widget is no longer on the side!

    Moved Solved General nodebb
    4
    2
    2 Votes
    4 Posts
    1k Views
    @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.
  • 1 Votes
    1 Posts
    1k Views
    No one has replied
  • NodeBB 3.0 alpha1 : Error on install

    Solved Configure nodebb version 3 install error
    19
    2 Votes
    19 Posts
    5k Views
    @phenomlab Work now
  • hover link effect

    Solved Customisation css link hover
    18
    1
    6 Votes
    18 Posts
    5k Views
    @DownPW Looking at the underlying code, class start is being added on hover by jQuery in this function document.querySelectorAll(".button-gradient, .button-transparent").forEach((button) => { const style = getComputedStyle(button); const lines = document.createElement("div"); lines.classList.add("lines"); const groupTop = document.createElement("div"); const groupBottom = document.createElement("div"); const svg = createSVG( button.offsetWidth, button.offsetHeight, parseInt(style.borderRadius, 10) ); groupTop.appendChild(svg); groupTop.appendChild(svg.cloneNode(true)); groupTop.appendChild(svg.cloneNode(true)); groupTop.appendChild(svg.cloneNode(true)); groupBottom.appendChild(svg.cloneNode(true)); groupBottom.appendChild(svg.cloneNode(true)); groupBottom.appendChild(svg.cloneNode(true)); groupBottom.appendChild(svg.cloneNode(true)); lines.appendChild(groupTop); lines.appendChild(groupBottom); button.appendChild(lines); button.addEventListener("pointerenter", () => { button.classList.add("start"); }); svg.addEventListener("animationend", () => { button.classList.remove("start"); }); }); }) The CSS for start is below .button-gradient.start .lines svg, .button-transparent.start .lines svg { animation: stroke 0.3s linear; } And this is the corresponding keyframe @keyframes stroke { 30%, 55% { opacity: 1; } 100% { stroke-dashoffset: 5; opacity: 0; } } It’s using both CSS and SVG, so might not be a simple affair to replicate without the SVG files.
  • How to fix header side as boxed

    Solved Customisation header boxed sudonix nodebb
    10
    1
    6 Votes
    10 Posts
    3k Views
    @phenomlab yes it caused a problem for mobile users. thank you for helping …
  • [NODEBB] CSS Style Sheets SelectBox

    Locked Solved Customisation css
    112
    24 Votes
    112 Posts
    55k 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] First post customization

    Solved Customisation nodebb
    5
    4 Votes
    5 Posts
    2k Views
    @phenomlab thanks