Skip to content
Sudonix

New message CSS problem

Unsolved Customisation

Related Topics
  • phenomlabundefined

    Target the posts counter in categories using CSS and jQuery

    Let's Build It
    2
    3 Votes
    2 Posts
    117 Views
    DownPWundefined

    Very great šŸ˜‰

  • crazycellsundefined

    CSS code customization for the link preview plugin

    Solved Customisation
    4
    3 Votes
    4 Posts
    608 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

    CSS codes to prevent votes to disappear

    Solved Customisation
    3
    1 Votes
    3 Posts
    280 Views
    crazycellsundefined

    @phenomlab yes, it is šŸ™‚ thanks a lotā€¦

  • DownPWundefined

    hover link effect

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

  • pwsincdundefined

    [NodeBB] greeting message

    Solved Customisation
    2
    3 Votes
    2 Posts
    638 Views
    phenomlabundefined

    @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

  • DownPWundefined

    [NODEBB] Reply Button/arrow answer

    Solved Customisation
    25
    4 Votes
    25 Posts
    2k Views
    DownPWundefined

    Topic open
    https://sudonix.com/topic/207/nodebb-help-for-my-custom-css

  • DownPWundefined

    Bug Navbar CSS

    Solved Customisation
    3
    1 Votes
    3 Posts
    370 Views
    DownPWundefined

    Not better way.

    Thanks.

  • Mike Jonesundefined

    CSS Help on my Flarum

    Solved Customisation
    5
    2 Votes
    5 Posts
    570 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.