Custom CSS

Charlotte Simons

#244196

That’s weird, neither of them are perfectly correct.

This is what I want: https://www.screencast.com/t/Pz0onM4H4m

And this is what I see: https://www.screencast.com/t/UBRkUkAicG

Add New Note to this Reply

Trevor Moderator

#244201

I think you are seeing default behavior of the browsers. Try instead to attach Select2 to the dropdowns, then style them. This post explains how (4th paragraph down):

https://support.searchandfilter.com/forums/topic/format-question/#post-221332

This post will also be helpful:

https://support.searchandfilter.com/forums/topic/customise-dropdown-combobox/#post-180345

Add New Note to this Reply

Charlotte Simons

#244386

Hi Trevor!
I changed the Combobox to Select 2 and tried to change the CSS but it still won’t work. When I inspect the element, I still see the same classes, so I can’t figure out what to change.

Add New Note to this Reply

Trevor Moderator

#244518

The JavaScript needed does not seem to be on the page (it is in the first link from a previous post):

You need to add this JavaScript to the page:

<script>
(function ( $ ) {
  $(document).on("sf:ajaxfinish", ".searchandfilter", function(){
    $('select.sf-input-select').select2();
  });
}(jQuery));
jQuery(document).ready(function($){
  $('select.sf-input-select').select2();
});
</script>

If you want it without the search box at the top of the select boxes, then this instead:

<script>
(function ( $ ) {
  $(document).on("sf:ajaxfinish", ".searchandfilter", function(){
    $('select.sf-input-select').select2({minimumResultsForSearch: -1});
  });
}(jQuery));
jQuery(document).ready(function($){
  $('select.sf-input-select').select2({minimumResultsForSearch: -1});
});
</script>

Add New Note to this Reply

Charlotte Simons

#244734

Oh oops, that’s it. Got it now, I can edit the style in css. Thanks a lot!

Just a little question on the side (tell me if I have to make a new post about this): I’m using this filters on the Elementor post widget, but I actually just want to display the images like a gallery. So without clickthrough to the post. Is this possible in a way? Because this plugin only works with the Elementor portfolio or posts widget. Not with the actual gallery widget?

Add New Note to this Reply

Trevor Moderator

#244747

There is an option In Elementor to make a custom Posts layout, so you should be able to use that.

Add New Note to this Reply

Charlotte Simons

#244772

In the regular post widget, there is no custom post layout? And if I use another widget (like the post extra widget), I can’t make the Search & Filter Query as source. I just want a gallery where the image opens on click (no post), is that possible in one or another way?

Add New Note to this Reply

Trevor Moderator

#244776

Ah, I see you are correct. I had seen sites with Custom skins, but I think they used the Ele Custom Skin extension:

https://wordpress.org/plugins/ele-custom-skin/

Maybe that will do what you want? I haven’t tested it though.

Add New Note to this Reply

Charlotte Simons

#244780

Yes I know that plugin, but the problem remains that I can’t select your Search & Filter as query source. You only allow this in the regular post or portfolio widget of Elementor.

Add New Note to this Reply

Trevor Moderator

#244782

That plugin allows you to add a skin to the Posts Widget I think?

Add New Note to this Reply

[Author]

Posts