Skip to content

[NODEBB] Reply Button/arrow answer

Solved Customisation
25 2 11.6k 1
  • wrote on last edited by
    #10

    Ok wait for fix and test after ^^

  • Ok wait for fix and test after ^^

    wrote on last edited by
    #11

    @downpw Updated the original post, and applied CSS here so you can test.

  • wrote on last edited by
    #12

    Great 😉

  • wrote on last edited by
    #13

    It worked on my default theme. 🙂
    It seem to have border effect on my custom themes 😞

  • It worked on my default theme. 🙂
    It seem to have border effect on my custom themes 😞

    wrote on last edited by
    #14

    @downpw do you have anything in your custom CSS that is overriding this ?

  • wrote on last edited by DownPW
    #15

    Lot of variable. Hard to debug… a little lost
    I’ve been on it for 2 hours !!

    for default theme I must add this for delete border to Reply Putton on topic

    .btn-primary {
        color: #fff;
        background-color: #337ab7;
        border-color: transparent;
    }
    
  • Lot of variable. Hard to debug… a little lost
    I’ve been on it for 2 hours !!

    for default theme I must add this for delete border to Reply Putton on topic

    .btn-primary {
        color: #fff;
        background-color: #337ab7;
        border-color: transparent;
    }
    
    wrote on last edited by
    #16

    @downpw why do you need to delete the border ?

  • wrote on last edited by
    #17

    Because it is visible

    beaee397-4637-4609-b223-7a5b6b0d5034-image.png

  • Because it is visible

    beaee397-4637-4609-b223-7a5b6b0d5034-image.png

    wrote on last edited by
    #18

    @downpw I see. Another hack here is to set the border colour to be the same as the background colour.

  • wrote on last edited by DownPW
    #19

    @downpw said in [NODEBB] Reply Button/arrow answer:

    .btn-primary {
    color: #fff;
    background-color: #337ab7;
    border-color: transparent;
    }

    .btn-primary {
        color: #fff;
        background-color: #337ab7;
        border-color: #337ab7;
    }
    
  • @downpw said in [NODEBB] Reply Button/arrow answer:

    .btn-primary {
    color: #fff;
    background-color: #337ab7;
    border-color: transparent;
    }

    .btn-primary {
        color: #fff;
        background-color: #337ab7;
        border-color: #337ab7;
    }
    
    wrote on last edited by
    #20

    @downpw and does that not work ?

  • wrote on last edited by DownPW
    #21

    Yes that work too 🙂
    I must do work on bug on other custom CSS

  • Yes that work too 🙂
    I must do work on bug on other custom CSS

    wrote on last edited by
    #22

    @downpw good. Sometimes, you have to bend the rules sightly to get to the finish line 😁

  • wrote on last edited by DownPW
    #23

    yes 😉

    If I can’t find on the other themes.
    Could I give you access to the CSS files to help me on it?

  • yes 😉

    If I can’t find on the other themes.
    Could I give you access to the CSS files to help me on it?

    wrote on last edited by
    #24

    @downpw of course

  • DownPW DownPW referenced this topic on
  • DownPW DownPW has marked this topic as solved on
  • wrote on last edited by phenomlab
    #25

Did this solution help you?
Did you find the suggested solution useful? Support 💗 Sudonix with a coffee ☕
If your organisation needs deeper expertise around infrastructure, security, or technology leadership, learn more about Phenomlab Ltd. Many of the deeper technical guides behind Sudonix are published there.

Related Topics
  • Whitespace fixes in Nodebb

    Solved Customisation nodebb
    18
    2
    7 Votes
    18 Posts
    6k Views
    phenomlab
    @Panda Just circling back here with something of an update (which I think you’ll like). I’ve completely restructured the ranking system. There are now less ranks, with a higher point threshold to reach them. More importantly, if you reload the site, you’ll notice that the ranks are now icons. I also removed the “Author” badge, and made this a single icon, which (to me) looks much better.
  • who is read NodeBB

    Customisation read post nodebb
    6
    0 Votes
    6 Posts
    3k Views
    phenomlab
    @cagatay You should ask in the NodeBB forums. Perhaps reference this post https://discuss.flarum.org/d/23066-who-read
  • hover link effect

    Solved Customisation css link hover
    18
    1
    6 Votes
    18 Posts
    7k Views
    phenomlab
    @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.
  • Changing Background on NodeBB

    Solved Customisation background image nodebb
    4
    0 Votes
    4 Posts
    2k Views
    phenomlab
    @cagatay You’d target the body tag and use the below line of CSS background: url(/assets/customcss/backgrounds/default/default.png) no-repeat center center fixed; Obviously, you need to change the path to suit where your image is being stored. More info around the background property can be found here https://www.w3schools.com/cssref/css3_pr_background.php
  • NodeBB inline videoplayer

    Solved Customisation nodebb
    12
    3 Votes
    12 Posts
    5k Views
    Panda
    @phenomlab YAY! It works Thanks so much
  • [NODEBB] Welcome Message

    Solved Customisation css html nodebb
    20
    2
    13 Votes
    20 Posts
    9k Views
    phenomlab
    @DownPW the ‘js’ code for the banner takes the time from the client, so what it displays really depends on the regional settings for the operating system. I’ve not seen this issue myself but would like to see some examples of screenshots if possible.
  • Customising NodeBB

    Locked Customisation nodebb
    3
    0 Votes
    3 Posts
    3k Views
    phenomlab
    Closing this thread as a duplicate of https://sudonix.com/topic/12/nodebb-customisation
  • NodeBB customisation

    Locked Customisation
    332
    27 Votes
    332 Posts
    274k Views
    phenomlab
    @jac Given your departure away from your previous project, I’m going to close this thread…