Jump to content

Help with Changing color of Scrolling

Go to solution Solved by tuanphan,

Recommended Posts

  • Solution
On 5/10/2022 at 2:16 AM, PaolaBdP said:

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!

Add to Design > Custom CSS

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 months later...
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?

Link to comment
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 months later...
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

Link to comment
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?

image.thumb.png.0991ec674bb9e77beca8ad257485488e.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 weeks later...
On 10/15/2022 at 5:17 AM, tuanphan said:

You mean use different color on this same scroll block?

image.thumb.png.0991ec674bb9e77beca8ad257485488e.png

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!

Link to comment
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

image.thumb.png.c934d25943c20ef8fb1878d96f677db4.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 1 month later...
  • 2 months later...
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

Screenshot 2023-02-25 at 6.28.21 PM.png

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
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 1 year later...

@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!Screenshot2024-04-14at3_32_04PM.png.a242d5b6dd830b05909643f2eb37f1c8.png

Link to comment
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!Screenshot2024-04-14at3_32_04PM.png.a242d5b6dd830b05909643f2eb37f1c8.png

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)

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.