Skip to content

Mongo Eror with v3 beta-1

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💗

  • 3 Votes
    12 Posts
    51 Views

    @crazycells ah, I see. That makes sense.

  • 7 Votes
    8 Posts
    76 Views

    @crazycells hmm. That’s odd. I haven’t made any changes from recollection but I could be wrong. I’ll need to check.

    EDIT - very strange. I honestly don’t recall adding the below CSS block to alter the bottom bar, but you’re right…

    .bottombar-nav { padding: 0px !important; }

    I’ve removed this so it reflects stock Harmony.

  • 5 Votes
    4 Posts
    469 Views

    @DownPW thanks. I forgot about that.

  • 5 Votes
    12 Posts
    297 Views

    @phenomlab hi Mark, no worries. I will definitely write my experience here… 🙂

    Unfortunately, I could not find time to try it yet.

  • 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

  • Custom badges

    Solved Customisation
    103
    49 Votes
    103 Posts
    9k Views

    Perfect 😉

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

  • CSS codes for fa-info icon

    Solved Customisation
    9
    6 Votes
    9 Posts
    346 Views

    I have just figured it out…

    it can be targeted with text-decoration-color:

    I was mistakenly using color