Skip to content

[NODEBB] Reply Button/arrow answer

Solved Customisation
25 2 11.6k 1
  • @downpw said in [NODEBB] Reply Button/arrow answer:

    .composer .title-container .composer-submit {
    border-radius: 0px 5px 5px 0px !important;
    }

    Hmmm. If I delete !important on code

    .composer .title-container .composer-submit {
       border-radius: 0px 5px 5px 0px ;
    }
    

    It seems to be good for the arrow :
    6b07cbf8-aaf5-411c-9538-67d0fd4d3fb0-image.png

    But the Reply Button went back to how it was before 😞 :
    05296857-48bc-41ea-9200-28d19cf54013-image.png

    the 2 buttons are linked to the same CSS variables but I can’t tell them apart

    wrote on last edited by
    #3

    @downpw Something like this should work

    button.btn.btn-primary.composer-submit {
        border-top-right-radius: 4px !important;
        border-bottom-right-radius: 4px !important;
    }
    
  • phenomlab phenomlab has marked this topic as solved on
  • DownPW DownPW has marked this topic as unsolved on
  • wrote on last edited by DownPW
    #4

    @phenomlab

    I’m so sorry, It seem we have the same problem 😞

    Just this :

    button.btn.btn-primary.composer-submit {
        border-top-right-radius: 4px !important;
        border-bottom-right-radius: 4px !important;
    }
    

    Its’ ok for Submit Button when I reply to on existant topic
    54629c01-c5eb-4d11-b4de-dc43462b701d-image.png

    But it’s not Ok when I create a New Topic (When you have the arrow button at the right of the Submit Button) :

    0393d71b-f011-43c1-9086-346605eedfb0-image.png

    13a482d1-2587-498a-b1a5-736cdf73659d-image.png

  • @phenomlab

    I’m so sorry, It seem we have the same problem 😞

    Just this :

    button.btn.btn-primary.composer-submit {
        border-top-right-radius: 4px !important;
        border-bottom-right-radius: 4px !important;
    }
    

    Its’ ok for Submit Button when I reply to on existant topic
    54629c01-c5eb-4d11-b4de-dc43462b701d-image.png

    But it’s not Ok when I create a New Topic (When you have the arrow button at the right of the Submit Button) :

    0393d71b-f011-43c1-9086-346605eedfb0-image.png

    13a482d1-2587-498a-b1a5-736cdf73659d-image.png

    wrote on last edited by phenomlab
    #5

    @downpw Yes, I see what you mean. I’d “cheat” a little here and use some positioning to create a faux effect. This should do it

    .btn-group>.btn:last-child:not(:first-child), .btn-group>.dropdown-toggle:not(:first-child) {
      margin-left: -3px;
    }
    .btn-group>.btn:not(:first-child):not(:last-child):not(.dropdown-toggle):hover {
      border-top-right-radius: 0px;
      border-bottom-right-radius: 0px;
    }
    button.btn.btn-primary.composer-submit:hover {
        border-top-right-radius: 4px !important;
        border-bottom-right-radius: 4px !important;
    }
    .btn .caret {
      margin-left: 2px;
    }
    .btn-group>.btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
      border-radius: 0px;
      border-top-right-radius: 4px;
      border-bottom-right-radius: 4px;
      margin-left: 0px;
    }
    

    It’ll look like this on a reply post

    ea6a7331-a2a9-42c7-93d4-60443f4296fb-image.png

    And like this on a new post

    b0f44193-63db-4c3d-8c98-a85c7344d849-image.png

    I’ve set the CSS here on Sudonix so you can see it in action. Give it a try.

  • wrote on last edited by DownPW
    #6

    @phenomlab

    Yes.

    Just your mouse over on Submit button when you reply to a topic to fix :

    818eb504-86e7-4ebf-bc0b-8466637811ff-image.png

    Result is great, I will test tonight.
    I’m at work at the moment.

  • @phenomlab

    Yes.

    Just your mouse over on Submit button when you reply to a topic to fix :

    818eb504-86e7-4ebf-bc0b-8466637811ff-image.png

    Result is great, I will test tonight.
    I’m at work at the moment.

    wrote on last edited by
    #7

    @downpw Great. Let me know when back, as I’ll need access to your VM for the fonts issue we need to work on

  • wrote on last edited by DownPW
    #8

    I edit my post just one Fix for reply button on mouse over

    Ok for Font tonight at 17h00 😉

  • I edit my post just one Fix for reply button on mouse over

    Ok for Font tonight at 17h00 😉

    wrote on last edited by
    #9

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

    I’m edit my post just one Fix for reply button on mouse over

    😕 thanks - completely missed that. I’ll amend the original post.

  • 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 😁


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
  • Difficult to move posts now, on mobile.

    Bugs nodebb
    16
    1
    5 Votes
    16 Posts
    5k Views
    phenomlab
    @DownPW Yes, it is. It’s set far too low meaning other elements with a higher preference will sit over the top of it.
  • Email validation NodeBB

    Bugs nodebb
    21
    3 Votes
    21 Posts
    10k Views
    phenomlab
    @Panda said in Email validation NodeBB: Did you configure that as a custom change to the usual quote icon. How do you do that? I notice on NodeBB site its a solid blue quotes Yes, I changed it. NodeBB by default users the free font awesome library whereas I use the pro (paid) version SDK have access to a wider set of icons, and at different thicknesses etc. The change of colour is just simple CSS.
  • 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
  • Post Style View

    Solved Customisation post style sudonix nodebb
    67
    2
    18 Votes
    67 Posts
    35k Views
    DownPW
    @cagatay Just add margin-left on the element like @phenomlab said to you : topic [component="post/parent"] { margin-left: 10px; } [image: aa08c62b-4223-4cba-8c0f-c73d50474c0d-image.png] Maybe @phenomlab have a better way
  • Avatar on Topic Header

    Solved Customisation css avatar header
    9
    1
    0 Votes
    9 Posts
    3k Views
    JAC
    @jac said in Avatar on Topic Header: @downpw said in Avatar on Topic Header: Great Plugin I make it a bit cleaner via this CSS code: /*------------------------------------------------------------------*/ /*---------------- nodebb-plugin-browsing-users -----------------*/ /*------------------------------------------------------------------*/ /*Space between the avatar and the RSS icon */ .topic [component="topic/browsing-users"] { margin-bottom: -5px; padding-left: 10px; } /*Space between avatars*/ .pull-left { float: left!important; padding-right: 5px; } Do you have a screenshot of how this looks with the CSS change? Just added this change, thanks @DownPW
  • nodebb dropdown menu

    Solved Configure nodebb
    5
    1
    0 Votes
    5 Posts
    3k Views
    JAC
    @phenomlab said in nodebb dropdown menu: @kurulumu-net You set it like the below example taken from this site [image: aae36790-3257-4bb2-ad5a-0d744309876a-image.png] Which presents this [image: 77f47260-2941-4afe-9614-8e17dcfc8c19-image.png] Very interesting… I actually thought this wasn’t possible, as I remember it being asked in the NodeBB forum. Is this something new that’s been implemented? I’ll 100% be doing that when I’m on the laptop over the weekend.
  • NodeBB Discord Plugins

    Unsolved Customisation nodebb discord plugin
    7
    0 Votes
    7 Posts
    4k Views
    phenomlab
    @RiekMedia hi. Just following up on this thread (I know it’s old) but was curious to understand if it’s still an issue or not ?
  • 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…