Skip to content

[NODEBB] Help for my custom CSS

Solved Customisation
258 5 160.5k 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
  • 2 Votes
    1 Posts
    571 Views
    No one has replied
  • 3 Votes
    6 Posts
    3k 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.
  • 3 Votes
    5 Posts
    2k Views
    @crazycells Agreed. It takes a more sensible approach. Nobody ever upvotes the first post - it’s usually much further down as the conversation progresses.
  • optional "snow falling" theme

    Solved Customisation nodebb
    6
    6 Votes
    6 Posts
    2k Views
    @Sala ok, but that’s still the same loop which is going to have an impact on the CPU.
  • hover link effect

    Solved Customisation css link hover
    18
    1
    6 Votes
    18 Posts
    6k 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.
  • fading in /tags page

    Solved Customisation nodebb
    32
    1
    30 Votes
    32 Posts
    13k Views
    Fix working perfectly
  • [NodeBB] Custom fields plugin

    Unsolved Customisation nodebb plugins javascript custom
    5
    0 Votes
    5 Posts
    2k Views
    @pwsincd hi. Just following up on this thread (I know it’s old) but was curious to understand if it’s still an issue or not ?
  • nodebb dropdown menu

    Solved Configure nodebb
    5
    1
    0 Votes
    5 Posts
    2k Views
    @phenomlab said in nodebb dropdown menu: @kurulumu-net You set it like the below example taken from this site [image: 1637939951821-aae36790-3257-4bb2-ad5a-0d744309876a-image.png] Which presents this [image: 1637939983445-77f47260-2941-4afe-9614-8e17dcfc8c19-image.png] Very interesting… I actually thought this wasn’t possible, as I remember it being asked in the NodeBB forum. Is this something new that’s been implemented? I’ll 100% be doing that when I’m on the laptop over the weekend.