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

[njlee]

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

This is my website link

https://theimpossiblesauces.com/

Thank you

[a1anm]

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

Welcome to the I<span style="color: green;">.</span>mpossible Sauces Factory

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

[njlee]

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 !

[a1anm]

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.

[njlee]

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

[a1anm]

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:

<div class="slideshow__slide grid__item grid--1-col slider__slide" id="Slide-template--15508447232140__slideshow-1" role="group" aria-roledescription="Slide" aria-label="1 of 1" tabindex="-1">
<div class="slideshow__media banner__media media"><img srcset="//cdn.shopify.com/s/files/1/0610/1991/4380/files/sauce_logo_Banner_Landscape_white.png?v=1662545995&amp;width=375 375w,//cdn.shopify.com/s/files/1/0610/1991/4380/files/sauce_logo_Banner_Landscape_white.png?v=1662545995&amp;width=550 550w,//cdn.shopify.com/s/files/1/0610/1991/4380/files/sauce_logo_Banner_Landscape_white.png?v=1662545995&amp;width=750 750w,//cdn.shopify.com/s/files/1/0610/1991/4380/files/sauce_logo_Banner_Landscape_white.png?v=1662545995&amp;width=1100 1100w,//cdn.shopify.com/s/files/1/0610/1991/4380/files/sauce_logo_Banner_Landscape_white.png?v=1662545995&amp;width=1500 1500w,//cdn.shopify.com/s/files/1/0610/1991/4380/files/sauce_logo_Banner_Landscape_white.png?v=1662545995&amp;width=1780 1780w,//cdn.shopify.com/s/files/1/0610/1991/4380/files/sauce_logo_Banner_Landscape_white.png?v=1662545995&amp;width=2000 2000w,//cdn.shopify.com/s/files/1/0610/1991/4380/files/sauce_logo_Banner_Landscape_white.png?v=1662545995&amp;width=3000 3000w,//cdn.shopify.com/s/files/1/0610/1991/4380/files/sauce_logo_Banner_Landscape_white.png?v=1662545995&amp;width=3840 3840w,//cdn.shopify.com/s/files/1/0610/1991/4380/files/sauce_logo_Banner_Landscape_white.png?v=1662545995 6000w" sizes="100vw" src="//cdn.shopify.com/s/files/1/0610/1991/4380/files/sauce_logo_Banner_Landscape_white.png?v=1662545995&amp;width=1500" loading="lazy" alt="" width="6000" height="3000"></div>
<div class="slideshow__text-wrapper banner__content banner__content--top-center page-width">
<div class="slideshow__text banner__box content-container content-container--full-width-mobile color-background-2 gradient slideshow__text--center slideshow__text-mobile--center"><h2 class="banner__heading h1">Welcome to The I<span style="color: green;">.</span>mpossible Sauces Factory</h2><div class="banner__text">
<span>Ready-To-Eat | Convenient | Quality | Halal</span>
</div><div class="banner__buttons">
<a href="/collections/all" class="button button--primary">ORDER NOW</a>
</div></div>
</div>
</div>

[njlee]

hi

I managed to do it but i have 2 issues

1. how do align it middle?

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

[a1anm]

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

<style>

.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;}

}

</style>

<div class="slideshow__text banner__box content-container content-container--full-width-mobile color-background-2 gradient slideshow__text--center slideshow__text-mobile--center">

<div class="ss-inner">

<h2 class="banner__heading h1">Welcome to The I<span style="color: #00883A;">.</span>mpossible Sauces Factory</h2>

<div class="banner__text">

<span>Ready-To-Eat | Convenient | Quality | Halal</span>

</div><div class="banner__buttons">

<a href="/collections/all" class="button button--primary">ORDER NOW</a>

</div>

</div></div>

[njlee]

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 

[a1anm · Accepted solution]

Replacing the custom html with the below should fix that:

<style>

.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;}

}

</style>

<div class="slideshow__text banner__box almo content-container content-container--full-width-mobile color-background-2 gradient slideshow__text--center slideshow__text-mobile--center">

<div class="ss-inner">

<h2 class="banner__heading h1">Welcome to The I<span style="color: #00883A;">.</span>mpossible Sauces Factory</h2>

<div class="banner__text">

<span>Ready-To-Eat | Convenient | Quality | Halal</span>

</div><div class="banner__buttons">

<a href="/collections/all" class="button button--primary">ORDER NOW</a>

</div>

</div></div>

[njlee]

yes fixed it! 

thank you so much for your help