Have your say in Community Polls: What was/is your greatest motivation to start your own business?

Make image banner text OPAQUE

Make image banner text OPAQUE

edwinsoltan
Excursionist
44 0 13

Hello, I want to make the text solid (opaque) in the image banner section. Can someone help me?

 

Theme: DAWN

Section: Image banner (standard)

REFERENCE: www.timecraft.se , bottom page

Replies 10 (10)

BSSCommerce-B2B
Shopify Partner
1969 564 566

@edwinsoltan, you want this?

BSSCommerceB2B_0-1728819912436.png

If so follow these steps

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag:

<style>
.ab-banner-content-template--23635290161500__ss_video_banner_89BQey {
   opacity: 0.6!important;
}
</style>

If it helps you, please like and mark it as the solution.

Best Regards 😊

B2B Wholesale Solution: Streamline your B2B operation with advanced features like wholesale registration forms, custom pricing.


B2B Portal, Quote, Net 30: Speed up purchasing and streamline your quotation process with advanced features like quick order, request for quote.


B2B Lock Password Protect: Easily control access to pages, products, and pricing with robust features.


BSS Commerce - Full-service eCommerce Agency I Use Shopify for 1$ in the first month now

edwinsoltan
Excursionist
44 0 13

Hi, sorry for the misunderstanding. I want the text on the image banner to be solid and not transparent. If you scroll down on my store, you will see a banner with two watches, and the text there is transparent.

BSSCommerce-B2B
Shopify Partner
1969 564 566

@edwinsoltan, You mean this section

BSSCommerceB2B_0-1728821081225.png

If so, change the previous code like this

<style>
#Banner-template--23635290161500__image_banner_npygHa .banner__box {
   opacity: 1!important;
}
</style>

 

B2B Wholesale Solution: Streamline your B2B operation with advanced features like wholesale registration forms, custom pricing.


B2B Portal, Quote, Net 30: Speed up purchasing and streamline your quotation process with advanced features like quick order, request for quote.


B2B Lock Password Protect: Easily control access to pages, products, and pricing with robust features.


BSS Commerce - Full-service eCommerce Agency I Use Shopify for 1$ in the first month now

edwinsoltan
Excursionist
44 0 13

but i want the background of the text to be transparent as before but the text solid.

BSSCommerce-B2B
Shopify Partner
1969 564 566

@edwinsoltan, sorry for replying late. You fixed that?

B2B Wholesale Solution: Streamline your B2B operation with advanced features like wholesale registration forms, custom pricing.


B2B Portal, Quote, Net 30: Speed up purchasing and streamline your quotation process with advanced features like quick order, request for quote.


B2B Lock Password Protect: Easily control access to pages, products, and pricing with robust features.


BSS Commerce - Full-service eCommerce Agency I Use Shopify for 1$ in the first month now

edwinsoltan
Excursionist
44 0 13

its okay! i change it. But if you can, is there any code to adjust the image size for mobile only?

BSSCommerce-B2B
Shopify Partner
1969 564 566

@edwinsoltan, try this one

 

<style>
@media screen and (max-width: 768px) {
#Banner-template--23635290161500__image_banner_npygHa img {
   position: relative;
   height: 100%;
}
}
</style>

 

Result

BSSCommerceB2B_0-1728828582354.png

B2B Wholesale Solution: Streamline your B2B operation with advanced features like wholesale registration forms, custom pricing.


B2B Portal, Quote, Net 30: Speed up purchasing and streamline your quotation process with advanced features like quick order, request for quote.


B2B Lock Password Protect: Easily control access to pages, products, and pricing with robust features.


BSS Commerce - Full-service eCommerce Agency I Use Shopify for 1$ in the first month now

edwinsoltan
Excursionist
44 0 13

where should i put it? I put it in theme.liq file above the body and changed the number to 200% but nothing happened.

BSSCommerce-B2B
Shopify Partner
1969 564 566

@edwinsoltan , i see you put it and it's working

Why don't you use 100% height? 

BSSCommerceB2B_0-1728830912541.png

B2B Wholesale Solution: Streamline your B2B operation with advanced features like wholesale registration forms, custom pricing.


B2B Portal, Quote, Net 30: Speed up purchasing and streamline your quotation process with advanced features like quick order, request for quote.


B2B Lock Password Protect: Easily control access to pages, products, and pricing with robust features.


BSS Commerce - Full-service eCommerce Agency I Use Shopify for 1$ in the first month now

edwinsoltan
Excursionist
44 0 13

Yes, I tried, and it looks good, but I meant how can I expand the entire image banner on mobile to make the whole section longer? Also, thank you for all the help I have received so far.