Search Results for '.searchandfilter custom css'

[Trevor]

This Custom CSS maybe?

.searchandfilter input[type="submit"] {
  cursor: pointer;
  color: #000 !important;
  font-size: 17px !important;
  padding: 0 6px !important;
  border: 1px solid #adadad !important;
  background: #e1e1e1 !important;
}
.searchandfilter input[type="submit"]:hover {
  border: 1px solid #0078d7 !important;
  background: #e5f1fb !important;
}

[Trevor]

Ok

Immediately beneath the do_shortcode line, put this:

<div class="clearfix"></div>

The labels and input check boxes are not aligning due to some difference in CSS between the pages. Custom CSS would fix this.

.search input, .searchform input {display: inline-block !important;}
.searchandfilter ul li li {padding: 0 !important;}

[Trevor]

It is your theme’s css. Add this custom CSS to your site:

.searchandfilter ul li input {
    width: auto !important;
}

If this fixes it, is it OK for me to mark the thread resolved and close it?

[Trevor]

You will need to add Custom CSS to your theme. There are MANY posts with sample CSS snippets that different users have found worked for them. The key search term is horizontal:

https://support.searchandfilter.com/forums/search/horizontal/

If that does not help, show me the working (live) search page.

[Trevor]

OK, So I looked. The problem was that you switched off the plugin css and js files and switched on lazyload. I know that the form now looks wrong, but this can be fixed with custom css. However, this messes up the css, so I have fixed that for you. In your Custom CSS, this is the revised S&F section:

.searchandfilter > ul {
	margin: 0 !important;
	padding: 0 !important;
}
.searchandfilter > ul > li {
	display: inline !important;
	list-style: none;
	padding: 0px !important;
}
.searchandfilter {
	 width:100%;
	 padding:20px;
	 padding-top:50px;
}
.searchandfilter label {
	margin-right:16.5px !important;
	display:inline !important;
}
.searchandfilter input, select {
	 border-radius:4px;
	 border:0px;
	 height:40px;
	 border-radius: 4px !important;
	 width:23.6% !important;
	 box-sizing: border-box !important;
	 padding: 6px 10px;
	 color: #404040;
	 font: 13px/20px "Open Sans",Helvetica,Arial,sans-serif !important;
}
.searchandfilter select {
	background: url(https://onlimaps.be/wp-content/themes/OnliMaps/assets/img/new_arrow.jpg) no-repeat right #fff;
	-webkit-appearance: none;
	-moz-appearance: none !important;
	color: #404040;
	
}
form.searchandfilter .sf-field-submit input {
	color: #fff;
	background-color: #2479ab;
	border: 0;
	padding: 0;
}
form.searchandfilter .sf-field-submit input:hover {
	background-color: #105278;
	transition-duration: 1.1s;
}

I have added one line, and added !important to that line and two others.

[Trevor]

1. No. If you have taxonomy terms in the core category/tags taxonomy that requires two form fields to filter as you want, then your site data is not structured correctly. You need to add one or more custom taxonomies, and/or use custom posts, and/or use custom fields (meta data). Using the free plugins CPT UI (Custom Post Type UI) and ACF (Advanced Custom Fields) you can add this structure. Then you can add unique form fields to filter the data.

2. Your theme is doing this. Add this custom css to your theme:

.searchandfilter input[type="text"] {
    width: 100% !important;
}

3. It appears to be because the form is only that long. More content on the page below the form might help.

[Trevor]

Hi Brentan

If you have taxonomy terms in the core category/tags taxonomy that requires two form fields to filter as you want, then your site data is not structured correctly. You need to add one or more custom taxonomies, and/or use custom posts, and/or use custom fields (meta data). Using the free plugins CPT UI (Custom Post Type UI) and ACF (Advanced Custom Fields) you can add this structure. and then you can add unique form fields to filter the data.

As to Horizontal, you need custom css. If you theme has no way to add this, then you can use a plugin like Simple Custom CSS. A quick search in the forum for the word horizontal reveals solutions you might try:

https://support.searchandfilter.com/forums/topic/sf-horizontal-the-final-solution/

[Trevor]

Hi

I think this might be better to resolve the main problem first. If you find yourself wanting to put more than one category form field, then your data structure is wrong. Instead, you need to use custom taxonomies to separate what you held in the one category taxonomy. You can use a free plugin called CPT UI (Custom Post Type UI) to do this.

Then, when you have done this, let me know so that I can look at the form again. The CSS I can see on the form is this:

select option:checked, select option:hover, select option:focus {
    background-color: #D20005;
    background-image: -webkit-gradient(linear,50% 0,50% 100%,color-stop(20%,#D20005),color-stop(90%,#D20005));
    background-image: -webkit-linear-gradient(#D20005 20%,#D20005 90%);
    background-image: -moz-linear-gradient(#D20005 20%,#D20005 90%);
    background-image: -o-linear-gradient(#D20005 20%,#D20005 90%);
    background-image: linear-gradient(#D20005 20%,#D20005 90%);
    color: #fff;
}

Add something like this to your Custom CSS (change the colors as you need, I have left them as they are in this example):

.searchandfilter select option:checked, select option:hover, select option:focus {
    background-color: #D20005;
    background-image: -webkit-gradient(linear,50% 0,50% 100%,color-stop(20%,#D20005),color-stop(90%,#D20005));
    background-image: -webkit-linear-gradient(#D20005 20%,#D20005 90%);
    background-image: -moz-linear-gradient(#D20005 20%,#D20005 90%);
    background-image: -o-linear-gradient(#D20005 20%,#D20005 90%);
    background-image: linear-gradient(#D20005 20%,#D20005 90%);
    color: #fff;
}

[Trevor]

OK

First bit of Custom CSS:

.searchandfilter li h4 {
  display: inline-block;
  min-width: 50%;
  text-align: right;
}
.searchandfilter li.sf-field-taxonomy-other_features h4 {
  display: block;
  text-align: left;
  font-size: 28px !important;
  font-weight:  700 !important;
}
.searchandfilter li.sf-field-taxonomy-other_features ul li {
  display: inline-block;
  min-width: 33%;
}

[Trevor]

Once you are seeing the form working, the horizontal question is answered many times on the forum, like here:

https://support.searchandfilter.com/forums/topic/sf-horizontal-the-final-solution/

CSS needs to be added to the site custom CSS.