Support Forums

The forums are closed and will be removed when we launch our new site.

Looking for support? You can access the support system via your account.

Forums Forums Search & Filter Pro styling search results

Viewing 10 posts - 1 through 10 (of 16 total)
  • Ali Goodarzi
    #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

    Ali Goodarzi
    #243239
    This reply has been marked as private.
    Ali Goodarzi
    #243240
    This reply has been marked as private.
    Trevor Moderator
    #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?

    Ali Goodarzi
    #243477
    This reply has been marked as private.
    Trevor Moderator
    #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.

    Ali Goodarzi
    #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 Moderator
    #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 …

    Ali Goodarzi
    #244715
    This reply has been marked as private.
    Trevor Moderator
    #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.

Viewing 10 posts - 1 through 10 (of 16 total)

The topic ‘styling search results’ is closed to new replies.