Skip to content

Avatar on Topic Header

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💗

  • Rotating Star Effect

    Solved Let's Build It
    17
    12 Votes
    17 Posts
    443 Views

    @phenomlab thanks a lot for these, both of the below are awesome! ♥

    https://codepen.io/bennettfeely/pen/vYLmYJz

    https://codepen.io/C-L-the-selector/pen/MWZbWBo

  • 2 Votes
    2 Posts
    146 Views

    @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

  • Fixing YouTube videos css

    Solved WordPress
    8
    2 Votes
    8 Posts
    238 Views

    @phenomlab It looks good, but not anymore. I’ve already lost so much time. Now it’s time to move on

  • hover link effect

    Solved Customisation
    18
    6 Votes
    18 Posts
    587 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.

  • 6 Votes
    10 Posts
    364 Views

    @phenomlab yes it caused a problem for mobile users.
    thank you for helping …

  • 3 Votes
    2 Posts
    548 Views

    @pwsincd welcome to sudonix, and thanks for the comments. What your looking for is here

    https://sudonix.com/topic/195/nodebb-welcome-message/3?_=1648295651358

  • 3 Votes
    12 Posts
    969 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.

  • Reading Meter Progress bar

    Locked Solved Customisation
    15
    9 Votes
    15 Posts
    799 Views

    For anyone else following this thread, please see
    https://sudonix.com/topic/467/issues-with-progress-bar-on-v3