Search Results for '.searchandfilter custom css'

[Trevor]

Hi Brent, apologies for the delay.

The form yes. The grid below depends on your theme and/or the Display Result method you are going to use. If you have not made a choice of theme yet, you may wish to discuss this first.

The form can be made horizontal with Custom CSS. This post shows a typical sample (but the preceding .fusion-column-wrapper parts are for that user’s theme (from the body tag of the page):

https://support.searchandfilter.com/forums/topic/how-do-i-custom-design-my-search-form/#post-91725

[Trevor]

The CSS tends to need to be customised for each site, but this is what I normally start with:

.searchandfilter > ul > li {
  margin-right: 20px;
}
.searchandfilter > ul > li:last-child {
  margin-right: 0;
}
.searchandfilter ul li {
  display: inline-block;
}

[Trevor]

Hi

So, two custom files as far as I can see. Custom CSS (note that part of this is commented out, as you will see if you paste the CSS into a code editor, like the one I use [brackets.io]):

/* WP Kraken */
.searchandfilter .sf-level-0 {
	position: relative;
}

.searchandfilter .sf-level-0 input {
	display: none;
}

.searchandfilter .sf-level-0 .sf-label-checkbox {
	display: block;
	cursor: pointer;
	padding-right: 2em;
	padding-left: 0;
	margin: 5px 0 5px 0;
}

.searchandfilter .sf-level-0 .sf-label-checkbox:before {
	font-family: 'FontAwesome';
	content: '';
	position: absolute;
	top: 3px;
	right: 0;
    width: 17px;
    height: 17px;
    font-size: 14px;
	line-height: 1;
	text-align: left;
	transition: all .5s;
	border: 1px solid #000000;
	padding: 1px;
}

.searchandfilter .sf-level-0:hover .sf-label-checkbox:before {
	content: '\f00c';
}

.searchandfilter .sf-level-0.sf-option-active .sf-label-checkbox:before,
.searchandfilter .sf-level-0 > input[checked="checked"] + .sf-label-checkbox:before {
	content: '\f00c';
}

/*.searchandfilter > ul > li > ul {
	overflow: hidden;
	max-height: 0;
	transition: max-height .8s;
}

.searchandfilter > ul > li.active > ul {
	max-height: 3000px;
}*/

.searchandfilter > ul > li > h4 {
	position: relative;
	padding-right: 2em;
	cursor: pointer;
	margin-bottom: 0;
}

.searchandfilter > ul > li > h4 + ul {
	height: 0;
	overflow: hidden;
}

.searchandfilter > ul > li > h4:before {
	font-family: 'FontAwesome';
	content: '\f067';
	position: absolute;
	right: -3px;
	font-size: .9em;
	line-height: 1.6;
	text-align: left;
	transition: all .8s;
	font-weight: initial;
}

.recipe-filter-content.active-1 .searchandfilter > ul > li:nth-child(1) > h4:before,
.recipe-filter-content.active-2 .searchandfilter > ul > li:nth-child(2) > h4:before,
.recipe-filter-content.active-3 .searchandfilter > ul > li:nth-child(3) > h4:before,
.recipe-filter-content.active-4 .searchandfilter > ul > li:nth-child(4) > h4:before,
.recipe-filter-content.active-5 .searchandfilter > ul > li:nth-child(5) > h4:before,
.recipe-filter-content.active-6 .searchandfilter > ul > li:nth-child(6) > h4:before,
.recipe-filter-content.active-7 .searchandfilter > ul > li:nth-child(7) > h4:before,
.recipe-filter-content.active-8 .searchandfilter > ul > li:nth-child(8) > h4:before,
.recipe-filter-content.active-9 .searchandfilter > ul > li:nth-child(9) > h4:before,
.recipe-filter-content.active-10 .searchandfilter > ul > li:nth-child(10) > h4:before,
.recipe-filter-content.active-11 .searchandfilter > ul > li:nth-child(11) > h4:before,
.recipe-filter-content.active-12 .searchandfilter > ul > li:nth-child(12) > h4:before,
.recipe-filter-content.active-13 .searchandfilter > ul > li:nth-child(13) > h4:before,
.recipe-filter-content.active-14 .searchandfilter > ul > li:nth-child(14) > h4:before,
.recipe-filter-content.active-15 .searchandfilter > ul > li:nth-child(15) > h4:before,
.recipe-filter-content.active-16 .searchandfilter > ul > li:nth-child(16) > h4:before,
.recipe-filter-content.active-17 .searchandfilter > ul > li:nth-child(17) > h4:before,
.recipe-filter-content.active-18 .searchandfilter > ul > li:nth-child(18) > h4:before,
.recipe-filter-content.active-19 .searchandfilter > ul > li:nth-child(19) > h4:before,
.recipe-filter-content.active-20 .searchandfilter > ul > li:nth-child(20) > h4:before,
.recipe-filter-content.active-21 .searchandfilter > ul > li:nth-child(21) > h4:before,
.recipe-filter-content.active-22 .searchandfilter > ul > li:nth-child(22) > h4:before,
.recipe-filter-content.active-23 .searchandfilter > ul > li:nth-child(23) > h4:before,
.recipe-filter-content.active-24 .searchandfilter > ul > li:nth-child(24) > h4:before,
.recipe-filter-content.active-25 .searchandfilter > ul > li:nth-child(25) > h4:before,
.recipe-filter-content.active-26 .searchandfilter > ul > li:nth-child(26) > h4:before,
.recipe-filter-content.active-27 .searchandfilter > ul > li:nth-child(27) > h4:before,
.recipe-filter-content.active-28 .searchandfilter > ul > li:nth-child(28) > h4:before,
.recipe-filter-content.active-29 .searchandfilter > ul > li:nth-child(29) > h4:before,
.recipe-filter-content.active-30 .searchandfilter > ul > li:nth-child(30) > h4:before{
	content: '\f068';
}

.recipe-filter-content.active-1 .searchandfilter > ul > li:nth-child(1) > h4 + ul,
.recipe-filter-content.active-2 .searchandfilter > ul > li:nth-child(2) > h4 + ul,
.recipe-filter-content.active-3 .searchandfilter > ul > li:nth-child(3) > h4 + ul,
.recipe-filter-content.active-4 .searchandfilter > ul > li:nth-child(4) > h4 + ul,
.recipe-filter-content.active-5 .searchandfilter > ul > li:nth-child(5) > h4 + ul,
.recipe-filter-content.active-6 .searchandfilter > ul > li:nth-child(6) > h4 + ul,
.recipe-filter-content.active-7 .searchandfilter > ul > li:nth-child(7) > h4 + ul,
.recipe-filter-content.active-8 .searchandfilter > ul > li:nth-child(8) > h4 + ul,
.recipe-filter-content.active-9 .searchandfilter > ul > li:nth-child(9) > h4 + ul,
.recipe-filter-content.active-10 .searchandfilter > ul > li:nth-child(10) > h4 + ul,
.recipe-filter-content.active-11 .searchandfilter > ul > li:nth-child(11) > h4 + ul,
.recipe-filter-content.active-12 .searchandfilter > ul > li:nth-child(12) > h4 + ul,
.recipe-filter-content.active-13 .searchandfilter > ul > li:nth-child(13) > h4 + ul,
.recipe-filter-content.active-14 .searchandfilter > ul > li:nth-child(14) > h4 + ul,
.recipe-filter-content.active-15 .searchandfilter > ul > li:nth-child(15) > h4 + ul,
.recipe-filter-content.active-16 .searchandfilter > ul > li:nth-child(16) > h4 + ul,
.recipe-filter-content.active-17 .searchandfilter > ul > li:nth-child(17) > h4 + ul,
.recipe-filter-content.active-18 .searchandfilter > ul > li:nth-child(18) > h4 + ul,
.recipe-filter-content.active-19 .searchandfilter > ul > li:nth-child(19) > h4 + ul,
.recipe-filter-content.active-20 .searchandfilter > ul > li:nth-child(20) > h4 + ul,
.recipe-filter-content.active-21 .searchandfilter > ul > li:nth-child(21) > h4 + ul,
.recipe-filter-content.active-22 .searchandfilter > ul > li:nth-child(22) > h4 + ul,
.recipe-filter-content.active-23 .searchandfilter > ul > li:nth-child(23) > h4 + ul,
.recipe-filter-content.active-24 .searchandfilter > ul > li:nth-child(24) > h4 + ul,
.recipe-filter-content.active-25 .searchandfilter > ul > li:nth-child(25) > h4 + ul,
.recipe-filter-content.active-26 .searchandfilter > ul > li:nth-child(26) > h4 + ul,
.recipe-filter-content.active-27 .searchandfilter > ul > li:nth-child(27) > h4 + ul,
.recipe-filter-content.active-28 .searchandfilter > ul > li:nth-child(28) > h4 + ul,
.recipe-filter-content.active-29 .searchandfilter > ul > li:nth-child(29) > h4 + ul,
.recipe-filter-content.active-30 .searchandfilter > ul > li:nth-child(30) > h4 + ul {
	height: auto;
}

And the Custom javascript:

(function( $ ) {
	"use strict";

	var $container = $( '.recipe-filter-content' );

	if ( $container.length > 0 ) {

		$container.addClass( 'active-1' );

		$container.on( 'click', '.searchandfilter > ul > li > h4', function(){

			var $button                = $( this ),
				$checkboxes_list       = $button.closest( 'li' ),
				_checkboxes_list_index = $checkboxes_list.index(),
				_class                 = 'active-' + ( _checkboxes_list_index + 1 );
			
			if ( $container.hasClass( _class ) ) {
				$container.removeClass( _class );
			} else {
				$container.addClass( _class );
			}
		});
	}
})( jQuery );

Beyond that, I can’t help much more. If you want to employ someone to do this, the other user used Mateusz at WP Kraken.

[Trevor]

If you followed the customization instructions for the results.php template file, you can edit this to change/remove elements, and their HTML and CSS classes/ID’s, and also add HTML and add other fields or data by adding WordPress PHP.

I have previously posts some examples of edited results.php files. This link is for a search to find these other examples:

https://support.searchandfilter.com/forums/search/Sample+Results+Template/

[Trevor]

Does this Custom CSS help?

.searchandfilter ul li li.sf-level-0 {
  float: left;
  padding-right: 15px;
}
.searchandfilter .sf-field-reset {
  clear: left;
}

[Trevor]

You need to add some custom css to your theme. To fix that Crew being in the wrong place, this:

.searchandfilter > ul > li {float: left;}
.searchandfilter > ul > li.sf-field-taxonomy-yacht-feature {margin-top: 35px;}
.searchandfilter > ul > li.sf-field-sort_order {margin-top: 33px;}

To add a border around plus background for the form, this is a bit more difficult. So, I think that, in your page in WordPress, it looks like this:

<div class="search-filter-form-container">[form shortcode]</div>

But it needs to look like this:

<div class="search-filter-form-container">[form shortcode]<div class="clearfix"></div></div>

Then, I can see in the custom css you already have this:

#top form {
    margin-bottom: 20px;
}

