- This topic has 11 replies, 2 voices, and was last updated 6 years, 6 months ago by
.
CSS styling Yootheme Pro
Posted
by
Posted
by
Forums › Forums › Search & Filter Pro › CSS styling Yootheme Pro
Tagged: css styling
Anonymous.
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
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.
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');
});