[Share] Move Scrolling Block to Announcement Bar

You can follow these steps. If you can't make it work, you can comment below or message me.

#1. Edit Site Footer

#2. Add a Scrolling Block

#3. Use this code to Website > Website Tools > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
  setTimeout( function() {
          $('footer.sections .marquee-block').appendTo('#announcement-bar-text-inner-id');
    }, 2000);
});
</script>
<style>
div#announcement-bar-text-inner-id * {
    color: white !important;
}
#announcement-bar-text-inner-id p {
    display: none !important;
}
span.sqs-announcement-bar-close {
    display: none;
}
</style>

#4. Result

Hi! @tuanphan

Thanks for adding this here, I've been trying to make it work but the scrolling block isn't moving from the footer. When I paste the above code into the footer injection area part of its highlighted red. I've tried replacing with some other selectors but haven't made any progress. Do you have any thoughts?

Thanks so much in advance,
Sam

url: https://archivegoods.squarespace.com/
pw: backandforth

@tuanphan Thank you for catching that! Unfortunately after fixing that its still not moving to the top for some reason.

4 hours ago, samschwan said:

@tuanphan Thank you for catching that! Unfortunately after fixing that its still not moving to the top for some reason.

Have you enabled Announcement Bar yet? I don't see it now

@tuanphan Sorry I didnt know that was a step in the process, thanks for catching! I've enabled it but now the blue background of the scrolling block I added is moved within a black box where the announcement bar would be.

6 hours ago, samschwan said:

@tuanphan Sorry I didnt know that was a step in the process, thanks for catching! I've enabled it but now the blue background of the scrolling block I added is moved within a black box where the announcement bar would be.

Add this CSS (Custom CSS box) to override it

div.sqs-announcement-bar-dropzone .marquee-block {
    background-color: transparent !important;
}
#announcement-bar-text-inner-id .marquee-block p {
    display: block !important;
}

@tuanphan Thanks so much! Thats solved most of everything. Now I'm just stuck on figuring out how to get the text color back to black. I was able to change the padding and background color easily but the text color isn't updating for some reason. 

This is what I've been trying:

 

//////* ANNOUNCEMENT BAR *//////
.sqs-block-marquee p {
font-size: 12px !important;
line-height: 16px !important;
}

.sqs-announcement-bar-text {
padding: .5rem 0rem !important;
}

.marquee-block {
padding: 0px !important;
background-color: #A1D3EF !important;
}

div.sqs-announcement-bar-dropzone .marquee-block {
    background-color: transparent !important;
}

#announcement-bar-text-inner-id .marquee-block p {
    display: block !important;
}

div#announcement-bar-text-inner-id * p {
color: black !important;
}
 

3 hours ago, samschwan said:

@tuanphan Thanks so much! Thats solved most of everything. Now I'm just stuck on figuring out how to get the text color back to black. I was able to change the padding and background color easily but the text color isn't updating for some reason. 

This is what I've been trying:

 

//////* ANNOUNCEMENT BAR *//////
.sqs-block-marquee p {
font-size: 12px !important;
line-height: 16px !important;
}

.sqs-announcement-bar-text {
padding: .5rem 0rem !important;
}

.marquee-block {
padding: 0px !important;
background-color: #A1D3EF !important;
}

div.sqs-announcement-bar-dropzone .marquee-block {
    background-color: transparent !important;
}

#announcement-bar-text-inner-id .marquee-block p {
    display: block !important;
}

div#announcement-bar-text-inner-id * p {
color: black !important;
}
 

In Code Injection, edit this code

@tuanphan Ah got it! Thanks so much for your help!!