Docs

[ImpossibleDiG]

Awesome, I will take you up on that re: the carousel at the top of my site.

1. Can I reduce the size of the font on the overlay in the carousel?
2. Is there a way for me to have the text run to two lines on the overlay if I so chose?
3. Alternately, can I map the Alternative Index Title (under post settings) to the overlay, and remove it from the index mapping?
4. And finally, can I control what appears on the overlay hover state? For instance, if I’d rather have the full title of the post instead of author/category/date?

Thanks!!!! dig

[Rue Nel]

Hello There,

Thanks for the updates!

1] To reduce the font size on the overlay in the carousel, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

.x-post-carousel .h-entry-cover {
    font-size: 11px;
    font-weight: normal;
}

2] To have two line, you’ll need to use this code;

.x-post-carousel .h-entry-cover span {
    text-overflow: clip;
    white-space: normal
}

3] Please clarify. Regretfully, at this time I am not entirely certain what it is you would like to accomplish based on the information given in your post. If you wouldn’t mind providing us with a little more clarification on what it is you’re wanting to do (a link to a similar example site would be very helpful, or perhaps some screenshots), we’ll be happy to provide you with a response once we have a better understanding of the situation.

4] If you want to display the title when hover, what would be the display when not hovered? Since you already have your child theme active and ready, please insert this following code in your child theme’s functions.php file.

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 x_the_alternate_title() ?></span></h2>
        <div class="x-post-carousel-meta">
          <span class="entry-cover-title"><?php the_title(); ?></span>
        </div>
      </a>
    </article>

  <?php }

}

In the code above, the alternate title is displayed in the overlay. When you hover the carousel item, the full title will gets displayed.

We would loved to know if this has work for you. Thank you.

[ImpossibleDiG]

1. Perfect

2. Is there a way to center the text up and down (vertically)? In other words, have the two lines move up a bit, but only when it breaks to a second line or third line. If not, then I’d like the text to move higher in the overlay.

3. Let me answer this in #4.

4. Thanks for this! Now that I see what it looks like, let me share what I would like to do.

a) Have the top overlay pull from the post title (spacing, etc. resolved within #1 & #2)

b) Have the hover overlay pull from the alternate post title field

c) Format the hover overlay to allow for a full text field

d) This is where it got complicated last time. Because I’d like to use the alternate post title field for the hover overlay, I no longer want it to function as the alternate post title field. In other word, the only place it should show up is in the hover overlay – NOT as an alternate title in indexes.

That said, if there is another field we can map to the hover overlay, we can keep the alternate title field as is.

I hope that makes sense, and thanks!!!

dig

[Rue Nel]

Hello There,

2] To move up the entire overlay, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

.h-entry-cover {
    top: calc(100% - 6em);
}

4] Further customizations from here would be getting into custom development, which is outside the scope of support we can offer. If you need more in depth changes, you may wish to consult with a developer. X is quite extensible with child themes, so there are plenty of possibilities.

Thanks for understanding.

[ImpossibleDiG]

You all have been amazingly helpful, so I completely understand.

Let me ask this then. Could you help if I simply wanted the hover overlay to function like the featured image overlay on each post on the index page and show “View Post” (centered) upon hover?

thanks! dig

[Rupok]

Hi there,

Thanks for updating. It would be a bit complex and will fall under custom development. Further customizations from here would be getting into custom development, which is outside the scope of support we can offer. If you need more in depth changes, you may wish to consult with a developer. X is quite extensible with child themes, so there are plenty of possibilities. Thanks for understanding.

[ImpossibleDiG]

Understood.

FYI, I did tweak the code through a little trial and error and got it working the way I want, hopefully without creating unintended issues elsewhere. Basically, I changed the function.php code in the child theme to:

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 class="entry-cover-title"><?php the_title(); ?></span></h2>
	<div class="x-post-carousel-meta">
          <span class="entry-cover-title">View Post</span>
        </div>
      </a>
    </article>

  <?php }

}

And added the following code to the Global CSS…

.x-post-carousel-meta {
    padding-top: 40px;
}

Thanks again for all your help! I am SO loving this theme.

dig

[Christopher]

Glad to hear that you were able to fix this.

[ImpossibleDiG]

One final question here.

If I wanted to cap text on the carousel to two or three lines with ellipsis, how do I do that?

Previously, you all gave me code for this, but it doesn’t seem to cap the text, even after four lines of title testing.

Here was the previous code:

.x-post-carousel .h-entry-cover span {
    text-overflow: clip;
    white-space: normal
}

thanks! dig

[Christopher]

Hi there,

Currently the title is uppercase, if you want to capitalize it update your code to:

.x-post-carousel .h-entry-cover span {
    text-overflow: clip;
    white-space: normal;
    text-transform: capitalize;
}

Hope it helps.

[ImpossibleDiG]

Oops, I should have used clearer language!

I meant, if I want to LIMIT text to two or three lines with ellipsis within the carousel, how do I do that? Right now it runs seemingly without end.

thanks! dig

[Rad]

Hi there,

It’s not currently possible through CSS.

Thanks!

[ImpossibleDiG]

Ah.. so it’s either one line or all the text.

thanks! dig

[Joao]

You are welcome.

Let us know if we can help you with anything else.

Joao

[Author]

Posts