Hey Luis
You can target a search form using the ID already:
.searchandfilter[data-sf-form-id=123] input[type=text]
{
border:1px solid #f00;
}
Thanks
Hi,
I’m trying to validate my website on http://validator.w3.org/ and giving me the following error:
Bad value for attribute action on element form: Must be non-empty.
This is the code that’s causing the problem:
<form action="" method="post" class="searchandfilter" data-sf-form-id="1272" ... >
Thanks for any help.
Hi Ben
You should be able to target the form like:
.searchandfilter[data-sf-form-id='12']
{
/* rules */
}
You should add this to your themes CSS file, not into the CSS loaded by the plugin.
If you don’t see changes, it may be that the plugin CSS is getting loaded after your theme CSS – in that case you could try adding !important to your css rules.
Thanks
To add to this, the styling does not apply when adding [data-sf-form-id=’12’] for example to the core css file for the plugin: search-filter.min.css.
Thanks.
Hey Boaz
There are two ways to do it…
Normally your homepage would have a class on it – .home
So you could style Search forms on your homepage like:
.home .searchandfilter
{
border:1px solid #f00;
}
Alternatively you could target them individually using attributes:
.searchandfilter[data-sf-form-id='12']
{
border:1px solid #f00;
}
Where 12 is the ID of your form
I will be adding a proper ID attribute to the forms in the next release.
Thanks
Ross,
I think I might have cracked it….but would appreciate you checking the CSS changes I made…
form[data-sf-form-id="6080"] .sf-field-taxonomy-product_cat {float:left; }
form[data-sf-form-id="6080"] .sf-field-submit {float:right; }
form[data-sf-form-id="6080"] select, input[type="file"] {height: 5.65em;}
Hey Paul
Currently you cannot create a completely separate form, but you can style it with CSS.
I just had a look at the code and could have sworn each search form gets its own ID – but they don’t, so to style individual search forms use the following CSS (substituting the ID):
form[data-sf-form-id="824"]
{
border:1px solid #f00;
}
If of course you are using the same form in different locations you would need to check the DOM and structure of your site.. but in general in WP the homepage has a home class on the body tag so you could target the homepage specifically like:
.home form[data-sf-form-id="824"]
{
border:1px solid #0f0;
}
And again, depending on your theme, it is common to attach a class to the body tag with page id.. so you could target search forms on specific pages like this:
.page-id-113 form[data-sf-form-id="824"]
{
border:1px solid #00f;
}
Hope that helps 🙂
That is what is happening, yes. I’d love to share, but my WP community beat me up for a year and got me to dev locally now. So here is the generated code. (http://imgur.com/XQr8CTs)
<section id="search_filter_register_widget-2" class="widget widget_search_filter_register_widget"><div class="widget-wrap"><form action="" method="post" class="searchandfilter" data-sf-form-id="1267" data-use-history-api="1" data-template-loaded="0"><ul><li class="sf-field-taxonomy-types" data-sf-field-name="_sft_types"><select name="_sft_types[]" class="postform"><option class='level-0 sf-item-0' value='0'> All Types</option> <option class="level-0 sf-item-39" value='39' data-sf-cr='_sft_39' data-sf-hide-empty='1'>Fishing Guide (11)</option>
<option class="level-0 sf-item-38" value='38' data-sf-cr='_sft_38' data-sf-hide-empty='1'>Hunting Guide (4)</option>
</select></li><li class="sf-field-taxonomy-location" data-sf-field-name="_sft_location"><select name="_sft_location[]" class="postform"><option class='level-0 sf-item-0' value='0'> All Locations</option> <option class="level-0 sf-item-42" value='42' data-sf-cr='_sft_42' data-sf-hide-empty='1'>Alaska (5)</option>
<option class="level-0 sf-item-45" value='45' data-sf-cr='_sft_45' data-sf-hide-empty='1'>Florida (1)</option>
<option class="level-0 sf-item-44" value='44' data-sf-cr='_sft_44' data-sf-hide-empty='1'>Montana (1)</option>
<option class="level-0 sf-item-43" value='43' data-sf-cr='_sft_43' data-sf-hide-empty='1'>Oregon (5)</option>
</select></li><li class="sf-field-taxonomy-meals" data-sf-field-name="_sft_meals"><select name="_sft_meals[]" class="postform"><option class='level-0 sf-item-0' value='0'> All Meals</option> <option class="level-0 sf-item-52" value='52' data-sf-cr='_sft_52' data-sf-hide-empty='1'>Bring your own (1)</option>
</select></li><li class="sf-field-taxonomy-overnights" data-sf-field-name="_sft_overnights"><select name="_sft_overnights[]" class="postform"></select></li><li class="sf-field-taxonomy-equipment" data-sf-field-name="_sft_equipment"><select name="_sft_equipment[]" class="postform"></select></li><li class="sf-field-taxonomy-base-price" data-sf-field-name="_sft_base-price"><select name="_sft_base-price[]" class="postform"></select></li><li class="sf-field-submit" data-sf-field-name="submit"><input type="submit" name="_sf_submit" value="Submit"></li><input type="hidden" name="_sf_submitted" value="1" /><input type="hidden" name="_sf_form_id" value="1267" class="sf_form_id" /></ul></form></div></section>
Alright, so last update… good news! Please excuse my explanation if it’s unclear at all, I’m a bit of a n00bie dev.
The issue was occurring on a callback. The popstate was being called on Safari upon page reload, but not in Firefox or any other browser (surprisingly, Chrome wasn’t having an issue). By commenting out var $data_obj_get = $(data);, I stopped the code from re-adding the html (below)
var $ajaxed_search_form_get = $data_obj_get.find('*[data-sf-form-id='+form_id+']');
$thisform.html($ajaxed_search_form_get.html());
and as a result, initSearchForms(); was not being overridden by this bit of code. By calling initSearchForms(); again after the two lines of code above, and uncommenting var $data_obj_get = $(data);, the comboboxes were being created after the html purge and re-write.
So all is well! Thanks!
