• 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

Amaury

Well-known member
#1
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!
 

Dylan V

Well-known member
#2
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:

Amaury

Well-known member
#3
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? :)

Also, how can I make the plus and minus buttons the same size? You'll notice the plus button is a bit bigger.
 

Dylan V

Well-known member
#4
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;
}
 

Dylan V

Well-known member
#6
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.