Solved

Change the colors of image with text overlay without change the others colors - Debut Theme

SalomãoBraga
New Member
9 0 0

Screen Shot 2020-07-22 at 18.01.30.png

 I want to make this background white, and the letters black... But when I swipe the colors, swipe the colors of this too... And I dont want this. Thank you. 

 

Screen Shot 2020-07-22 at 18.03.50.png

Accepted Solution (1)
oscprofessional
Shopify Partner
15830 2369 3072

This is an accepted solution.

To reduce space between the "Envio imediato" and " Coleções"..
Add this css at the bottom of
Online Store->Theme->Edit code->Assets->theme.scss.liquid

div#shopify-section-1594482261095 {
    padding-bottom: 10px;
}
div#shopify-section-1595209190882 {
    padding-top: 10px;
}
Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing

View solution in original post

Replies 28 (28)

oscprofessional
Shopify Partner
15830 2369 3072

Hello,
Please share your site url.
So that i can check and let you know the exact solution here.

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
SalomãoBraga
New Member
9 0 0

Sorry.

 

biproencastore.com

 

oscprofessional
Shopify Partner
15830 2369 3072

Hello,
Add this css at the bottom of
Online Store->Theme->Edit code->Assets->theme.scss.liquid

div#shopify-section-1594482261095 .hero__overlay::before {
    background-color: white;
    opacity: 1;
}
div#shopify-section-1594482261095 h2.h1.mega-title {
    color: black;
}
div#shopify-section-1594482261095 .mega-subtitle p {
    color: black;
}
Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
SalomãoBraga
New Member
9 0 0

That works perfecty! Just a little detail: The word came with a little shadow behind them... like this.

 

Screen Shot 2020-07-24 at 00.14.18.png

Another question, there is a lot of space between the "Envio imediato" and " Coleções"..


Can I correct this?

 

Screen Shot 2020-07-24 at 00.25.16.png

 

I would like to make the same thing here too.. 


Thanks

oscprofessional
Shopify Partner
15830 2369 3072

To remove text shadow.
Add this css at the bottom of
Online Store->Theme->Edit code->Assets->theme.scss.liquid

div#shopify-section-1594482261095 h2.h1.mega-title {
    text-shadow: none;
}
div#shopify-section-1594482261095 .mega-subtitle p {
    text-shadow: none;
}
Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
oscprofessional
Shopify Partner
15830 2369 3072

This is an accepted solution.

To reduce space between the "Envio imediato" and " Coleções"..
Add this css at the bottom of
Online Store->Theme->Edit code->Assets->theme.scss.liquid

div#shopify-section-1594482261095 {
    padding-bottom: 10px;
}
div#shopify-section-1595209190882 {
    padding-top: 10px;
}
Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
SalomãoBraga
New Member
9 0 0

THANK YOU SO MUCH! It worked nice!

Just a little detail, can you help with the black background on the bottom of my site? Do the same as we did on top?

 

Thanks

oscprofessional
Shopify Partner
15830 2369 3072

Add this css at the bottom of
Online Store->Theme->Edit code->Assets->theme.scss.liquid

div#shopify-section-1594481335117 .hero__overlay::before {
    background-color: white;
    opacity: 1;
}
div#shopify-section-1594481335117 h2.h1.mega-title {
    color: black;
    text-shadow: none;
}
div#shopify-section-1594481335117 .mega-subtitle p {
    color: black;
    text-shadow: none;
}
div#shopify-section-1594481335117 .mega-subtitle a {
    color: black;
}
Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
NateX
Shopify Partner
43 3 11

Can you also help me add overlay on the text "Shaping the Future Of Fashion" header? or how to change the text into white?

Site: https://www.sewsewyou.com/

NateX_0-1634793262762.png

 

Nate
Shopify Web Developer
oscprofessional
Shopify Partner
15830 2369 3072

Yes.
You can add the code in theme.css file.


.site-box-content .content {
    background-color: rgba(0, 0, 0, 0.2);
}
.site-box-content .content p, .site-box-content .content h2 {
    color: #fff !important;
}

 

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
paulwhiskers
Tourist
3 0 0

Hey there,

 

I'm having the same issue here. I'd like to change the Heading and Body text color to black #000000, as the white obviously bleeds into the background image. I'm using the Showcase Theme and it's still unpublished as this is just a new site update. Will the link still be helpful? Link here: https://www.whiskerslaces.com/

