Hi,
I have added a scrolling marquee to my website, but I want to change the colour so it has a black background with white text. (Using Dawn theme)
Code I am using is:
{%- assign id = ‘#shopify-section-’ | append: section.id -%}
{% style %}
{{id}} .marquee {
position: relative;
width: 100vw;
max-width: 100%;
height: 200px;
overflow-x: hidden;
}
{{id}} .marquee-content {
display: flex;
gap: 8rem;
}
{{id}} .track {
position: absolute;
white-space: nowrap;
font-size:6rem;
will-change: transform;
animation: marquee 30s linear infinite;
}
@keyframes marquee {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
{{id}} .marquee .track:hover {
animation-play-state: paused;
}
{% endstyle %}
{% schema %}
{
“name”: “Marquee Full Width”,
“settings”: ,
“blocks”: [
{
“type”: “ScrollingText”,
“name”: “Scrolling Text”,
“limit”: 4,
“settings”: [
{
“type”: “text”,
“id”: “text”,
“default”: “Title”,
“label”: “Scrolling Text”
},
{
“type”: “color”,
“id”: “color”,
“default”: “#000000”,
“label”: “Text Color”
}
]
}
],
“presets”: [
{
“name”: “Marquee Full Width”
}
]
}
{% endschema %}
If I could get it to have the H1 custom font I have installed that would be perfect.
I have added an image of what I want it to look like as well as what it currently looks like.
TIA!
Sarah
