Skip to content

[NODEBB] Reply Button/arrow answer

Solved Customisation
25 2 11.8k 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
  • "most votes" ranking option is not respecting the plugin

    Bugs nodebb
    5
    1
    3 Votes
    5 Posts
    2k Views
    phenomlab
    @crazycells Agreed. It takes a more sensible approach. Nobody ever upvotes the first post - it’s usually much further down as the conversation progresses.
  • Upgrade issues

    Solved Configure nodebb
    2
    1
    2 Votes
    2 Posts
    1k Views
    DownPW
    Use this code git fetch # Grab the latest code from the NodeBB repository git checkout v3.x git reset --hard origin/v3.x And you will have the latest version without specifying it https://docs.nodebb.org/configuring/upgrade/
  • NODEBB: Nginx error performance & High CPU

    Solved Performance performance nodebb nginx
    69
    4
    14 Votes
    69 Posts
    64k Views
    DownPW
    @phenomlab Seems to be better with some scaling fix for redis on redis.conf. I haven’t seen the message yet since the changes I made # I increase it to the value of /proc/sys/net/core/somaxconn tcp-backlog 4096 # I'm uncommenting because it can slow down Redis. Uncommented by default !!!!!!!!!!!!!!!!!!! #save 900 1 #save 300 10 #save 60 10000 If you have other Redis optimizations. I take all your advice https://severalnines.com/blog/performance-tuning-redis/
  • NodeBB v3

    Announcements nodebb v3 nodebb
    2
    3 Votes
    2 Posts
    1k Views
    phenomlab
    @cagatay JS will work fine - no changes there, and there are no plans to drop support for jQuery. More of an issue is the CSS - for which there are quite a few breaking changes. Keep an eye on sudonix.dev (my development site) where you can see progress in relation to how I am tackling the compatibility issues.
  • 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] Scroll Button

    Solved Customisation css javascript html scroll button
    7
    1
    0 Votes
    7 Posts
    3k Views
    phenomlab
    @downpw ooops. Forgot that. Thanks for adding.
  • CSS Help on my Flarum

    Solved Customisation
    5
    2
    2 Votes
    5 Posts
    3k Views
    phenomlab
    @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.