How can I code a solid green box around slideshow text?

Technical Q&A
1

Hi all,

Need some help figuring this out. We have a slideshow right at the top of our page with text that is in white on our custom background, see attached image or visit our site. The text is really hard to see so we were wondering if it would be possible to some how code a solid green (#007052) box around them to help them stand out more. Our current theme is Narrative.

Been trying to figure this out for days. Any help would be greatly appreciated.

Iris the Dragon

Screen Shot 2021-06-08 at 1.30.57 PM.png
Screen Shot 2021-06-08 at 1.30.57 PM.png2854×1266 298 KB

2

@IrisTheDragon It seems that you have found the solution.

3

@Hardik29418 Would it be possible to put an actual box behind it though? Like you may see in the “learn more” box below it. Right now it just looks like the text has been highlighted. It looks better but still not as clean.

Any help would be great.

4

@IrisTheDragon

Please Go to Online Store → Themes → Edit code → Assets → theme.scss.liquid and paste this code at the end of this file.

.slideshow__button-label  {
    background-color: #007052;
    border-radius: 0;
    color: #fff;
    border: 2px solid #007052;
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-decoration: none;
}

.slideshow__button-label :hover {
opacity: 1 !important;
}
5

Looks great @Hardik29418 . Really appreciate the help.

6

@IrisTheDragon Thank you for the update.