But this needs to be:

.search-filter-form-container {
    margin-bottom: 20px;
/* add your css for the border, drop shadow, background color here */
}

[Trevor]

I think this reply to a different thread might be applicable to this thread:

https://support.searchandfilter.com/forums/topic/split-form-output-single-field/#post-86065

However, I have seen some users style a list of checkboxes so that clicking the title opens and closes the list? I am not sure how they have done it, by custom CSS I should think, and maybe a bit of javascript. Most elements have unique classes and/or ID’s to target.

Or did I miss the point?

I have a feeling a lot more functionality like this will arrive in the next major update, V3.

[Trevor]

This will be style added by your theme or another plugin. Use of the Inspector in your browser would show that this is the offending CSS from visual-composer-theme-master.min.css:

.entry-content ul > li::before {
    content: '\2022';
    font-size: 1.5em;
    position: absolute;
    left: 20px;
    line-height: 1.3;
    color: #557cbf;
}

The simplest fix is to remove the content part with Custom CSS:

.searchandfilter .entry-content ul > li::before {
    content: '' !important;
}

You might wish to read up on the use of the browser inspector by finding some guides or tutorials on Google (if there are any), as it is a useful tool.

[Trevor]

You would need Custom CSS added to your theme css, like this:

.searchandfilter ul li .sf-level-0 {
  font-weight: 700;
}

[Trevor]

Is there a list of other script output parameters we can use to display in results.php?

If you identify what you want to display, the code can be found in either the WordPress codex, on the WordPress StackExchange or in the documentation/forums of any plugin (like ACF). I can guide you if you need, but let me know what you want to show?

As far as scripts are concerned, what theme are you using? Many themes have a page where you can add scripts, otherwise there are plugins and other methods to do much the same. I just need to know what you have so I can recommend what best suits you. Clearly, the plugin route is easiest.

The radio button styling needs some Custom CSS. Again, how you add this is the same as for the script:

.searchandfilter li[data-sf-field-input-type="checkbox"] label, .searchandfilter li[data-sf-field-input-type="radio"] label, .searchandfilter li[data-sf-field-input-type="range-radio"] label, .searchandfilter li[data-sf-field-input-type="range-checkbox"] label {
    padding-left: 20px !important;
}