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?

    #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.
    Helpful? Donate. Thanks!
    Buy me a coffeePayPal QR Code
    Fast VPS Host for vBulletin:
    A2 Hosting & IONOS

    Comment


      #3
      That's Perfect!

      Lunch is on me!

      Comment


        #4
        Thanks as always!

        dog human eating GIF by Testing 1, 2, 3
        Helpful? Donate. Thanks!
        Buy me a coffeePayPal QR Code
        Fast VPS Host for vBulletin:
        A2 Hosting & IONOS

        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:	92
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.
            Helpful? Donate. Thanks!
            Buy me a coffeePayPal QR Code
            Fast VPS Host for vBulletin:
            A2 Hosting & IONOS

            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:	93
Size:	5.5 KB
ID:	14979

                  Comment


                    #10
                    Need to see the site in order to inspect and see what is causing the issue.
                    Helpful? Donate. Thanks!
                    Buy me a coffeePayPal QR Code
                    Fast VPS Host for vBulletin:
                    A2 Hosting & IONOS

                    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;
                        }
                        Helpful? Donate. Thanks!
                        Buy me a coffeePayPal QR Code
                        Fast VPS Host for vBulletin:
                        A2 Hosting & IONOS

                        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
                          Helpful? Donate. Thanks!
                          Buy me a coffeePayPal QR Code
                          Fast VPS Host for vBulletin:
                          A2 Hosting & IONOS

                          Comment


                            #15
                            Very nice!

                            Comment

                            Users Viewing This Page

                            Collapse

                            There is 1 user viewing this forum topic.

                            • Guest Guest

                            Latest Posts

                            Collapse

                            Working...
                            X
                            Searching...Please wait.
                            An unexpected error was returned: 'Your submission could not be processed because you have logged in since the previous page was loaded.

                            Please push the back button and reload the previous window.'
                            An unexpected error was returned: 'Your submission could not be processed because the token has expired.

                            Please push the back button and reload the previous window.'
                            An internal error has occurred and the module cannot be displayed.
                            There are no results that meet this criteria.
                            Search Result for "|||"