Support Forums

The forums are closed and will be removed when we launch our new site.

Looking for support? You can access the support system via your account.

Forums › Forums › Search & Filter Pro › Changing the Layout of the Search widget

Tagged: 

Viewing 10 posts - 1 through 10 (of 16 total)
1 2
  • Brian Miyasaki
    (Private)  June 27, 2016 at 4:22 pm #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 Moderator
    (Private)  June 27, 2016 at 5:00 pm #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.

    Brian Miyasaki
    (Private)  June 27, 2016 at 11:00 pm #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 Moderator
    (Private)  June 28, 2016 at 11:44 am #49604

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

    Brian Miyasaki
    (Private)  June 28, 2016 at 3:34 pm #49664
    This reply has been marked as private.
    Trevor Moderator
    (Private)  June 29, 2016 at 10:34 am #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.

    Brian Miyasaki
    (Private)  June 29, 2016 at 8:38 pm #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 Moderator
    (Private)  June 29, 2016 at 9:10 pm #49837

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

    Trevor Moderator
    (Private)  June 30, 2016 at 2:23 pm #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)?

    Brian Miyasaki
    (Private)  June 30, 2016 at 3:37 pm #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
Viewing 10 posts - 1 through 10 (of 16 total)
1 2

The topic ‘Changing the Layout of the Search widget’ is closed to new replies.