Skip to content
Sudonix

navigation menu panel on mobile

Solved Customisation

Did this solution help you?
Did you find the suggested solution useful? Why not buy me a coffee? It's a nice gesture, and a great way to show your appreciation 💗

  • Norradundefined

    What plugins are being used here on Sudonix?

    Solved General
    4
    4 Votes
    4 Posts
    118 Views
    phenomlabundefined

    @Norrad Are you looking for anything in particular? I only ask because Sudonix uses a number of custom functions which I wrote, but all are available on GitHub and fully supported here.

  • dave1904undefined

    How to style tool tip of nodebb-plugin-user-level

    Solved Customisation
    4
    5 Votes
    4 Posts
    483 Views
    phenomlabundefined

    @DownPW thanks. I forgot about that.

  • Pandaundefined

    What is this bar called?

    Solved Customisation
    92
    36 Votes
    92 Posts
    7k Views
    DownPWundefined

    This is good 👍

  • DownPWundefined

    nodebb-user-level customisation : popover element

    Solved Customisation
    15
    6 Votes
    15 Posts
    706 Views
    DownPWundefined

    No no, I said that in the sense that he told me it was simple ^^
    I was able to see that this was not the case by targeting the elements he had advised me.

  • cagatayundefined

    Header Menu After Upgrading V3.1.1

    Solved Customisation
    2
    2 Votes
    2 Posts
    149 Views
    phenomlabundefined

    @cagatay this relates to a change the css classes used for the brand header meaning it will now float to the left instead of right.

    If you’d like to retain the original behavior, you can add this css class

    [data-widget-area="brand-header"] { justify-content: end; display: flex; }

    Further information here

    https://community.nodebb.org/topic/17090/manual-build-a-custom-header-in-harmony/19?_=1684069325296

  • DownPWundefined

    hover link effect

    Solved Customisation
    18
    6 Votes
    18 Posts
    608 Views
    phenomlabundefined

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

  • crazycellsundefined

    ineffecient use of space on mobile

    Solved Customisation
    10
    7 Votes
    10 Posts
    543 Views
    crazycellsundefined

    @phenomlab Thanks 🙏

  • JACundefined

    Customising NodeBB

    Locked Customisation
    3
    0 Votes
    3 Posts
    684 Views
    phenomlabundefined

    Closing this thread as a duplicate of https://sudonix.com/topic/12/nodebb-customisation