Customising Summary Block and Testimonial Carosel

Hello brilliant web-builders! Is there any way to make the below customization possible?

A) Summary Block:

1. Images to be displayed in circular shape, instead of the retangular or sqaure from the options under "Design" of the block
    
2. Move the order of the display layout from "Image > (Blog) Title > Excerpt Text" to "Excerpt Text > (Blog) Title > Image"?

B) Testimonial Carousel:  

1. Move the order of the display layout of all blocks in the carousel from "Image > Text > Title" to "Text > Title > Image"?
    
2. Set / change the timer of the auto slider to move every 5 seconds
    

Thanks a million! Freeman xx

Site URL: https://www.traveltotransform.com/the-book

A. #1. #2. Which Summary Block are you referring to?

B. 1. Move this?

Yes Tuan, the screenshot you have is the Summary Block I'm referring to. I need the Excerpt (text with the quotation marks) to be moved above the image though, not the Title.

P.S. I managed to sort A#1 now but not #2 to rearrange the layout.

Many thanks xx

Add to Design > Custom CSS

@media screen and (min-width:992px) {
div#block-yui_3_17_2_1_1671854349186_13556 .summary-item {
    position: relative;
    padding-top: 250px;
}
div#block-yui_3_17_2_1_1671854349186_13556 .summary-content {
    position: absolute;
    top: 0;
}
}

On 2/15/2023 at 8:28 PM, tuanphan said:

Add to Design > Custom CSS

@media screen and (min-width:992px) {
div#block-yui_3_17_2_1_1671854349186_13556 .summary-item {
    position: relative;
    padding-top: 250px;
}
div#block-yui_3_17_2_1_1671854349186_13556 .summary-content {
    position: absolute;
    top: 0;
}
}

Thanks Tuan! I actually need only the excerpt to be positioned on top, but the title/name and the stars still position underneath the images. If this is possible?

On 2/20/2023 at 6:55 PM, freedomfung852 said:

Thanks Tuan! I actually need only the excerpt to be positioned on top, but the title/name and the stars still position underneath the images. If this is possible?

You mean move this only?

On 2/25/2023 at 9:11 PM, tuanphan said:

You mean move this only?

Hi Tuan, yes that's correct - only moving the "An inspiring read...beautifully." text to be above the image, while the position of the rest stays the same.

Thanks again
Freeman

On 3/14/2023 at 4:42 AM, freedomfung852 said:

Hi Tuan, yes that's correct - only moving the "An inspiring read...beautifully." text to be above the image, while the position of the rest stays the same.

Thanks again
Freeman

Try this new CSS code

#block-yui_3_17_2_1_1671854349186_13556 .summary-title {
    position: absolute;
    top: -33px;
    left: 0;
    width: 100%;
}
#block-yui_3_17_2_1_1671854349186_13556 .summary-item {
    position: relative;
}

1 hour ago, tuanphan said:

Try this new CSS code

#block-yui_3_17_2_1_1671854349186_13556 .summary-title {
    position: absolute;
    top: -33px;
    left: 0;
    width: 100%;
}
#block-yui_3_17_2_1_1671854349186_13556 .summary-item {
    position: relative;
}

 

Ahhhh this code must be very close...! Just need the main text to go to the above instead of the title text!

Although it does seem to create another issue too when I switch to mobile mode to view this, where the title texts are now overlapping with the image.

Any thoughts please? 🙂

On 3/16/2023 at 5:45 PM, freedomfung852 said:

Ahhhh this code must be very close...! Just need the main text to go to the above instead of the title text!

Although it does seem to create another issue too when I switch to mobile mode to view this, where the title texts are now overlapping with the image.

Any thoughts please? 🙂

Ah I forgot, use this new code, we can add more code to adjust mobile then

div#block-yui_3_17_2_1_1671854349186_13556 .summary-item {
    position: relative;
}
#block-yui_3_17_2_1_1671854349186_13556 .summary-excerpt p:not(:first-child) {
    position: absolute;
    top: 0;
}

#block-yui_3_17_2_1_1671854349186_13556 .summary-thumbnail-outer-container {
    padding-top: 200px;
}