Customize the ethos1 carrousel

Support
#1

hi
where can i customize the carrousel of the home page in ethos1
example the size of each post, the info in the carrousel… like this

thanks

#2

Hi There,

Thanks for writing in! All the available options can be accessed through Appearance -> Customize -> Ethos section. You will see sections with the heading of Post Carousel.

Hope that helps.

#3

that section show only how to display or not carrousel and the number of post for each screen resolution
what i want is
1- to change the size of the carousel post as in the image above - means not all post width are equal
2- change the appearance of the titel, author, text… as in the image
thanks

#4

Hi there,

Based on the screenshot that you have provided, this involves some customization. To get you started, you can add this code in the functions.php file of the child theme:

// Entry Cover
// =============================================================================

if ( ! function_exists( 'x_ethos_entry_cover' ) ) :
  function x_ethos_entry_cover( $location ) {

    if ( $location == 'main-content' ) { ?>

      <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
        <a class="entry-cover" href="<?php the_permalink(); ?>" style="<?php echo x_ethos_entry_cover_background_image_style(); ?>">
          <h2 class="h-entry-cover"><span><?php x_the_alternate_title(); ?></span></h2>
        </a>
      </article>

    <?php } elseif ( $location == 'post-carousel' ) { ?>

      <?php GLOBAL $post_carousel_entry_id; ?>

      <article <?php post_class(); ?>>
        <a class="entry-cover" href="<?php the_permalink(); ?>" style="<?php echo x_ethos_entry_cover_background_image_style(); ?>">
          <h2 class="h-entry-cover"><span><?php ( $post_carousel_entry_id == get_the_ID() ) ? the_title() : x_the_alternate_title(); ?></span></h2>
          <div class="x-post-carousel-meta">
            <span class="entry-cover-author"><?php echo get_the_author(); ?></span>
            <span class="entry-cover-categories"><?php echo x_ethos_post_categories(); ?></span>            
          </div>
        </a>
      </article>

    <?php }

  }
endif;

That is the code that controls what is displayed on the post carousel, you can add the things that you want to be placed on the carousel that is not there out of the box like the post excerpt. You can do this by inserting this code in the code above:

<span><?php the_excerpt(); ?></span>

As for changing the size of the title, author, text, you can add a custom CSS using the following selectors:

.h-entry-cover {
    /* Add the CSS for the title text */
}

.entry-cover-author {
    /* Add the CSS for the author text*/
}

You will have to add further customization aside from what are suggested above which falls under custom development that is outside the scope of support we can offer. You may wish to consult a developer to assist you with this. X is quite extensible with child themes, so there are plenty of possibilities.

Thanks for understanding. Take care!

#5

ok thanks
i’m trying customizing but cant find the gray background class with transparency i want to change it

#6

Hi,

To change it, you can add the code below in Theme Options > Custom CSS (global css)


.entry-cover:hover .h-entry-cover:before {
    background-color: rgba(0,0,0,0.75);
}

.h-entry-cover:before {
   background-color: rgba(0,0,0,0.5);
}

You can generate rgba color from the link below

http://www.cssportal.com/css3-rgba-generator/

Hope that helps.

#7

in the fonction.php child theme
i added 2 spans for the cover entry but the result is not the same for all the posts as below

3rd post is good 1st and 2nd not good

here is the code

// Entry Cover
// =============================================================================
if ( ! function_exists( 'x_ethos_entry_cover' ) ) :
  function x_ethos_entry_cover( $location ) {
if ( $location == 'main-content' ) { ?>
  <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    <a class="entry-cover" href="<?php the_permalink(); ?>" style="<?php echo x_ethos_entry_cover_background_image_style(); ?>">
      <h2 class="h-entry-cover"><span class="h-entry-cover-title"><?php x_the_alternate_title(); ?></span>
        <span class="entry-cover-author"><?php echo get_the_author(); ?></span>
        <span class="entry-cover-date"><?php echo get_the_date( 'F j, Y' ); ?></span>
       </h2>           
    </a>
  </article>
<?php } elseif ( $location == 'post-carousel' ) { ?>
  <?php GLOBAL $post_carousel_entry_id; ?>
  <article <?php post_class(); ?>>
    <a class="entry-cover" href="<?php the_permalink(); ?>" style="<?php echo x_ethos_entry_cover_background_image_style(); ?>">
      <h2 class="h-entry-cover"><span class="h-entry-cover-title"><?php ( $post_carousel_entry_id == get_the_ID() ) ? the_title() : x_the_alternate_title(); ?></span>
        <span class="entry-cover-author"><?php echo get_the_author(); ?></span>
        <span class="entry-cover-date"><?php echo get_the_date( 'F j, Y' ); ?></span>  
        <span class="entry-cover-summary"><?php the_excerpt(); ?></span>
       </h2>          
      <div class="x-post-carousel-meta">
        <span class="entry-cover-author"><?php echo get_the_author(); ?></span>
        <span class="entry-cover-categories"><?php echo x_ethos_post_categories(); ?></span>            
      </div>
    </a>
  </article>
<?php }
  }
endif;

thanks

#8

Hi there,

Please kindly consider that this goes under the customization category and we can not give suggestions for the code which you have added for the customization.

The changes may be is caused because of different tags inside the Excerpt for those posts. Please kindly consider that anything may go inside the Excerpt and it will be hard to maintain a good view of the carousel as you do not know what will be there.

Unless you normalize all the excerpts and use simple coding such as: <p>THE EXCERPT CONTENT</p>. Even for that, the span tag is not suitable for wrapping the content. As the span tag is an inline element and inside the excerpt uses block level. You need to change that to div.

Unfortunately, further assistance is not possible as this is pure customization, but you can get paid services from 3rd party freelancers in the X Facebook User Group.

Thank you for your understanding.

#9

sorry for bothering i’m new and i’m trying to do my best.
thanks anyway for your precious help

#10

i think this question in not under cutomization :slight_smile:
how can i change the carousel height
i found that if i change the height in .x-post-carousel.unstyled the post will not chnage height
thanks

#11

Hi there,

To override the default height of the post carousel, you will have to increase the value of the bottom padding like:

.x-post-carousel.unstyled .entry-cover {
    padding-bottom: 380px;
}

Hope this helps.

#12

thanks a lot that was great

#13

You’re welcome.

#14

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