How to custom the available fields's positions?

Trevor

#103061

Hi Benoit

The sample page no longer has the form on it for me to play with?

Anonymous

#103086

Hi Trevor,

Fields are back.
😉

Trevor

#103088

All sorted then?

Anonymous

#103097

Yes,
I think I will include later sliders buttons to choose min and max price.
I suppose it will be a javascript or something like that but I have to find the script before.
To begin, this search box will be ok I suppose.

About the tags, I will create them my self.
Perhaps there will be some few more in the result box but don’t worry.
In fact, if you just show me the way, I think I will find how to change the CSS after!
🙂

Trevor

#103109

For example, to place the three fields side by side (and the check boxes), this Custom CSS:

.sf-field-search, .sf-field-category, .sf-field-taxonomy-ville, .sf-field-tag ul li {display: inline-block !important;}

But the container must be wide enough for them. You also need to remove the title from the ville taxonomy.

Anonymous

#104131

This reply has been marked as private.

Trevor

#104162

I am not sure that I understand what you mean by the line height. Now that you have some working pages, take a screen shot and annotate it for me?

Anonymous

#104190

This reply has been marked as private.

Trevor

#104211

OK, so that you can find any other issues, maybe, this is the problem.

In our plugin CSS file (it is minified, but we give you a normal version so you can look in it more easily, is this CSS:

.searchandfilter h4 {
  margin: 0;
  padding: 5px 0 10px;
  font-size: 16px;
}

This works on the one page because you theme does not override this. However, on the wrong page, your theme has this:

.entry-content h4, .comment-content h4 {
  font-size: 14px;
  font-size: 1rem;
  line-height: 1.846153846;
}

As entry-content contains (is more important than) searchandfilter, it overrides our CSS. This CSS fixes it:

.entry-content .searchandfilter h4 {
  margin: 0;
  padding: 5px 0 10px;
  font-size: 16px;
}

Do you see how this has worked?

In English, this is called ‘adding specificity’ to the CSS rules. You might wish to Google this for a better explanation.

Anonymous

#106096

This reply has been marked as private.

[Author]

Posts