Forums › Forums › Search & Filter Pro › CSS Styling

Viewing 5 posts - 1 through 5 (of 5 total)
  • Anonymous
    (Private)  April 18, 2016 at 2:25 pm #43110

    Hi

    For some reason I am finding it difficult to custom style the form including the width of the search form and the submit button.

    Could you confirm how this is done. I’ve tried all manner of ways to override these.

    Thanks

    <li class=”sf-field-search” data-sf-field-name=”search” data-sf-field-type=”search” data-sf-field-input-type=””> <label><input placeholder=”Leave blank to display all items in category…” name=”_sf_search[]” class=”sf-input-text” type=”text” value=”” title=””></label>

    <input type=”submit” name=”_sf_submit” value=”Submit”>

    Trevor
    (Private)  April 18, 2016 at 3:05 pm #43120

    Hi

    It will have to be done using Custom CSS, and this would be easiest for me to advise if you show me a live page with the form on, and make an annotated screenshot of what needs changing?

    When you submit code here, can you put it inside the editor code tags (see the button bar over the editor) as the forum code does funky things to special characters.

    If you want to keep the details private, click Private Reply before you submit.

    Anonymous
    (Private)  April 18, 2016 at 4:23 pm #43123
    This reply has been marked as private.
    Trevor
    (Private)  April 19, 2016 at 8:58 am #43175

    Hi

    It will require Custom CSS to be added to your WordPress installation. I will make it specific to this form ID.

    #search-filter-form-42605 .sf-field-category, #search-filter-form-42605 .sf-field-submit {
  display: inline-block;
}
#search-filter-form-42605 .sf-field-submit {
  padding: 0;
  margin-left: 20px;
}
#search-filter-form-42605 input[type="submit"] {
  margin: 0;
  border-width: 1px;
  border-style: solid;
  cursor: pointer;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  padding: 3px 11px;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -ms-box-sizing: border-box;
  -moz-box-shadow: 0 1px 1px #eeeeee;
  -webkit-box-shadow: 0px 1px 1px #eeeeee;
}

    Well, if that isn’t quite what you want, you can fiddle with it?

    Anonymous
    (Private)  April 20, 2016 at 2:36 pm #43369

    Yes I managed to get that to work and the submit button displays correctly.

    Thanks

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)