How can I change the font style and color in scrolling text code?

Shopify Apps

Topic summary

A user is seeking help modifying a scrolling text animation on their Shopify store. They want to change the font style and color while removing the underline from linked text.

Code Provided:

  • HTML structure with repeating “NEW :sparkles:” links inside a scrolling container
  • CSS styling that creates a horizontal scrolling animation using keyframes
  • Current color is set to “limegreen” with a 15-second infinite animation

Technical Issue:
The posted CSS code appears corrupted or reversed in several sections, making it difficult to read the complete styling rules.

Community Response:
Two support representatives have offered assistance but are requesting:

  • The user’s store URL
  • Store password (if password protection is enabled)

The discussion remains open and unresolved, awaiting the user to provide their site details so helpers can offer specific code modifications for font styling and color changes.

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

Dear Community

The Scrolling App,

I just need to know how i can change the font style in the code and color without the underline, any help would be appreciated. if you have the code to change the font style and color

NEW :sparkles: NEW :sparkles: NEW :sparkles: NEW :sparkles: NEW :sparkles: NEW :sparkles: NEW :sparkles:
.example1 { height: 50px; overflow: hidden; position: relative; } .example1 span{ font-size: 2.5em; color: limegreen; position: absolute; width: 100%; height: 100%; margin: 0; line-height: 50px; text-align: center; /* Starting position */ -moz-transform:translateX(100%); -webkit-transform:translateX(100%); transform:translateX(100%); /* Apply animation to this element */ -moz-animation: example1 15s linear infinite; -webkit-animation: example1 15s linear infinite; animation: example1 15s linear infinite; } .example1 span a{ margin-right:100px; } /* Move it (define the animation) */ @-moz-keyframes example1 { 0% { -moz-transform: translateX(100%); } 100% { -moz-transform: translateX(-100%); } } @-webkit-keyframes example1 { 0% { -webkit-transform: translateX(100%); } 100% { -webkit-transform: translateX(-100%); } } @keyframes example1 { 0% { -moz-transform: translateX(100%); /* Firefox bug fix */ -webkit-transform: translateX(100%); /* Firefox bug fix */ transform: translateX(100%); } 100% { -moz-transform: translateX(-100%); /* Firefox bug fix */ -webkit-transform: translateX(-100%); /* Firefox bug fix */ transform: translateX(-100%); } }
1 Like
2

@sevenoceans7

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community! :blush:
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

3

Hi @sevenoceans7 ,

To provide you with the most precise solution in this case, could you please share your page URL ( with pass if your store password is enabled )?

Thank you and hope to hear from you.
Best regards,
GemPages Support Team