Changing the Layout of the Search widget

Anonymous

#49522

I am trying to modify the search functionality on a website but it is staying in that widget area, is there a way to migrate the search area onto a page and have it look like this?
http://imgur.com/FJ4yki4

Trevor

#49526

That somewhat depends on the theme you are using. You CAN put the search form in place using the standard Widget placement as any other WP Widget, but you can also edit pages/templates to place the widget as a shortcode.

Anonymous

#49571

Thank you I found this thread https://support.searchandfilter.com/forums/topic/sf-horizontal-the-final-solution/ which helped a lot but the problem I am coming across right now is getting the check boxes to line up in 3 columns in a row like in the photo above. here is the css I am using .

.searchandfilter[data-sf-form-id=”116014″] .chosen-container.chosen-container-multi {
width: 100% !important;
margin-top: -5px !important;
}

.searchandfilter[data-sf-form-id=”116014″] input.default {
border-color: rgba(0,0,0,0.3);
outline: 1;
outline: thin dotted \9;
box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(0,0,0,0.2);
-webkit-transition: border linear 0.2s,box-shadow linear 0.2s;
transition: border linear 0.2s,box-shadow linear 0.2s;
}

.searchandfilter[data-sf-form-id=”116014″] li.sf-field-category {
width: 30% !important;
}

.searchandfilter[data-sf-form-id=”116014″] select.sf-input-select {
width: 100%;
}
`

Trevor

#49604

It isn’t practical for me to try to create custom css for you without being able to play with the live site.

Anonymous

#49664

This reply has been marked as private.

Trevor

#49736

Ok

There are some things that need fixing first, but what you want is possible and I can help with that. You have used category taxonomy for many fields. This is not good. Instead you should either make custom taxonomies, using something like CPT UI, OR add custom fields, using something like ACF. Then you can have different taxonomy or meta field form elements.

Anonymous

#49836

Ok, I have installed the plugin CPT UI and created taxonomies for the pages all with the labels of

– Main Floor Square Footage
– Levels
– No. of Bedrooms
– Office/Den
– Width (Feet)
– Depth (Feet)
– Other Features

and reconstructed my search and filter form.
https://css-tricks.com/injecting-line-break/ I’m thinking that this might help but I can’t fingure out how to call out to the specific class that would need this line break, sorry I’m pretty new with css, still getting my head around it.

Trevor

#49837

No problem, as log as the info you sent me is still valid, I will take a look in the morning.

Trevor

#49901

Hi

Ca you take a screen shot of the form as it is and put it in something like Photoshop and cut and drag the bits to roughly where you want them and send me the image (put a link to it here)?

Anonymous

#49910

http://imgur.com/FJ4yki4 here is a link of what we are wanting it to look like at the top of the page.

[Author]

Posts