Forums Forums Search Search Results for '.searchandfilter custom css'

Viewing 10 results - 271 through 280 (of 286 total)
  • Author
    Search Results
  • #34160

    Ross
    Keymaster

    Hey Edward

    Ok, this is more a developer feature for now until I add something via the UI to make this easier.

    Essentially, what you want to do is the following:

    1) Create your loader and add it to your page / site.

    So as a really basic example (by no means comprehensive or complete) – edit your themes “footer.php”.

    Before the closing </body> tag add the following html code:

    <div class="sf-loader" style="display:none">
    Loading...
    </div>

    This will add an element to your page to use as a loader. This will need to be customised via CSS, such as centering it on the page etc but for now thats not important.

    2) Add the loader code.

    In your themes main JavaScript file, scroll the to very end, and after everything else add:

    jQuery(document).ready(function($) {
    	$(document).on("sf:ajaxfinish", ".searchandfilter", function(){
    		$('.sf-loader').hide();
    	});
    
    	$(document).on("sf:ajaxstart", ".searchandfilter", function(){
    		$('.sf-loader').show();
    	});
    });

    now you will see an element on your site being shown/hidden when being loaded. As mentioned you will need to style it up.

    Hope that helps!

    Thanks

    #33314

    In reply to: Customize Results Page


    Ross
    Keymaster

    Hey Maxime

    S&F doesn’t work directly with Visual Composer layouts, but in order to customise these results, you must follow the instructions here if using the shortcode display method:

    http://www.designsandcode.com/documentation/search-filter-pro/search-results/using-a-shortcode/#Customising_the_Results

    I am currently implementing some features which *should* make integration with layout plugins possible, but these won’t be ready for a week or so – and of course not guaranteed to work with all – just a new option.

    Anyway just getting back to the grid layout stuff – there are a good few resources out there on how to make grid based layouts in WP – which is basically the same in S&F as we just use WordPress loops/queries, a couple I linked here:

    https://support.searchandfilter.com/forums/topic/search-results-as-grid/#post-24882

    And as an FYI, S&F works with WooCommerce, which has a grid based layout for the shop – so might be a potential avenue to look into (even if its just stripping out the html/css for your needs).

    Thanks

    #32922

    Ross
    Keymaster

    Hi Idan

    Ok so to answer your questions:

    2) yes the code has been designed to work with labels – so styling labels based on checked state is built in. If you want to style the li element that the checkbox is contained in then you will need to write some custom javascript to add / remove classes based on whether the checkbox is ticked.

    Something like (untested, and will need some adaptation, this is just for the general idea):

    jQuery(document).on("change", ".searchandfilter .yourfieldclass li input[type='checkbox']", function()
    {
        if(jQuery(this).prop("checked")==true)
        {//then update the background colour
            jQuery(this).parent().css("background-color", "#f00");
        }
    
    });

    In the code above you will need to update .yourfieldclass with the name of the class on the field element.

    It will likely need some work to do what you want but I think its a decent indication of the direction to take.

    3) This again is some custom code that is out of the scope here really.

    You would need to detect a click on the LI, and then set any checkbox elements inside to “checked”

    jQuery(document).on("click", ".searchandfilter .yourfieldclass li", function(){
       //detect a click on an  LI element within a specific field.
       //then set the checked state to true
       jQuery(this).find("input[type='checkbox']").prop("checked", true);
    });

    You can use the code above as a basis for solving your tasks but its not officially supported within the plugin itself.

    Thanks

    #32300

    Ross
    Keymaster

    Hey John

    This was actually just a bit of custom CSS I added:

    .searchandfilter > ul > li[data-sf-field-input-type="checkbox"] > ul, .searchandfilter > ul > li[data-sf-field-input-type="radio"] > ul {
        max-height: 150px;
        overflow: auto;
    }

    Thanks!

    #27968

    Ross
    Keymaster

    Hi Luca

    In order to style your search form you must have some basic CSS knowledge.

    Please see here the notes on how to customise:

    http://www.designsandcode.com/documentation/search-filter-pro/getting-started/display-search-form/#Styling_Your_Search_Form

    What you are asking for is something very specific to your site, and would require some custom coding.

    I’ll give you a pointer though however, depending on your theme this may still not work – if you look at hte code you will notice the search field list item has a class for easy styling,

    So the following CSS should convert S&F to a horizontal layout (depending on your theme) but then sets the search field to display block ,which means it will be on its own line.

    .searchandfilter > ul > li
    {
        display:inline-block;
    }
    
    .searchandfilter > ul > li.sf-field-search
    {
        display:block;
    }
    

    Like I mentioned, this may not work in your setup – but its a good starting point.

    Thanks

    PS, please also ensure you are using S&F 2.0.2 (released 2 days ago).


    Ross
    Keymaster

    Hi Mukhtar

    To answer your questions:

    1) Your first point regarding horizontal can be done with CSS – but what you want is a customisation beyond the scope of support here. It is possible to achieve what you want but you must have the js/html/css skills to implement specifically what you want.

    Info to simply to make it horizontal can be found here: https://support.searchandfilter.com/forums/topic/horizontal-layout/#post-6143

    2) You can’t do the exact same thing, but you could use a date range (post meta field) to achieve something similar – as long as you store the listing date as post meta.

    3) I’ll look in to this, are listings a custom post type?

    Thanks

    #22148

    Ross
    Keymaster

    Hey Megan

    S&F does not do the layout design work for you, it keeps things very basic so you can customise.

    The problem you are describing is pretty much a generic html/css question which I can’t really provide an answer for unless I’m writing specific code for your site.

    So first, to make the whole form horizontal you would need to do the following (may not work in all themes):

    https://support.searchandfilter.com/forums/topic/horizontal-layout/#post-6143

    And then you would need to figure out the rest of the CSS changes you want to make yourself.

    Theres plenty of info out there – what you want to be looking for is using CSS to style unordered lists (ul – which is what all the fields are contained in) and I guess heading tags (h4).

    Thanks

    #21308

    Ross
    Keymaster

    Hi there

    To answer your questions:

    1) The count numbers are not dynamic and do not reflect the real live values based on the current search – they are based on WP internal count of these taxonomies – the next version of S&F will change this and they will be dynamic.

    2) S&F works with WooCommerce, in that you can search WooCommerce Products, and search attributes and custom fields – but it is not a filter to be used with the Shop page directly (I will add this at some stage).

    You need to think of this a little different, so on your shop page you can add the S&F form, but realise, once a user searches – they will be taken “away” to a search result page.

    Now what you must do is recreate the format of the shop page if that is what you wish.

    If you are using Display using shortcode, then you should just paste the shortcode in to an empty page – and have the Results URL point to this new page. You will then have to customise the html/css to emulate the look of your shop page.

    Alternatively, you could try using the As Archive method – the WooCommerce product archive is usually calls the WooCommerce template archive-product.php and you could try modifying using this with some modification for your S&F results.

    Some other users have across this see here – https://support.searchandfilter.com/forums/search/archive-product/

    Thanks

    #18817

    Ross
    Keymaster

    Hi there

    To answer your questions:

    1) This is not supported, but you could implement this using js/css – there is some futher info here:
    https://support.searchandfilter.com/forums/topic/stop-searching-on-page-load/#post-14509

    2) In the meta field, where you have all your values listed, you can simply drag the values up and down to change the order using the little handle on the left of them

    3) This is in your custom template – you need to make modifications to this in order to remove it

    4) The default results template doesn’t close some html tags properly – this is a bug I will fix, but you will also need to manually fix any custom templates you’ve already created.

    5) This is a theme issue – you theme is styling the dropdowns and I guess removing the arrows. You would need to do some CSS hacking and restore the default styles to them – alternatively you could try ticking the “combobox” option in your fields for a different type of field – which may or may not be suited to what you need.

    Thanks

    #17059

    Ross
    Keymaster

    Hi Paul

    I’ve had a quick look… the problem seems to be the wrong CSS is being applied to the search results page.

    As I mentioned before ,these customisations are normally out of scope of support, but I think I’ve cracked it anyway.

    Essentially, on your shop page, the body tag has the following class woocommerce-page (amongst others).

    When I add these in firebug to the search results page, the results look like a grid – not sure if its exactly the same, but very similar…

    So what you need to do is add some wordpress code to add these two classes to your body tags, on search result pages (take from: https://support.searchandfilter.com/forums/search/woocommerce-page/):

    add_filter('body_class','add_body_class_to_search_filter');
    function add_body_class_to_search_filter($classes) {
    	
    	global $sf_form_data;
    	
    	if ($sf_form_data->is_valid_form())
    	{		
    		$classes[] = "woocommerce-page";
    	}
    	// return the $classes array
    	return $classes;
    }

    You can add this to the functions.php of your theme.

    Hope that helps!

Viewing 10 results - 271 through 280 (of 286 total)