Help with Changing color of Scrolling

Site URL: https://www.usmexicofoundation.org

Hi everyone!

I'm stuck in how to change the color of the scrolling text! I've looked everywhere and followed directions I've found and still I can't figure out how to change the text from black to red... Any help is greatly appreciated!

Which page are you referring to? I don't see scrolling text on homepage

https://www.usmexicofoundation.org/c26group

Here's an example, I want to change the black text to red, but can't seem to find out how!

Thank you SOOOO much!!! 

🤗

On 5/11/2022 at 3:52 AM, tuanphan said:

Add to Design > Custom CSS

/* Scrolling text color */
div.marquee-block * {
    color: Red !important;
}

 

Is there a code to have multiple colors scrolling? Would you use nth-child in the code? 
I have three items listed in my marquee and I'd love to have each item be a different color while it's scrolling. Could you help me with that, @tuanphan?

On 7/29/2022 at 12:21 AM, mirgart said:

Is there a code to have multiple colors scrolling? Would you use nth-child in the code? 
I have three items listed in my marquee and I'd love to have each item be a different color while it's scrolling. Could you help me with that, @tuanphan?

Can you share link to page where you use scroll? We can check easier

On 7/28/2022 at 1:21 PM, mirgart said:

Is there a code to have multiple colors scrolling? Would you use nth-child in the code? 
I have three items listed in my marquee and I'd love to have each item be a different color while it's scrolling. Could you help me with that, @tuanphan?

I have the same question! Would like to use two different colors in my scrolling marquee

@tuanphan I have a similar question, I'd like the odd and even contents of my scrolling text to be different colours. This is the site: https://www.thepositivepracticalparent.com/ Thank you 🙂

18 hours ago, HollyCurry said:

@tuanphan I have a similar question, I'd like the odd and even contents of my scrolling text to be different colours. This is the site: https://www.thepositivepracticalparent.com/ Thank you 🙂

You mean use different color on this same scroll block?

On 10/15/2022 at 5:17 AM, tuanphan said:

You mean use different color on this same scroll block?

Yes! I have the very same question. Different color on the  same blog. Eg. "We were empowered by Clare" in red, and "Clare was so empathetic" in blue. Thank you so much in advance @tuanphan!

16 hours ago, mart22 said:

Yes! I have the very same question. Different color on the  same blog. Eg. "We were empowered by Clare" in red, and "Clare was so empathetic" in blue. Thank you so much in advance @tuanphan!

Hi,

No way to do this. You will need to use custom code to add new scroll text.

You can find some free code on Codepen, then share me link, we can convert it to Squarespace code

eg this code https://codepen.io/Rei_Kama414/pen/zYjPmjv

hyy does anyone have an idea how culd i make .marquee text transparent and mix-color-difference to background so the text will mix color difference of background...

THANKS :))

@mart22 I saw your website and how you were able to make the scrolling colors both green and pink. Would you mind sharing the code here please? Would really appreciate it. Thanks, Jack

On 2/26/2023 at 6:28 AM, JohnnyC said:

@mart22 I saw your website and how you were able to make the scrolling colors both green and pink. Would you mind sharing the code here please? Would really appreciate it. Thanks, Jack

Use this CSS (Design > Custom CSS)

.Marquee-svg-text .Marquee-svg-text:nth-child(odd) {
    color: #f2ccd8
}

.Marquee-svg-text .Marquee-svg-text:nth-child(even) {
    color: #9fc7aa
}

This is great, thank you very much @tuanphan! Just curious, is there a way to get more than 2 colors? I see the code says even and odd, but is it possible to add 3 or 4 colors? Thanks again, Jack

On 2/28/2023 at 3:00 AM, JohnnyC said:

This is great, thank you very much @tuanphan! Just curious, is there a way to get more than 2 colors? I see the code says even and odd, but is it possible to add 3 or 4 colors? Thanks again, Jack

Use this code if you need 3 colors

.Marquee-svg-text .Marquee-svg-text:nth-child(3n+1) {
    color: #f2ccd8;
}
.Marquee-svg-text .Marquee-svg-text:nth-child(3n+2) {
    color: #9fc7aa;
}
.Marquee-svg-text .Marquee-svg-text:nth-child(3n+3) {
    color: #f1f;
}

@tuanphan Do you know how to change the background color of each item in a scrolling block such that each item has a different pill-shaped background? I've included a photo for reference - ideally it would look like this, but as a scrolling block. Thank you for your help!

On 4/15/2024 at 2:33 AM, lo412 said:

@tuanphan Do you know how to change the background color of each item in a scrolling block such that each item has a different pill-shaped background? I've included a photo for reference - ideally it would look like this, but as a scrolling block. Thank you for your help!

Changing background is not possible. You can consider using custom code to create scrolling text, instead of using Scrolling Block (If you need this, let me know, I can test some code then give you)