Search & Filter background container

Anonymous

#87853

Hello all,

I need solution for form background container. Please, can you help me with that.

Thanks in advance

Anonymous

#87854

This reply has been marked as private.

Anonymous

#87864

This reply has been marked as private.

Trevor

#87886

Hi

What do you want to do with the background container (and why is crews higher on the page)?

Anonymous

#87894

This reply has been marked as private.

Trevor

#87933

You need to add some custom css to your theme. To fix that Crew being in the wrong place, this:

.searchandfilter > ul > li {float: left;}
.searchandfilter > ul > li.sf-field-taxonomy-yacht-feature {margin-top: 35px;}
.searchandfilter > ul > li.sf-field-sort_order {margin-top: 33px;}

To add a border around plus background for the form, this is a bit more difficult. So, I think that, in your page in WordPress, it looks like this:

<div class="search-filter-form-container">[form shortcode]</div>

But it needs to look like this:

<div class="search-filter-form-container">[form shortcode]<div class="clearfix"></div></div>

Then, I can see in the custom css you already have this:

#top form {
    margin-bottom: 20px;
}

But this needs to be:

.search-filter-form-container {
    margin-bottom: 20px;
/* add your css for the border, drop shadow, background color here */
}

Anonymous

#88768

Thank you very much. But,css snippet

.searchandfilter > ul > li {float: left;}
.searchandfilter > ul > li.sf-field-taxonomy-yacht-feature {margin-top: 35px;}
.searchandfilter > ul > li.sf-field-sort_order {margin-top: 33px;}

not working. Form looks good but doesnt work

Trevor

#88905

What does not work? I just tried changing the week and it seems to work? Or do you mean to move the crew field down?

Anonymous

#89030

Yes, when I moved crew field down all fields were frosen, no ability to pick anything,

Trevor

#89089

OK. More custom CSS:

input[name="_sfm_wpcf-max-number-of-guests[]"] {
  display: inline-block;
}

How does that now look?

This that you have in your CSS:

#top form {
    margin-bottom: 20px;
}

Is making the box taller.

[Author]

Posts