Ease the edges of buttons

[NumNum]

What would be the css code to either ease the edges of, or make capsule shape the "+ New Topic", "Post Reply", "+Subscribe", and "Unsubscribe" buttons?

[glennrocksvb]

You want it for all buttons across the site or only those buttons?

If for all buttons:

.b-button {
    border-radius: 10px;
}

Adjust the radius to desired value.

If not for all buttons, I will post the code when I get to my desktop. I'm on my phone now.

[NumNum]

That's Perfect!

Lunch is on me!

[glennrocksvb]

Thanks as always!

[watershed]

Hey glennrocksvb after using this (great!) css code, I have a single issue with the 'Move' icon for messages in the message center:



Would appreciate it if you could help make this button round as the others as well

[glennrocksvb]

I tried the code here and in vbulletin.com and it works with the Move button. I'd have to see it on your site to check why it isn't working for you.

[watershed]

Thanks, I checked the default style and this issue indeed does not recur, so i'm guessing this has to do with something else in my css_additional.css file.

Would it help if I post/PM you the entire file? Here are the button related lines I have in that file:

#topic-tab .conversation-toolbar .toolset-left .b-button,
#btnPostReply-top {
    background: linear-gradient(0deg,#00ba5d,#abeecd);
    border-color: #009900;
}
button.notificationBtnDelete.b-button.b-button--secondary.js-notification-dismiss {
    margin-left: 20px;
}

.b-button {
    border-radius: 10px;
}

[ssfnl]

I have a single issue with the 'Move' icon for messages in the message center

Interesting, I have the exact same issue with the exact same button.



The issue seems to be related to the dropdown arrow that is within the button.

There is no additional css related to any of the styling elements used here. I only used the style variable editor. The issue occurs in both our light and dark theme. I can't test any standard themes since the links are broken (our own stupid mistake).

EDIT: Inspecting this element on this great site, it shows: div.td | 21 x 17
On my site it shows: div.td | 21 x 52

[NumNum]

Not me. Odd indeed.

[glennrocksvb]

Need to see the site in order to inspect and see what is causing the issue.

[ssfnl]

glennrocksvb Just created a test account for you to get access to our forum. I created it in Firefox and the issue did NOT occur. Tried my own account and still did NOT occur. In Chrome however, it occurs with both accounts. It seems to be browser related. (IE is fine too.)

I'll PM you with the credentials of my test account.

[glennrocksvb]

ssfnl I checked your site and the issue occurs because the button label is too long it doesn't fit the button width. The solution is to make the button wider.

.split-button .split-button-wrapper .button-set .button-text {
    min-width: 93px;
}

[ssfnl]

The solution is to make the button wider.

[glennrocksvb]

Thanks ssfnl !

[Meta]

Very nice!