Screen Shot 2022-07-18 at 3.09.31 PM.png

NateX
Shopify Partner
43 3 11

No, since the theme is not publish, we won't be able to see the code for you to change it. Put it on live so we can help you or give us un access to your liquid files.

Nate
Shopify Web Developer
paulwhiskers
Tourist
3 0 0

Thanks Nate! So our site is live now, and I'd like to change the background of this gallery section to black #000000. The theme is Showcase. Any chance I could get a little help there?

 

URL: https://www.whiskerslaces.com/

 

Screenshot: Screen Shot 2022-08-11 at 1.39.37 PM.png

 

Thank you!!

NateX
Shopify Partner
43 3 11

Sure,

 

If that cannot be done in customizer, you can go to your backend liquid files.

 

Go to online store > Themes > Select the live theme > Action > Edit code >Asset. From here you'll see the asset folder then find this file "styles.css"

 

This should show where the file is...

 

Files.PNG

 

 

 

 

 

 

 

 

 

 

 

 

Then find this code or just paste this below to the entire code

 

@media (min-width: 768px) {
     .section-gallery .cc-gallery {
         background-color: black;
     }

}


Shopify Sample.png

 

Nate
Shopify Web Developer
paulwhiskers
Tourist
3 0 0

Thank you!! This seems like it should be an option under "Customize" without changing all of the colors on the page. But anyways, this was super helpful so thank you!

Kamil7
Tourist
6 0 0

Hey, would you like to help me with the same problem? I need Top site black text and bottom site white text

url: https://braster-uk.myshopify.com/?key=992d820eb404b855ebc4880487252c04062eba588580655e131d10bd5e33e2...

oscprofessional
Shopify Partner
15830 2369 3072

Hello Kamil7,
Please share the screenshot.

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
Kamil7
Tourist
6 0 0

Kamil7_0-1611407488297.png

Kamil7_1-1611407522873.png

 

oscprofessional
Shopify Partner
15830 2369 3072

Add this css at the bottom of
Online Store->Theme->Edit code->Assets->theme.css.liquid

div#shopify-section-hero-1 h2.h1.mega-title {
    color: black;
    text-shadow: none;
}
div#shopify-section-hero-1 .mega-subtitle p {
    color: black;
    text-shadow: none;
}
Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
Kamil7
Tourist
6 0 0

Perfect, thanks you! 

Kamil7
Tourist
6 0 0

One more thing, just about button colors. "Buy braster online" should be red text and white Primary button. "Take care of your breasts!" on the product page is finehe.png

oscprofessional
Shopify Partner
15830 2369 3072

Add this css

#shopify-section-1611071994f541c216 a.btn.hero__btn {
    background-color: white;
    color: red;
}


Change the color as per your choice.
Hope this will work for you.
Thanks....

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
christellek
Visitor
3 0 0

Hello, 

 

I'm having the same issue for the Debut Theme. I would like to make the text black in the image with text overlay section without editing the rest of my page. 

I tried implementing this solution on my theme, but i couldn't find the "theme.scss.liquid" part in the code. It's like inexistant. Could you please help me out? 

 

Thanks! 

oscprofessional
Shopify Partner
15830 2369 3072

Hello christellek
Please share your site url and screenshot.
So that I can check and let you know the exact solution here.

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
christellek
Visitor
3 0 0

Here it is: https://dd9ywwmjplokxd30-52957413552.shopifypreview.com

 

and this is the screenshot: 

christellek_0-1617870698422.png

 

I want to turn them black and with a slightly bigger font size, and without the shadow in the back of the font.. 

 

oscprofessional
Shopify Partner
15830 2369 3072

Add this css at the bottom of
Online Store->Theme->Edit code->Assets->theme.css.liquid

#shopify-section-hero-1 .rte-setting.mega-subtitle p {
    color: #000 !important;
    text-shadow: none;
    font-size: 24px;
}
@media only screen and (max-width: 749px){
#shopify-section-hero-1 .rte-setting.mega-subtitle p {
    font-size: 22px;
}
}
Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
christellek
Visitor
3 0 0

Okay thanks! But which one is the theme.css.liquid as the only thing i could find are these: 

christellek_0-1617871628258.png

 

oscprofessional
Shopify Partner
15830 2369 3072

Yes, add the given css code at the bottom of that theme.css.liquid file.

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing