Editing the Hikashop Filter

Hi There,

First thing, If you look at my site craftkeg.com/ and open up Search Products.

See the problem I'm having is with the filter as one coloum, it was abit longer then I'd like and would push the page down. So I tried putting it into 2 colums and it gives the effect you can see now, which is obviously not right!

Is it possible somehow to get it to look like..

Filter 1
Filter 2 | Filter 3
Filter 4

Any help would be appreciated.

Hi there,

Well, you can simply edit your filters and set the wished number of column taken by the filter (with the option "number of columns').
So in this case you will have:
Filter 1: 2 columns
Filter 2 & 3 : 1 columns
Filter 4: 2 columns

That's fantastic Eliot, your answer worked a treat!

I'd also like to maybe bring the Filter button up a little to save some space, is that kept in the css somewhere?

Really easy as well .
Just set a height of 50px for your price filter's option.

Excellent, it's looking really good now!

The other thing that would make it look really nice is having some padding between the check boxes and the text, I tried adding #filter_Brewers_hikashop_category_information_menu_128[] option{
padding:2px;
}

which you recommended before to add to the front end CSS, but that doesn't appear to have done the trick.

Try this, it should work everywhere on the site:

.hikashop_filter_module input[type=checkbox]{
  margin-right:5px,
}

That doesn't seem to have worked I'm afraid. It's definitely frontend_custom.css I should be looking at?

In this case you can try with the class .hikashop_filter_ABV and .hikashop_filter_Type (so you need two css rule).
something like this should work:

.hikashop_filter_ABV input{
margin-right:5px,
}

you can also try by adding !important between the ";"

That's worked perfectly now, cheers Eliot!

Would I be able to do something similar if I wanted to add some padding underneath the filter titles so they're not so close to the boxes?

Since I can't write your whole css i would suggest you to take a look at our documentation: www.hikashop.com/support/faq.html#styl

It's quite easy since you just have to take a look at the html code, spot the class you want to edit and add your css.
You will then be able to do these simple modifications by yourself (and adapt the code I gave you to your new filters )

Yes that's true, I really shouldn't be relying on you for stuff I can learn myself!

Something that is a little bit more tricky though. When you open the Search Products box everything looks fine until you do a search, then the Search box shrinks in size (on my browser it's about level with the 'Brewers' text.)

It's only a cosmetic thing, but do you have any idea why that is?

I don't really know what's causing this but forcing a height: 320px; on the id module_117 should fix it (even if it's not a perfect solution)

And is that in the options somewhere, or does that need to be done in the CSS as well?

So I've come up with

.hikashop_filter_form_module_117{
min-height:120px!important;
}
.hikashop_filter_title{
padding-bottom:5px!important;
}

the problem I've found though is if I do padding-right:5px or padding-left:5px it works, but it doesn't seem to recognise padding-bottom, is that not correct css?

Hi Nicolas, thanks for getting back to me.

I did a bit of research and tried that methodl myself, but when I tried

.hikashop_filter_title{
display:block;
}

it pushes the ": 50 - 150" part of the price filter onto the next line, which obviously doesn't look right.