Search Results for '.searchandfilter custom css'

[Trevor]

OK. The >> is made by your theme and needs to be switched off inside search and filter forms, with Custom CSS:

.bSe .searchandfilter ul li::before {content: '' !important;}

To put the search field and button next to each other, this:

.searchandfilter .sf-field-search {
  display: inline-block;
  padding-left: 0 !important;
  margin-right: 20px;
}
.searchandfilter .sf-field-submit {
  display: inline-block;
  padding-left: 0 !important;
}

For the second point, to hide results until a search has been made, I need to know you have placed a copy of the results.php file in your theme or child theme folder, as here:

https://www.designsandcode.com/documentation/search-filter-pro/search-results/using-a-shortcode/#Customising_the_Results

Assuming that you have, edit that file and replace the content with this:

<?php
/**
 * Search & Filter Pro 
 *
 * Sample Results Template
 * 
 * @package   Search_Filter
 * @author    Ross Morsali
 * @link      http://www.designsandcode.com/
 * @copyright 2015 Designs & Code
 * 
 * Note: these templates are not full page templates, rather 
 * just an encaspulation of the your results loop which should
 * be inserted in to other pages by using a shortcode - think 
 * of it as a template part
 * 
 * This template is an absolute base example showing you what
 * you can do, for more customisation see the WordPress docs 
 * and using template tags - 
 * 
 * http://codex.wordpress.org/Template_Tags
 *
 */

global $searchandfilter;
$sf_current_query = $searchandfilter->get(255)->current_query();
if ((!$sf_current_query->is_filtered())&&($sf_current_query->get_search_term()=="")) {
  echo '<div>Nothing to see here folks!</div>'; 
} else {
	
	if ( $query->have_posts() )
{
	?>
	
	Found <?php echo $query->found_posts; ?> Results<br />
	Page <?php echo $query->query['paged']; ?> of <?php echo $query->max_num_pages; ?><br />
	
	<div class="pagination">
		
		<div class="nav-previous"><?php next_posts_link( 'Older posts', $query->max_num_pages ); ?></div>
		<div class="nav-next"><?php previous_posts_link( 'Newer posts' ); ?></div>
		<?php
			/* example code for using the wp_pagenavi plugin */
			if (function_exists('wp_pagenavi'))
			{
				echo "<br />";
				wp_pagenavi( array( 'query' => $query ) );
			}
		?>
	</div>
	
	<?php
	while ($query->have_posts())
	{
		$query->the_post();
		
		?>
		<div>
			<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
			
			<p><br /><?php the_excerpt(); ?></p>
			<?php 
				if ( has_post_thumbnail() ) {
					echo '<p>';
					the_post_thumbnail("small");
					echo '</p>';
				}
			?>
			<p><?php the_category(); ?></p>
			<p><?php the_tags(); ?></p>
			<p><small><?php the_date(); ?></small></p>
			
		</div>
		
		<hr />
		<?php
	}
	?>
	Page <?php echo $query->query['paged']; ?> of <?php echo $query->max_num_pages; ?><br />
	
	<div class="pagination">
		
		<div class="nav-previous"><?php next_posts_link( 'Older posts', $query->max_num_pages ); ?></div>
		<div class="nav-next"><?php previous_posts_link( 'Newer posts' ); ?></div>
		<?php
			/* example code for using the wp_pagenavi plugin */
			if (function_exists('wp_pagenavi'))
			{
				echo "<br />";
				wp_pagenavi( array( 'query' => $query ) );
			}
		?>
	</div>
	<?php
}
else
{
	echo "No Results Found";
}
}
?>

That should work, I hope.

For #3. It would be better to use your theme’s own styling, and to do this I would need to see a more normal results page in your theme that looks OK to you, then we can borrow their styling.

[Trevor]

The overflow of the select box is due to the length of the options/terms. Some Custom CSS will fix this:

.searchandfilter select.sf-input-select {max-width: 225px;}

The Auto Submit is set in the form settings on the General Tab. You would uncheck this setting. I have done this for you already.

