styling search results

Anonymous

#243238

Hi Guys, I want to know whether there is a way I can style the search results? cant find enough classes to do my custom css.
Thank you

Anonymous

#243239

This reply has been marked as private.

Anonymous

#243240

This reply has been marked as private.

Trevor

#243260

Comparing the two forms is not easy, as you have dropdown selects in one and checkboxes in the other?

I DO see an issue with the infinite scroll that needs fixing, where it shows No Results at the bottom. This is a modified version of the standard infinite scroll results.php file to stop it from happening:

<?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
 *
 */

if ( $query->have_posts() ) {
 ?>
 
 Found <?php echo $query->found_posts; ?> Results<br />
 <div class='search-filter-results-list'>
 <?php
  while ($query->have_posts())
  {
   $query->the_post();
   
   ?>
   <div class='search-filter-result-item'>
    <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>
    
    <hr />
   </div>
   
   <?php
  }
 ?>
 </div>
<?php
} else {
 
 //figure out which type of "no results" message to show
 $message = "noresults"; 
 if(isset($query->query['paged'])) {  
  if($query->query['paged']>1){
   $message = "endofresults";
  }
 }
 
    if($message=="noresults") {
    ?>
 <div class='search-filter-results-list' data-search-filter-action='infinite-scroll-end'>
  <span>No Results Found</span>
 </div>
 <?php
    } else {
 ?>
 <div class='search-filter-results-list' data-search-filter-action='infinite-scroll-end'>
  <span>End of Results</span>
 </div>
 <?php
 }
}
?>

As for the styling, might you be able to show me an annotated (naming colors, font family, weight, size) screenshot of the frontend form and what needs changing? You would need to upload the screenshot image to a file sharing site (like the WordPress Cloudup site) and share the link for it with me?

Anonymous

#243477

This reply has been marked as private.

Trevor

#243566

This:

<div class="searchresults1"><?php 
  if ( has_post_thumbnail() ) {
    echo '<p>';
    the_post_thumbnail("small");
    echo '</p>';
  }
?></div>

Becomes this:

<div class="searchresults1"><?php 
  if ( has_post_thumbnail() ) {
    echo '<a href=' . the_permalink() . '>';
    the_post_thumbnail("small");
    echo '</a>';
  }
?></div>

I think.

Anonymous

#244340

Trevor thanks a lot, but its not working.
Whatever i try is not working.

The code you sent me puts the code on top of the image and links the image to the page that it currently is.

Trevor

#244500

I am not sure what you mean. Do you mean that every image links to the same URL (the current page), or to the post that is being shown? If not the post, what do you need it to link to? A larger version of the image, a document to download …

Anonymous

#244715

This reply has been marked as private.

Trevor

#244865

This:

<div class="searchresults1"><?php 
  if ( has_post_thumbnail() ) {
    echo '<a href=' . the_permalink() . '>';
    the_post_thumbnail("small");
    echo '</a>';
  }
?></div>

Should be this:

<div class="searchresults1"><?php 
  if ( has_post_thumbnail() ) {
    echo '<a href=" . the_permalink() . ">';
    the_post_thumbnail("small");
    echo '</a>';
  }
?></div>

I think.

[Author]

Posts