XF 1.4 Button Spacing and Size

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.webp

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.webp

Thanks!
 
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:
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.webp

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.
 
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.
 
Top Bottom