Yes, the results can be like that. At this time, your search is still ‘As an Archive’. You will need to change this to the Shortcode method in the Display Results settings tab, and also set a URL for the results. This can be a new page (which you would have to make and you would make it with the sidebar like the Guias page) or it can be the Guias page, in which case you must choose how you want the results to look (and the unfiltered page). Like the Guias page or like the tag results page you get when clicking one fo those 3 buttons.

[Anonymous]

Hello Trevor,

Thanks for your help.

Have a look at this page please: initially, when page is loaded, you see correct styling. But suddenly it changes. http://www.sustainablepackagingcommunity.com/portfolio/

Can you tell me why?

This is custom css code:

<style type=”text/css”>

1
/* Add your CSS code here.
2

3
For example:
4
.example {
5
color: red;
6
}
7
​
8
For brushing up on your CSS knowledge, check out http://www.w3schools.com/css/css_syntax.asp
9
​
10
End of comment */
11
​
12
.searchandfilter > ul > li .sf-input-text,
13
.searchandfilter > ul > li .sf-input-select {
14
min-width: 300px;
15
}

[Trevor]

Your theme might be overriding the CSS. You might need something like this in a custom css file:

.searchandfilter > ul > li .sf-input-text,
.searchandfilter > ul > li .sf-input-select {
  min-width: 200px;
}

[Trevor]

Ah, now I see what you want. Not very easy. You have 8 controls of different heights. It is possible to make them go in 3 columns across the page, but it may not look so nice.

The first thing to fix is to have the radio buttons next to the labels of the event_options. This custom css should do that:

.sf-field-post-meta-event_options label {display: inline !important;}

Then make them all about the same width:

.searchandfilter > ul > li {
  width: 33% !important;
  padding-left: 10px;
  padding-right: 10px;
  float: left;
}
.sf-field-post-meta-event_options input {width: auto !important;}
.searchandfilter ul {width: 100%;}
.searchandfilter ul > li input, .searchandfilter ul > li select {
  width: 100%;
}
.searchandfilter .meta-slider {max-width: 100% !important;}

[Trevor]

Custom CSS:

.searchandfilter ul li {
  display: inline-block !important;
  margin-right: 20px !important;
}
.searchandfilter ul {
  margin-left: 0 !important;
}

[Trevor]

If your theme does not have a Custom CSS panel/function, then add the plugin I mentioned in this post to you:

https://support.searchandfilter.com/forums/topic/design-your-search-filter-form/#post-60742

[Trevor]

Hi Edgar. So I can look at the first question, I might need to log in as an admin and look at/edit the search form. You can send credentials here as a private reply. HOWEVER, for me it works fine. You will need to tell me what you are selecting (in sequence) that does not work.

As to the second question, this is the css that gives padding between the controls:

.searchandfilter ul li {
  padding-right: 10px;
  padding: 10px 0;
}

You might override this in custom css like this:

.searchandfilter ul li {
padding-top: 0 !important;
padding-bottom: 0 !important;
}

[Trevor]

Hi

I have had a good look at the issue. I made the search a bit easier to use by hiding empty values. If I do a search, it says there are two results for a search for Kedah, but shows none, or does it?

If you look at the page source code, the results are there! But they are being hidden by the plugin you are using for Custom Post Types; Post Type Builder.

It is adding a container div around the results – ptb_loops_wrapper ptb_list-post clearfix and in CSS it is setting this to display:none

To undo this, you would have to use this code snippet:

$(document).on("sf:ajaxfinish", ".searchandfilter", function(){
	console.log("ajax complete");
	//your JS code here
});

Where the line //your JS code here is replaced by the javascript to show that div.

Our developer is currently working hard on some bug fixes for a new version, but, if possible, he would like to borrow a copy of the bundle plugin to see what it is doing (so we can maybe engineer a better solution).

[Trevor]

Did you try this in Custom CSS?

.searchandfilter-date-picker .ui-datepicker select.ui-datepicker-month, .searchandfilter-date-picker .ui-datepicker select.ui-datepicker-year {
  color: #222;
}

If you have no place in your theme for custom css, you could use the Simple Custom CSS plugin.

Do not edit the distribution CSS files, as these will be overwritten by any updates.