Skip to content
Sudonix

[NODEBB] Help for my custom CSS

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 💗

  • crazycellsundefined

    Custom badges

    Solved Customisation
    103
    49 Votes
    103 Posts
    9k Views
    DownPWundefined

    Perfect 😉

  • cagatayundefined

    who is read NodeBB

    Customisation
    6
    0 Votes
    6 Posts
    537 Views
    phenomlabundefined

    @cagatay You should ask in the NodeBB forums. Perhaps reference this post

    https://discuss.flarum.org/d/23066-who-read

  • DownPWundefined

    hover link effect

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

  • Pandaundefined

    NodeBB inline videoplayer

    Solved Customisation
    12
    3 Votes
    12 Posts
    715 Views
    Pandaundefined

    @phenomlab
    YAY! It works
    Thanks so much

  • JACundefined

    NodeBB Footer

    Solved Customisation
    10
    1 Votes
    10 Posts
    978 Views
    JACundefined

    @phenomlab said in NodeBB Footer:

    @jac and you. Hope all is well and you recover quickly

    Thanks pal 😁🤝🏻

  • DownPWundefined

    Multiple link on one ico non Navbar

    Solved Customisation
    7
    2 Votes
    7 Posts
    412 Views
    DownPWundefined

    yeah you’re right @phenomlab.
    Problem of NodeBB Version

  • RiekMediaundefined

    NodeBB Design help

    Solved Customisation
    8
    2 Votes
    8 Posts
    833 Views
    phenomlabundefined

    @riekmedia I’ve applied some new CSS to your site. Can you reload the page and try again ?

    For the record, this is what I added

    #footer { background: #2d343e; border-top: 4px solid #2d343e; font-size: 0.9em; margin-top: 70px; padding: 80px 0 0; position: relative; clear: both; bottom: 0; left: 0; right: 0; z-index: 1000; margin-left: -15px; margin-right: -338px; }

    The /categories page seems a bit messed up, so looking at that currently

    EDIT - issued some override CSS in the CATEGORIES widget

    <!--- CSS fix for overspill on /categories page - DO NOT DELETE --> <style> #footer { margin-right: -45px; } </style>

    That should resolve the /categories issue.

  • Mike Jonesundefined

    CSS Help on my Flarum

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