How to add a code block at top of event page

Hi,

Can anyone help? I'm trying to add a code block (containing custom social icons) at the top of the page to match the other pages on the website. Not sure where to start.

site: https://walrus-springtail-ljhd.squarespace.com/workshop-events?p

pw: 1mageproblem

thanks

Do you want the social icons at the top of each event detail page?

Hi Creedon, Thanks for replying.

No. We'd like the social icons on jut the main store page.

I'm confused. Is this for an event page or a store page? You've mentioned both.

Apologies.  We'd like it on both in fact. thanks for replying.

The general technique that can be used is to add a code block to the footer of your site with the custom code you've used. Hide that with CSS.

Now with JavaScript you can move that block wherever you want. I'd put the JavaScript in the page header code injection for those pages.

For the two pages you mention you could move the element after the page title element ( .page-title ).

If you put the code block in the footer and hide it with CSS we may be able to come up with some code to move it into place.

Thanks Creedon,

I've almost got it but the social icons are spread across the whole width of the page instead of in a block on the right (as on other pages).

Code used:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  $(document).ready(function() {
        $('#social-hide').insertBefore('.page-title');
    });
</script>

code block:

<div id="social-hide" style="text-align:right !important" >

<ul class="social-icons">
    <li><a href="https://www.pinterest.co.uk/rebelrebele8/" class="social-icon"><img class="social-icon"  src="https://static1.squarespace.com/static/5a045bf8a9db09cbf239e375/t/5a69ff9724a6944f0dc5815b/1516896151713/ICON_Pinterest+blue.png"></a></li>
    <li><a href="https://www.instagram.com/rebelrebele8" class="social-icon"><img class="social-icon"  src="https://static1.squarespace.com/static/5a045bf8a9db09cbf239e375/t/5a69ff9324a6944f0dc57fc2/1516896148015/ICON_instagram+blue.png"></a></li>
    <li><a href="https://en-gb.facebook.com/RebelRebelE8" class="social-icon"><img class="social-icon"  src="https://static1.squarespace.com/static/5a045bf8a9db09cbf239e375/t/5a69ff90e2c483be24a907ee/1516896144241/ICON_Facebook+blue.png"></a></li>
    <li><a href="https://twitter.com/RebelRebelE8" class="social-icon"><img class="social-icon"  src="https://static1.squarespace.com/static/5a045bf8a9db09cbf239e375/t/5a69ff9971c10b67cf864516/1516896153314/ICON_Twitter+blue.png"></a></li>
 </ul>
 </div>

https://pelican-plantain-cha4.squarespace.com/order-online?p

pw: 2022!

Your help is much appreciated.  Thanks.

Thank you so much!

Final css:

.page-text-wrapper {

  display : flex;
  flex-direction : column;
  }

@media screen and (min-width: 641px) {
#social-hide {

  align-self : end;
  width : 25%;

  }
  }
 
 @media screen and (max-width: 640px) {
#social-hide {

  align-self : end;
  width : 50%;

  }
  }

Hi again,

I know I said I'd got it BUT I hadn't realised that the 'social-hide' div is also showing in the footer (just it happens to be almost the same colour as the background. How do I hide it and then unhide it just for the store and event pages?  Any help would be much appreciated.  I really know no javascript!

thanks

Quote

 I really know no javascript!

The hiding of the social block in the footer is purely a CSS issue.

#footer #block-yui_3_17_2_1_1673944491125_5415 {

  display : none;
  
  }

Let us know how it goes.

Hi, Sorry. Brain fog.  Hid footer div as follows:

#footer.site-footer #social-hide {
  display: none;
}

All fine now. Thanks