[NODEBB] Reply Button/arrow answer

[DownPW]

Hello @all @phenomlab

I want to add border-radius on the Reply Button when I reply to a topic.

I use this code for this:

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

And here the result :

So far so good.

The problem is that this has an influence on the arrow allowing to ask a question when opening a new topic in a category :

How resolve that ?
I would like to get the same result as this:

Thanks in advance

[DownPW]

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

But the Reply Button went back to how it was before :

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

[phenomlab]

@downpw Something like this should work

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

[DownPW]

@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

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

[phenomlab]

@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

And like this on a new post

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

[DownPW]

@phenomlab

Yes.

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

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

[phenomlab]

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

[DownPW]

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

Ok for Font tonight at 17h00

[phenomlab]

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

[DownPW]

Ok wait for fix and test after ^^

[phenomlab]

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

[DownPW]

Great

[DownPW]

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

[phenomlab]

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

[DownPW]

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;
}

[phenomlab]

@downpw why do you need to delete the border ?

[DownPW]

Because it is visible

[phenomlab]

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

[DownPW]

@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;
}

[phenomlab]

@downpw and does that not work ?