Colourshift 2 Slideshow: readmore overlay covers second line of title

ssartjb

Background: In this project where I am making some significant changes to the layout of a website built in Colourshift2 about a year ago I am also upgrading the to the latest version of Buildr.

The orignal live website is here: https://saintsabina.org . The development website is here: https://saintsabina2018test.cloudaccess.host/

In the new version of the website I am placing two modules in the Banner position. One is the Zen Tools 2 slideshow and one is a Zen Tools 2 grid. The new slideshow stretches across 8 instead of all 12 of the grid.

In the screenshot you can see what it looks like. I have content titles that occupy two lines. The blue overlay ( I think is associated with the readmore is covering the second line of the title. How can Change that and still keep the readmore beneath the title?

Here is the custom CSS modified slightly from some Paul gave me about a year ago. I would prefer that the blue overlay not extend so far beneath the readmore button but I added the extra ems to the padding to push the readmore beneath the title.

/slideshow text background/

.backstretch-wrapper .zt-title h2, .backstretch-wrapper .zt-text-intro {background: rgba(003, 087, 160, 0.5); }

.backstretch-wrapper .zt-readmore {background: rgba(003, 087, 160, 0.5); }

@media screen and (min-width: 620px) {
#bannerwrap .colourshift .backstretch-title {width: 100%;}
}
#bannerwrap .colourshift .backstretch-title .zt-title * {text-align:center;}

#bannerwrap .colourshift .backstretch-title .zt-readmore {margin:0; padding:4.25em;}

aman204

Here is the css rule-set through which you are having the background color which is appearing beneath read-more tab :

.backstretch-wrapper .zt-readmore {background: rgba(003, 087, 160, 0.5); }

I would prefer that the blue overlay not extend so far beneath the readmore button

You can change the margin and padding value accordingly like suitably changing it to margin: 5em 0;
padding: .25em; should get around the desired results :

#bannerwrap .colourshift .backstretch-title .zt-readmore {margin:0; padding:4.25em;}

ssartjb

aman204

Thanks. I think what might end up getting me the effect I want will be adjusting the bottom margin and padding of the overlay behind the title so that it extends behind the "readmore ' . Otherwise the effect does not work so well responsively. A gap appears at some widths

paulus1031

Just checking but you have an empty intro text field and with this set up and the overlays overlap

Cheers
Paul

ssartjb

paulus1031

Thanks . I forgot to remove that.

paulus1031

I can see why the site has the current effect like it has as otherwise the problem is the height

Absolute positioning means the content height really affects where the overlay displays so as screen width changes or the text breaks to new lines it becomes a problem

Cheers
Paul

ssartjb

paulus1031

Right, that makes sense . This is modified code that you set up for the original slideshow at https;//saintsabina.org. Foe some reason the positioning works there. I really done want to have th overlay the whole image but maybe a band across the middle that is about 1/3 of the image could work .

aman204

ssartjb I really done want to have th overlay the whole image but maybe a band across the middle that is about 1/3 of the image could work

To be more precise and avoid confusion/ambiquity in addressing your query, Can you provide screenshot marked with annotations as to how you wished to have it seen

paulus1031

I think you want to have these styles

/slideshow text background/

.backstretch-wrapper .zentools.backstretch-title {background: rgba(003, 087, 160, 0.5); }

@media screen and (min-width: 620px) {
#bannerwrap .colourshift .backstretch-title {width: 100%;}
}
#bannerwrap .colourshift .backstretch-title .zt-title * {text-align:center;}

#bannerwrap .colourshift .backstretch-title .zt-readmore {margin: 3.25em 0; padding: 3.5em;}

If not can add the screenshot as suggested by aman

Cheers
Paul

ssartjb

paulus1031

Thank you, Paul. Still tweaking. I'll get back to you when I am ready.

Sharon

paulus1031

Good luck with the tweaking

ssartjb

I have decide i need to make a big change after looking at the slideshow now that I have a 4 image grid directly aside of it. The overall look is too busy. What I think will look best now is have the overlay cover the entire slide.

How hard would this be to do?

paulus1031

Do you mean something like

#zentools-645 .slideshow-nav-container {background: rgba(003, 087, 160, 0.5); }

Cheers
Paul

ssartjb

paulus1031

I want the whole slide covered but only when the Title and readmore is pulled in, so the event would be triggered by the title and readmore. First you see the photo without any overlay then the title and readmore come in with the whole image covered by the overlay.

best,
Sharon

aman204

ssartjb In order to get the exact desired result as envisaged, I am afraid that this will require custom coding which is beyond level of support as this is more of customization request. In order to adapt background color spanning read-more and title while getting trigged, You can try add this to css file :

#bannerwrap .colourshift .backstretch-title ul{background: rgba(003, 087, 160, 0.5);}

or adding this :

#bannerwrap .colourshift .backstretch-title li.active,#bannerwrap .colourshift .backstretch-title li.active .zt-readmore{background: rgba(003, 087, 160, 0.5);}

and remove this :

#zentools-645 .slideshow-nav-container {
    background: rgba(003, 087, 160, 0.5);
}

paulus1031

Hi Sharon,

I'd echo what Aman said on his post

I also note this style is causing the title to overlap the buttons so the navigation arrows are not clickable

@media screen and (min-width: 620px) {
#bannerwrap .colourshift .backstretch-title {width: 100%;}
}

Cheers
Paul

ssartjb

Thank you - Both. I'll try Aman's suggestion and let you know what I finally decide.

Sharon

paulus1031

Best of luck

Cheers
Paul