Multi color text on image banner (Sense Theme 13.0.0)

Solved

Multi color text on image banner (Sense Theme 13.0.0)

Safeer
Visitor
2 0 0

My question is regarding the image below

Theme: Sense 13.0.0
This is my store, i want 1 little customization 

the text on the left side of the banner (all the text inside the yellow box) i want it to be of White color and the text on the right side of the banner i want it to be of Black Color.

how can i do this as i don't know coding! 

Please help me out!

Screen Shot 2024-02-11 at 4.15.20 PM.png

Accepted Solution (1)

Spac-es
Shopify Partner
384 111 135

This is an accepted solution.

I would have liked to have been able to make the change you mentioned, however, after trying out several JavaScript codes, I haven't been able to achieve the desired effect. Adjusting the text and button colors depending on which side of the viewport they are on is quite a complex challenge. There is a way to do it with HTML, but you would need to create fragments and render them, which obviously is quite tedious to do without access to the source code.

After many attempts, I decided to help by simply improving the readability of the section in general. It's not the change you wanted, but it might help:

 

Add this code in your base.css file:

h2.banner__heading.inline-richtext.h2 {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.banner__text.rte.subtitle {
  color: lightcyan !important;
  text-shadow: -3px 0px 5px rgba(0, 0, 0, 0.5);
}

.button:before, .shopify-challenge__button:before, .customer button:before, .shopify-payment-button__button--unbranded:before, .shopify-payment-button [role=button]:before, .cart__dynamic-checkout-buttons [role=button]:before {
  background-color: rgba(0,0,0,.7);
  border: 1px solid;
}

.button--secondary:after {
  --color-button: #fff !important;
}

a.button.button--secondary {
  color: white !important;
}

Result:

9.PNG

 

 

Any donation is welcome! https://www.buymeacoffee.com/spacescoffee Thanks in advance!

View solution in original post

Replies 3 (3)

Spac-es
Shopify Partner
384 111 135

This is an accepted solution.

I would have liked to have been able to make the change you mentioned, however, after trying out several JavaScript codes, I haven't been able to achieve the desired effect. Adjusting the text and button colors depending on which side of the viewport they are on is quite a complex challenge. There is a way to do it with HTML, but you would need to create fragments and render them, which obviously is quite tedious to do without access to the source code.

After many attempts, I decided to help by simply improving the readability of the section in general. It's not the change you wanted, but it might help:

 

Add this code in your base.css file:

h2.banner__heading.inline-richtext.h2 {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.banner__text.rte.subtitle {
  color: lightcyan !important;
  text-shadow: -3px 0px 5px rgba(0, 0, 0, 0.5);
}

.button:before, .shopify-challenge__button:before, .customer button:before, .shopify-payment-button__button--unbranded:before, .shopify-payment-button [role=button]:before, .cart__dynamic-checkout-buttons [role=button]:before {
  background-color: rgba(0,0,0,.7);
  border: 1px solid;
}

.button--secondary:after {
  --color-button: #fff !important;
}

a.button.button--secondary {
  color: white !important;
}

Result:

9.PNG

 

 

Any donation is welcome! https://www.buymeacoffee.com/spacescoffee Thanks in advance!
Safeer
Visitor
2 0 0

I'm not a developer but heres just a random thought

 

What if we can select 

"Embrace the Evolution" and "Discover a world of sophistication and style. F" and "Enjoy hassle-free shopping with eas"  and convert it to white color text (FFFFFF) by coding and likewise select "of Trend Identification" and "rom tech gadgets to captivating home decor." and "y refunds and personalized delivery." and convert it to black color text (000000) and same goes for the buttons.

 

If its possible than great but if not then the code you provided above is more than 500 characters so the theme setting is giving me an error "Your custom CSS has reached the size limit of 500 characters. Remove some CSS to save your changes."

Spac-es
Shopify Partner
384 111 135

Your idea is possible but not feasible. That is to say, in certain resolutions, such as laptops or tablets, the screen width varies, causing the text that is initially on the left side of the screen to shift to the other side, thus disrupting the design you desire. Additionally, if you ever plan to translate your website into other languages, they may require text with more or fewer characters, making it very difficult to implement while considering this.

 

Changing the text color of a section as you desire can be done using HTML <span> tags along with CSS classes that determine the text colors. However, this requires additional customization, meaning you have to create a new document and manually add the changes. This way, you preserve the original .liquid document intact to be able to use this section on other pages.

 

I apologize for not providing a specific solution, but it's not as easy as it seems.

 

By the way, if you can't add all the code due to the total number of characters, you have two options: either add it in parts (gradually) or wrap it in <style> and add it to your theme.liquid before the closing </body> tag, something like this:

<style>
/* Previous CSS Code */
</style>

 

I hope this helps!

Any donation is welcome! https://www.buymeacoffee.com/spacescoffee Thanks in advance!