Help with text background color in text over images in Debut theme

MPDesigns
New Member
8 0 0

 

I am trying to create a background color for my text that resides over images in the Debut

Right now the text is white and not easy to read so a contrast background color behind the letters is desirable.

Really appreciate any help. It's in the slide show at the top and in the collections at the bottom.

mp textissue2.jpgmp textissue3.jpg

Replies 9 (9)

Vortifytech
Shopify Partner
51 8 9

Hi @MPDesigns  !
Kindly share url 

Or

Open code editor

Look for a specific section file.

Find class with the help of inspection. 

Do some styling on that specific class of text in banner. 

.class{
backgroun: #000;
opacity: 0.5;  or 0.3;  or 0.4;  use opacity that make text section look. 
}
Or use 
.class{
backgroun: #FFFFFF;
color: #000;
}

for better look!
Do you need Shopify experts?Get in touch on WhatsApp
Expertise in (Theme Development | Customization | Modifications | Bug Fixing and much more )
Blending Your Coffee advice with My Code, a Perfect Mix!
Transforming Your Shopify Aspirations into Reality – Join the Conversation and Craft Together Visit our site
MPDesigns
New Member
8 0 0

I will try that.

madelineparksdesigns.com

MPDesigns
New Member
8 0 0

I tried to find the .class but wasn't able to. I am still learning. Really appreciate you helping me learn.

Vortifytech
Shopify Partner
51 8 9

I found the solution of code, but it will need to add some new classes so that it will be done. 
find class (slideshow__text-content) after this line there will be ( page-width ) add any class to this "div" where "page-width" contained. 

Then add styling on new added class

 

Or use just this style

.slideshow__text-content ul h2{
color: #000;

}
.xyz{

background: #FFFFFF;

opacity: 0.9;

}

 

Do you need Shopify experts?Get in touch on WhatsApp
Expertise in (Theme Development | Customization | Modifications | Bug Fixing and much more )
Blending Your Coffee advice with My Code, a Perfect Mix!
Transforming Your Shopify Aspirations into Reality – Join the Conversation and Craft Together Visit our site
Vortifytech
Shopify Partner
51 8 9

edfe.JPG

Do you need Shopify experts?Get in touch on WhatsApp
Expertise in (Theme Development | Customization | Modifications | Bug Fixing and much more )
Blending Your Coffee advice with My Code, a Perfect Mix!
Transforming Your Shopify Aspirations into Reality – Join the Conversation and Craft Together Visit our site
Vortifytech
Shopify Partner
51 8 9

Hope you got it

If this issue resolved mark it as complete

Thanks or read the blow description

Thanks

Regards, 

Vortifytech

Do you need Shopify experts?Get in touch on WhatsApp
Expertise in (Theme Development | Customization | Modifications | Bug Fixing and much more )
Blending Your Coffee advice with My Code, a Perfect Mix!
Transforming Your Shopify Aspirations into Reality – Join the Conversation and Craft Together Visit our site
MPDesigns
New Member
8 0 0

I did get it to work for the top slide show! Thank you .  There is one more section of the page with the same issue.

It is in collections. 

<div class="collection-grid-item__title h3">

 

mp textissue2.jpg

Fair Trade Leather Purses

</div>

 

How would I modify the style example

.xyz{

background: #FFFFFF;

opacity: 0.9;

}

MPDesigns
New Member
8 0 0

One issue now .

That slideshow had 4 images. But only the first image plays. The slideshow no longer works with the style code added. It used to autoplay.

Now it does not auto play. And none of the 4 buttons work either.

style.jpg

ZenoPageBuilder
Shopify Partner
1052 202 217

Hello @MPDesigns 👋

If I understand correctly, you want to add text shadow. In Shopify Admin, go to Edit theme code, open file theme.css and add this code at the bottom

.collection-grid-item__title {
    text-shadow: 0px 0px 4px #FF0000 !important;
}

The result

Screenshot 2024-01-13 at 10.30.05.png

You can change shadow color in the code.

Zeno Page Builder - Build responsive & SEO-optimized Landing pages, Blog posts, Product pages and more...
Learn more at zenobuilder.com