Jump to content

How to add a code block at top of event page

Go to solution Solved by creedon,

Recommended Posts

  • 2 weeks later...

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.

Edited by creedon

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

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.

 

 

Link to comment
  • Solution
12 hours ago, Nikitaly said:

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).

There are multiple ways you could go about it. Here is one.

.page-text-wrapper {

  display : flex;
  flex-direction : column;
  
  }

#social-hide {

  align-self : end;
  width : 50%;
  
  }

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

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%;

  }
  }

Link to comment

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

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

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

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.