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.
