How to shorten top carousel height and lengthen carousel title?

[dogrescuer]

Top of page carousel, goals:

• reduce image heights to get more content above the fold
• remove meta data on hover
• increase title length as excerpt of title currently shown doesn’t convey meaning

I used css to get rid of metadata but when one hovers over an image, the image gets darker. That would work if the metadata were popping up, but without metadata, the darkening image gives the opposite of a “click me” signal.

[Alaa]

Hi @dogrescuer

If you want to achieve that, you can add this CSS code to (Theme Options > CSS):

.x-post-carousel.unstyled {
    height: 150px;
}
.x-post-carousel.unstyled .entry-cover {
    padding-bottom: 150px;
}
.h-entry-cover:before {
    display: none;
}
.x-post-carousel.unstyled .entry-cover:hover .h-entry-cover {
    top: calc(100% - 4em);
}
.h-entry-cover span {
    white-space: pre-wrap;
}

As this is all custom development, regretfully we wont be able to assist further. Custom development is outside the scope of our support. We are happy to provide advice and get you started in the right direction, but you would still be responsible for the implementation. And moreover, this solution may not work after several updates especially if the themes structure changed or overridden.

I’ll list below some CSS/HTML resources that should help you to carry on these modifications on your own in the future:

Thanks.