Announcement

Collapse
No announcement yet.

Ease the edges of buttons

Collapse
X
Collapse
First Prev Next Last
  • Filter
  • Time
  • Show
Clear All
new posts

    Ease the edges of buttons

    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?
    If by chance some day you're not feeling well and you should remember some silly thing I've said or done and it brings back a smile to your face or a chuckle to your heart, then my purpose as your clown has been fulfilled ~ Red Skelton

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

    If for all buttons:
    Code:
    .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.

    Comment


      #3
      That's Perfect!

      Lunch is on me!
      If by chance some day you're not feeling well and you should remember some silly thing I've said or done and it brings back a smile to your face or a chuckle to your heart, then my purpose as your clown has been fulfilled ~ Red Skelton

      Comment


        #4
        Thanks as always!

        dog human eating GIF by Testing 1, 2, 3

        Comment


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

          Click image for larger version

Name:	moveerror.JPG
Views:	2
Size:	11.6 KB
ID:	14962

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

          Comment


            #6
            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.

            Comment


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

              Code:
              #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;
              }

              Comment


                #8
                Originally posted by watershed View Post
                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.

                Click image for larger version  Name:	2018-12-04_1936.png Views:	1 Size:	7.1 KB ID:	14970

                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

                Comment


                  #9
                  Not me. Odd indeed.

                  Click image for larger version

Name:	Capture.PNG
Views:	1
Size:	5.5 KB
ID:	14979
                  If by chance some day you're not feeling well and you should remember some silly thing I've said or done and it brings back a smile to your face or a chuckle to your heart, then my purpose as your clown has been fulfilled ~ Red Skelton

                  Comment


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

                    Comment


                      #11
                      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.

                      Comment


                        #12
                        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.

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

                        Comment


                        • watershed
                          watershed commented
                          Editing a comment
                          That solved it for me!

                        #13
                        Originally posted by glennrocksvb View Post
                        The solution is to make the button wider.
                        adventure time coffee GIF by hoppip

                        Comment


                          #14
                          Thanks ssfnl !

                          work from home coffee GIF by Target

                          Comment


                            #15
                            Very nice!

                            Comment

                            Working...
                            X