1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

XF 1.4 Button Spacing and Size

Discussion in 'Styling and Customization Questions' started by Amaury, Jul 17, 2015.

  1. Amaury

    Amaury Well-Known Member

    This is a result of removing the box shadow, so how can I add an equal amount of spacing among the three buttons here?

    Spacing 1.PNG

    How can I add an equal amount of spacing among the input box, plus button, and minus button? Also, how can I make the plus and minus buttons the same size? You'll notice the plus button is a bit bigger.

    Spacing 2.PNG

    Thanks!
     
  2. Dylan V

    Dylan V Well-Known Member

    For the first, add this to EXTRA.css and adjust the margin as you want:
    Code:
    #QuickSearch .moreOptions
    {
            margin: 0 32px 0 118px !important;
    }
    For the second, add this to EXTRA.css:
    Code:
    .xenForm .ctrlUnit > dd .textCtrl.number,
    .button.spinBoxButton
    {
            margin-right: 10px;
    }
     
    Last edited: Jul 17, 2015
    Amaury likes this.
  3. Amaury

    Amaury Well-Known Member

    Thanks!

    I made some adjustments accordingly and added another piece of CSS. Normally when it comes to this stuff, I try to inspect the elements before asking for help, but I tried this a long time ago and could not get it to work, so I figured it wouldn't work this time. Then again, I wasn't as experienced then with XenForo CSS. :p

    Code:
    /* Search Bar */
    
    .KHFlare #QuickSearch input.button.primary {
        width: 103px;
    }
    
    .KHFlare #QuickSearch .moreOptions {
        margin: 0 25px 0 105px;
    }
    
    /* Search Bar */
    Code:
    /* Form */
    
    .KHFlare .xenForm .ctrlUnit > dd .textCtrl.number, .button.spinBoxButton {
        margin-right: 3px;
    }
    
    /* Form */
    KHF Search.PNG

    Now, how about this part? :)

     
  4. Dylan V

    Dylan V Well-Known Member

    For that, you can try to add this to ajust the width and height of the plus button in EXTRA.css:
    Code:
    .button.up
    {
            width: 23px;
            height: 23px;
    }
     
    Amaury likes this.
  5. Amaury

    Amaury Well-Known Member

    I just needed 23px width. I think they look the same size now, don't you?

    KHF Width.PNG
     
  6. Dylan V

    Dylan V Well-Known Member

    You can also ajust the font size. :) I've the impression that the plus button is bigger. Try to add this:
    Code:
    .button.up
    {
            width: 23px;
            font-size: 8px;
    }
    You can ajust.
     
    Amaury likes this.
  7. Amaury

    Amaury Well-Known Member

    Thanks, though I don't mind the font size. I was really just referring to the button itself being bigger. :)
     
  8. Dylan V

    Dylan V Well-Known Member

    Yes, it's just the "+" which is bigger, but the two buttons are the same size.
     
    Amaury likes this.

Share This Page