XF 1.4 Button Spacing and Size

[Amaury]

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



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.



Thanks!

 

[Dylan V]

For the first, add this to EXTRA.css and adjust the margin as you want:

#QuickSearch .moreOptions
{
        margin: 0 32px 0 118px !important;
}

For the second, add this to EXTRA.css:

.xenForm .ctrlUnit > dd .textCtrl.number,
.button.spinBoxButton
{
        margin-right: 10px;
}

 

[Amaury]

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.

/* Search Bar */

.KHFlare #QuickSearch input.button.primary {
    width: 103px;
}

.KHFlare #QuickSearch .moreOptions {
    margin: 0 25px 0 105px;
}

/* Search Bar */

/* Form */

.KHFlare .xenForm .ctrlUnit > dd .textCtrl.number, .button.spinBoxButton {
    margin-right: 3px;
}

/* Form */

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]

For that, you can try to add this to ajust the width and height of the plus button in EXTRA.css:

.button.up
{
        width: 23px;
        height: 23px;
}

 

[Amaury]

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

 

[Dylan V]

You can also ajust the font size. I've the impression that the plus button is bigger. Try to add this:

.button.up
{
        width: 23px;
        font-size: 8px;
}

You can ajust.

 

[Amaury]

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

 

[Dylan V]

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

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