How can I change the color of a specific element on my website?

Technical Q&A

Topic summary

A Shopify store owner seeks help changing the color of a period/dot in their website’s banner text. The text reads “Welcome to The I. Impossible Sauce Factory” and they want only the dot to appear in a different color (green).

Solution provided:

  • Wrap the dot in a <span> tag with inline CSS styling: <span style="color: green">.</span>
  • Add the modified text through Shopify’s Custom Content section using a Custom HTML block
  • Include complete HTML structure with banner styling and layout code

Issues encountered and resolved:

  1. Center alignment problem - Fixed by adding CSS styling with max-width and auto margins
  2. Mobile view display issue - Resolved with responsive CSS media queries
  3. Unintended styling conflict - The custom CSS affected other page sections with background colors. Fixed by adding a specific class selector (.almo) to target only the intended banner section

The solution successfully changed the dot color while maintaining proper layout across desktop and mobile views. The helper provided complete code snippets including CSS styling for responsive design.

Summarized with AI on November 25. AI used: claude-sonnet-4-5-20250929.
1

hi everyone!

I appreciate your help on this.

How do I make the . become a different colour? The dot inside the black square..

I only want the . to become a different colour example green colour

Untitled.png
Untitled.png680×274 9.63 KB

This is my website link

https://theimpossiblesauces.com/

Thank you

2

You would need to add span tags around the dot. For example it would look like this:

Welcome to the I.mpossible Sauces Factory

The other (not so good?) option would be to add that section as an image instead of text.

3

OK for first solution can u help show me where to add the solution pls ?

As in which section etc etc

Sorry i am a newbie to this.

Tqvm !

4

I would add it wherever you added the existing text. Just replace what you have with the example I provided above. You may need to add it as a Custom HTML block.

If you can’t get it work please include a screenshot of how you have added the existing content.

5

Hi sorry unable to make it work… i cannot find the existing content in the Edit Code section

I added the information through here… pls help thank you

Untitled.png
Untitled.png800×381 96.6 KB

6

Give this a try:

  • In the left column select Add Section > Custom Content

  • Hide any of the existing blocks that are added to the Custom Content section

  • In the Custom Content section click Add Block > Custom HTML

  • In this block paste the below:

Welcome to The I.mpossible Sauces Factory

Ready-To-Eat | Convenient | Quality | Halal
7

hi

I managed to do it but i have 2 issues

  1. how do align it middle?

Untitled.png
Untitled.png1579×765 31.2 KB

  1. for mobile view it becomes like this.. how do i fix this?

Untitled2.png
Untitled2.png1579×747 57.4 KB

8

Try replacing all of the code in the custom HTML block with the below:

.slideshow__text.banner__box {max-width: var(--page-width) !important; margin: 0 auto; background-color: transparent;} .ss-inner {background-color: #fff; width: 100%; height: 100%; padding: 75px;} .banner__text {margin-bottom: 30px;} @media only screen and (min-width: 750px) { .slideshow__text.banner__box {padding: 5rem;} .ss-inner {padding: 125px;} } @media only screen and (max-width: 750px) { .banner__box {padding: 4rem 1.5rem; !important;} }

Welcome to The I.mpossible Sauces Factory

Ready-To-Eat | Convenient | Quality | Halal
9

hi that worked great!

but i think it affected another part of the design…

the description i circled in black had a different colour background so that i can read the words.. like a bubble

i tried changing the Colour Scheme on the right side but cannot..

hope i make sense… thank you

Untitled.png
Untitled.png1873×877 225 KB

10

Replacing the custom html with the below should fix that:

.slideshow__text.banner__box.almo {max-width: var(--page-width) !important; margin: 0 auto; background-color: transparent;} .ss-inner {background-color: #fff; width: 100%; height: 100%; padding: 75px;} .banner__text {margin-bottom: 30px;} @media only screen and (min-width: 750px) { .slideshow__text.banner__box {padding: 5rem;} .ss-inner {padding: 125px;} } @media only screen and (max-width: 750px) { .banner__box {padding: 4rem 1.5rem !important;} }

Welcome to The I.mpossible Sauces Factory

Ready-To-Eat | Convenient | Quality | Halal
11

yes fixed it!

thank you so much for your help