Ethos search results styling

Support
#1

Hi there,

I’m trying to get the search results the same way as my categories and recent post style:

  • Title under image, gray background and border, hover changes font color
  • Image (and title) zoom in on hover
Website links

Homepage: https://popcornandstuff.nl/
Category page: https://popcornandstuff.nl/category/dinner/
Search results page: https://popcornandstuff.nl/?s=pita
Please note that not all posts have featured images yet!

#2

Hi There,

Please copy this file to your child theme in the same directory: x\framework\views\global\_index.php.

After change the code of this file to this:

<?php

// =============================================================================
// VIEWS/GLOBAL/_INDEX.PHP
// -----------------------------------------------------------------------------
// Includes the index output.
// =============================================================================

$stack = x_get_stack();

if ( is_home() ) :
  $style     = x_get_option( 'x_blog_style' );
  $cols      = x_get_option( 'x_blog_masonry_columns' );
  $condition = is_home() && $style == 'masonry';
elseif ( is_archive() ) :
  $style     = x_get_option( 'x_archive_style' );
  $cols      = x_get_option( 'x_archive_masonry_columns' );
  $condition = is_archive() && $style == 'masonry';
elseif ( is_search() ) :
  $condition = true;
  $cols      = x_get_option( 'x_archive_masonry_columns' );
endif;

?>

<?php if ( $condition ) : ?>

  <?php x_get_view( 'global', '_script', 'isotope-index' ); ?>

  <div id="x-iso-container" class="x-iso-container x-iso-container-posts cols-<?php echo $cols; ?>">

    <?php if ( have_posts() ) : ?>
      <?php while ( have_posts() ) : the_post(); ?>
        <?php if ( $stack != 'ethos' ) : ?>
          <?php x_get_view( $stack, 'content', get_post_format() ); ?>
        <?php else : ?>
          <?php x_ethos_entry_cover( 'main-content' ); ?>
        <?php endif; ?>
      <?php endwhile; ?>
    <?php else : ?>
      <?php x_get_view( 'global', '_content-none' ); ?>
    <?php endif; ?>

  </div>

<?php else : ?>

  <?php if ( have_posts() ) : ?>
    <?php while ( have_posts() ) : the_post(); ?>
      <?php x_get_view( $stack, 'content', get_post_format() ); ?>
    <?php endwhile; ?>
  <?php else : ?>
    <?php x_get_view( 'global', '_content-none' ); ?>
  <?php endif; ?>

<?php endif; ?>

<?php pagenavi(); ?>

Let us know how it goes!

#3

Works great! Thank you!

Just one thing, the image is smaller than the title box. (or the title box is bigger than the image).

#4

Hey @fransboumans,

Please add this code in Theme Options > CSS

.x-iso-container.cols-3 .entry-cover {
    background-size: 100%;
}

Hope that helps.

#5

That did the trick! Thank you!

#6

You’re welcome. Glad we could help.

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.