Forums › Forums › Search & Filter Pro › CSS styling Yootheme Pro

Tagged: 

Viewing 10 posts - 1 through 10 (of 12 total)
1 2
  • Anonymous
    (Private)  April 29, 2020 at 8:05 pm #242039

    Hi,

    Thanks the plugin is working great so far.

    In regards to CSS styling, the code for the search button is <input type=”submit” name=”_sf_submit” value=”Search”>, what is best practice applying the following classes to it “uk-button uk-button-primary” to apply the template button style to the search and filter button.

    I am using a UIKit 3 CSS framework

    See example page: https://dev.12steptreatmentcentres.com/advanced-search/

    Thanks in advance

    Trevor
    (Private)  April 30, 2020 at 10:04 am #242085

    Have a look through this thread, it should provide some pointers:

    https://support.searchandfilter.com/forums/topic/uikit-style-is-not-loading-after-submit-on-yootheme-pro/

    Anonymous
    (Private)  May 1, 2020 at 8:35 pm #242375
    This reply has been marked as private.
    Trevor
    (Private)  May 1, 2020 at 8:55 pm #242381

    You may need to use JavaScript to apply that class to any object on the page that already has the sf-input-text class.

    Anonymous
    (Private)  May 1, 2020 at 10:11 pm #242387
    This reply has been marked as private.
    Trevor
    (Private)  May 2, 2020 at 8:29 am #242395

    You need to add this JavaScript to the page:

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

    If you have no means to do that, the install and use this plugin:

    https://wordpress.org/plugins/tc-custom-javascript/

    If you use that plugin, you will NOT need the <script> </script> tags, as it adds them for you.

    I haven’t tested that, but it should work.

    Anonymous
    (Private)  May 2, 2020 at 3:00 pm #242399
    This reply has been marked as private.
    Anonymous
    (Private)  May 2, 2020 at 3:06 pm #242401
    This reply has been marked as private.
    Trevor
    (Private)  May 2, 2020 at 4:34 pm #242407

    Looking at the code, there is a space between input and [. It should not be there.

    Also, submit MIGHT need to be inside double quotes ("submit").

    So, the code might then become:

    (function ( $ ) {
$(document).on("sf:ajaxfinish", ".searchandfilter", function(){
  $('.searchandfilter input[type="submit"]').addClass('uk-button uk-button-primary');
});
}(jQuery));

jQuery(document).ready(function($){
  $('.searchandfilter input[type="submit"]').addClass('uk-button uk-button-primary');
});
    Anonymous
    (Private)  May 2, 2020 at 6:10 pm #242412
    This reply has been marked as private.
  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 12 total)
1 2