Skip to content

[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 💗

Related Topics
  • How to style tool tip of nodebb-plugin-user-level

    Solved Customisation
    4
    5 Votes
    4 Posts
    702 Views

    @DownPW thanks. I forgot about that.

  • adding some console.log to Nodebb

    Solved Customisation
    4
    1 Votes
    4 Posts
    563 Views

    @eeeee if you’re using the console, you could try

    node app.js > app.log 2>&1

    This would redirect stdout to a file named app.log and redirect stderr to stdout.

    I’m not sure about standard logging under NodeBB, but there is an error log located at logs/error.log.

    Failing that, you could always stop the NodeBB service then use ./nodebb dev from the console which would then provide debug output.

  • 1 Votes
    5 Posts
    643 Views

    @DownPW very useful tip. Thanks

  • hover link effect

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

  • 9 Votes
    32 Posts
    3k Views

    @DownPW said in Bottom footer navbar button extend:

    Oh my god, it’s beautiful mark

    I liked this design so much, I’ve implemented it here. I intend to do a lot more with the footer in due course, so hiding it makes a lot of sense. Thanks @DownPW for the idea and initial concept ♥

  • NodeBB 1.19.3

    Solved Performance
    33
    4 Votes
    33 Posts
    3k Views

    @phenomlab

    I find the problem Mark 😉

    The error message indicated this path :

    http://localhost:4567/assets/plugins/nodebb-plugin-emoji/emoji/styles.css?v=6983dobg16u

    I change the path url on config.json

    47bacc80-f141-41e4-a261-3f8d650cc6f6-image.png

    And all it’s good 🙂

    Weird, I didn’t have to change that path before 1.19.3

    But this does not prevent the problem from a clean install with Emoji Plugin

    EDIT: After test, that resolv the problem installation for 1.18.x but not for 1.19.x (I have other error message when I run ./nodebb Setup

    For resume: NodeJS 16_x with 1.18.x is ok

  • CSS Help on my Flarum

    Solved Customisation
    5
    2 Votes
    5 Posts
    553 Views

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

  • [NodeBB] custom Gravatar image not showing

    Solved Customisation
    6
    1 Votes
    6 Posts
    1k Views

    @jac said in [NodeBB] custom Gravatar image not showing:

    @phenomlab said in [NodeBB] custom Gravatar image not showing:

    @jac are you using Custom ?

    Sure am mate 👍🏻

    Confirmed Fixed