CSS styling Yootheme Pro

Anonymous

#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

#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

#242375

This reply has been marked as private.

Trevor

#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

#242387

This reply has been marked as private.

Trevor

#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

#242399

This reply has been marked as private.

Anonymous

#242401

This reply has been marked as private.

Trevor

#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

#242412

This reply has been marked as private.

[Author]

Posts