Skip to content
Sudonix

New message CSS problem

Unsolved Customisation

  • crazycellsundefined

    CSS code customization for the link preview plugin

    Solved Customisation
    4
    3 Votes
    4 Posts
    97 Views
    phenomlabundefined

    @crazycells said in CSS code customization for the link preview plugin:

    does OGProxy show the pdf previews as well?

    Not yet, but it could with a bit of additional code.

  • crazycellsundefined

    navigation menu panel on mobile

    Solved Customisation
    8
    7 Votes
    8 Posts
    159 Views
    phenomlabundefined

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

  • DownPWundefined

    hover link effect

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

  • DownPWundefined

    Quote design CSS

    Solved Customisation
    15
    4 Votes
    15 Posts
    678 Views
    phenomlabundefined

    @DownPW yes, that does make sense actually. I forgot to mention the layout of Sudonix is custom so that would have an impact on the positioning.

    Good spot 🙂

  • DownPWundefined

    [NodeBB] Welcome Message with an automatic footer logo change cycle

    Unsolved Customisation
    10
    2 Votes
    10 Posts
    857 Views
    phenomlabundefined

    @DownPW

    We just have to change the cycles automatically according to each period ?

    Yes, this is by far the safest

    I think it is possible to achieve the goal, I have already seen this kind of thing on a site without any perf problems.

    It’s certainly possible, but not without issues or impact to performance (in my view)

  • DownPWundefined

    [NodeBB] [JS SCRIPT/CSS] Theme Switcher

    Customisation
    8
    4 Votes
    8 Posts
    2k Views
    phenomlabundefined

    @DownPW done

  • DownPWundefined

    [NODEBB] Welcome Message

    Solved Customisation
    18
    13 Votes
    18 Posts
    2k Views
    phenomlabundefined

    For anyone reviewing this post, there’s an updated version here that also includes an sunrise / sun / moon icon depending on the time of day

    https://sudonix.com/topic/233/nodebb-welcome-message-with-logo-footer-change/3?_=1645445273209

  • Mike Jonesundefined

    CSS Help on my Flarum

    Solved Customisation
    5
    2 Votes
    5 Posts
    429 Views
    phenomlabundefined

    @mike-jones Yes, you’ll typically see this type of behaviour if there is another style that has higher priority in the sense that yours will be overridden. Using !important will override the higher preference, but should be used sparingly rather than everywhere.