Docs

[kvtd]

Building 1st site using X – site on local dev server – using Ethos

I would like to add a light gray background behind the post meta, title, button area on posts that have been marked to use the “Index Featured Post Layout”.
These featured post headings are currently white, and I am happy with the img gradient and hover – and I’d like to keep that way, but some of the images are a tad too busy and render the text hard to read. Adding a background to these elements may help.

cant find any directly related thread – though I might not be using correct terms.

thanks

[Christian]

Hey there,

Could you give us screenshots of the parts you’d like to put a background to?

Thanks.

[kvtd]

Thanks!

I’m looking to put a light gray opacity behind the meta/title/button area on large and skinny featured posts
(on index and cat indexes)
The best looking option might be one solid band across the entire img as in the top example of each attachment.
Next would be a box with minimal padding around all of the meta/title/button area as in the bottom example of each attachment.

I tried applying background colors to each separately via CSS but could not figure out the paddings/margins and failed to get anything to look decent.

Another option might be adding a drop shadow to all of of those texts?? But not sure how cross browser/devise friendly it would be.

Last and probably most easiest would be to darken the initial overlay, but I’d like to only do that as last resort.

thanks

[Christopher]

Hi there,

Because this requires a template change, I’d advise that you setup a child theme. This allows you to make code changes that won’t be overwritten when an X update is released. After your child theme is setup, please review how we recommend making template changes in Customization Best Practices.

Copy _post-slider.php from framework/views/ethos and put it in the same path inside child theme, replace existing code with following :

<?php

// =============================================================================
// VIEWS/ETHOS/_POST-SLIDER.PHP
// -----------------------------------------------------------------------------
// Outputs the post slider that appears at the top of the blog.
// =============================================================================

$is_blog    = is_home();
$is_archive = is_category() || is_tag();

if ( $is_blog || $is_archive ) :

  if ( $is_blog ) {
    $info = array( 'blog', NULL, NULL, '_x_ethos_post_slider_blog_display' );
  } elseif ( $is_archive ) {
    $type = ( is_category() ) ? 'cat' : 'tag_id';
    $info = array( 'archive', $type, get_queried_object_id(), '_x_ethos_post_slider_archives_display' );
  }

  $slider_enabled = x_get_option( 'x_ethos_post_slider_' . $info[0] . '_enable' ) == '1';
  $count          = x_get_option( 'x_ethos_post_slider_' . $info[0] . '_count' );
  $display        = x_get_option( 'x_ethos_post_slider_' . $info[0] . '_display' );

  $blog_slider_is_enabled    = $slider_enabled && $is_blog;
  $archive_slider_is_enabled = $slider_enabled && $is_archive;
  $is_enabled                = $blog_slider_is_enabled || $archive_slider_is_enabled;

  switch ( $display ) {
    case 'most-commented' :
      $args = array(
        'post_type'      => 'post',
        'posts_per_page' => $count,
        'orderby'        => 'comment_count',
        'order'          => 'DESC',
        $info[1]         => $info[2]
      );
      break;
    case 'random' :
      $args = array(
        'post_type'      => 'post',
        'posts_per_page' => $count,
        'orderby'        => 'rand',
        $info[1]         => $info[2]
      );
      break;
    case 'featured' :
      $args = array(
        'post_type'      => 'post',
        'posts_per_page' => $count,
        'orderby'        => 'date',
        'meta_key'       => $info[3],
        'meta_value'     => 'on',
        'ignore_sticky_posts'	=> true
      );
      break;
  }

  ?>

  <?php if ( $is_enabled ) : ?>

    <div class="x-flexslider x-post-slider">
      <ul class="x-slides">

        <?php $wp_query = new WP_Query( $args ); ?>

        <?php if ( $wp_query->have_posts() ) : ?>
          <?php while ( $wp_query->have_posts() ) : $wp_query->the_post(); ?>

            <li class="x-slide">
              <article <?php post_class( 'x-post-slider-entry' ); ?> style="<?php echo x_ethos_entry_cover_background_image_style(); ?>">
                <a href="<?php the_permalink(); ?>">
                  <div class="cover">
                    <div class="middle">
                    <div class="middle-bg">
                      <span class="featured-meta"><?php echo x_ethos_post_categories(); ?> / <?php echo get_the_date( 'F j, Y' ); ?></span>
                      <h2 class="h-featured"><span><?php x_the_alternate_title(); ?></span></h2>
                      <span class="featured-view"><?php _e( 'View Post', '__x__' ); ?></span>
                      </div>
                    </div>
                  </div>
                </a>
              </article>
            </li>

          <?php endwhile; ?>
        <?php endif; ?>

        <?php wp_reset_query(); ?>

      </ul>
    </div>

    <script>
      jQuery(window).load(function() {
        jQuery('.x-post-slider').flexslider({
          controlNav   : false,
          selector     : '.x-slides > li',
          prevText     : '<i class="x-icon-chevron-left" data-x-icon=""></i>',
          nextText     : '<i class="x-icon-chevron-right" data-x-icon=""></i>',
          animation    : 'fade',
          smoothHeight : true,
          slideshow    : true
        });
      });
    </script>

  <?php endif; ?>

<?php endif; ?>

Please add following code in Customize -> Custom -> Global CSS :

.middle-bg{
background-color:#000;
display:block;
overflow:hidden;
}

Hope it helps.

[kvtd]

Thanks – I am using a child theme and have added the above (sorry no link, still on dev box) but the above is not changing anything on the posts marked ‘featured post (big/skinny)’ when they appear on the blog index, which was my main goal.

After some searching it seems I also need to alter
_index-featured.php ???
in a similar way but not sure how.

thanks!

[Christopher]

Hi there,

I thought you want those changes on post slider.

You should create a file called _index-featured.php in the same directory and insert following code there:

<?php

// =============================================================================
// VIEWS/ETHOS/_INDEX-FEATURED.PHP
// -----------------------------------------------------------------------------
// Featured content output for the index pages.
// =============================================================================

$index_layout           = get_post_meta( get_the_ID(), '_x_ethos_index_featured_post_layout',  true );
$class                  = ( $index_layout == 'on' ) ? 'featured' : '';
$background_image_style = x_ethos_entry_cover_background_image_style();
$categories             = x_ethos_post_categories();

?>

<a href="<?php the_permalink(); ?>" class="entry-thumb <?php echo $class; ?>" style="<?php echo $background_image_style; ?>">
  <?php if ( $index_layout == 'on' && ! is_single() ) : ?>  
  	<div class="middle-bg">
    <span class="featured-meta"><?php echo $categories; ?> / <?php echo get_the_date( 'F j, Y' ); ?></span>
    <h2 class="h-featured"><span><?php the_title(); ?></span></h2>
    <span class="featured-view"><?php _e( 'View Post', '__x__' ); ?></span>
    </div>
  <?php else : ?>
    <span class="view"><?php _e( 'View Post', '__x__' ); ?></span>
  <?php endif; ?>
</a>

Please do not forget to add CSS code I provided in previous replay.

Thanks.

[kvtd]

Thank you very much!

[Prasant Rai]

You are most welcome. 🙂

[Author]

Posts