Customise events page

The first part of this solution is to add a line block and the buttons you want at the end of each event item content. The buttons must be next to each other. Something like to following.

Add the following to Settings > Advanced > Code Injection > HEADER.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Add the following to Event Settings > Advanced > Page Header Code Injection for the event page.

<!--

  begin move buttons at end of event item content to meta area
  
  SS Version : 7.1
  
  the code is comprised of a style and script tag. both are needed for the full
  effect to work
  
  no user serviceable parts below
  
  -->
  
  <style>
  
    .eventitem-column-content :not( .sqs-editing ) .sqs-row > .sqs-col-10 .sqs-block-horizontalrule:nth-last-of-type( 2 ),
    .eventitem-column-content :not( .sqs-editing ) .sqs-row > .sqs-col-10 .sqs-row:nth-last-of-type( 1 )
    
      {
      
        display : none;
        
        }
        
    .eventitem-meta-buttons {
    
      align-items : flex-start;
      display : flex;
      justify-content : space-between;
      
      }
      
    .eventitem-meta-buttons .sqs-block-button {
    
      padding : 0;
      
      }
      
    </style>
    
  <script>
  
    $( ( ) => {
    
      $( '<ul class="eventitem-meta event-meta event-meta-button-container">' +
      
        '<li class="eventitem-meta-item event-meta-item eventitem-meta-buttons">' +
        
          '</li>' +
          
        '</ul>' )
        
        .appendTo ( '.eventitem-column-meta' );
        
      $( '.eventitem-column-content .sqs-row:first > .sqs-col-10 ' +
      
        '.sqs-row:nth-last-of-type( 1 ) .sqs-block-button' )
        
        .appendTo ( '.eventitem-meta-buttons' );
        
      } );
      
    </script>
    
  <!-- end move buttons at end of event item content to meta area -->

This is for v7.1 and specific to the OP's need.

The CSS hides the extra bits at the end of the content and the scripts moves the buttons into the meta area.

Let us know how it goes.

Quote

I was a bit confused by your instruction as you said to put the second long bit of code in the blog settings, when this is an event? Could you clarify where to enter that code? 

My sincere apologies! The code should indeed go in the event page! I've updated the instructions. Hopefully with the code in the right place it will work! 😀

If not and as long as the code isn't causing problems, please leave it in place so I can try to diagnose what is happening.

I just tested the code here locally again and it appears to be working.

Hi,

Q1. Add to Design > Custom CSS

/* event list page */
h1.eventlist-title {
    font-size: 40px !important;
}
article.eventlist-event {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
.eventlist-excerpt a {
    background: black;
    color: white;
    padding: 10px;
}
.eventlist-excerpt a span {
    text-decoration: none !important;
}

Q2. Add to Design > Custom CSS

/* event details page */
.eventitem {
    flex-direction: column;
    justify-content: center !important;
    align-items: center !important;
}
.eventitem>div {
    flex: 1 0 100% !important;
    width: 100% !important;
    padding-left: 0;
    box-sizing: unset !important;
    text-align: center;
}

Thank you so much - you're amazing, as ever!

The person I'm working with has slightly changed their mind about the Event Item page. Do you know if it's possible to add 2 buttons to the meta data section on the left that I have made white? I've attached a screenshot to help explain what I mean.

https://iguana-hexaflexagon-3ca4.squarespace.com/current-programmes/event-one-9g33a

I think this could be done with some Javascript. That would require the business plan or above.

Would these buttons appear on every event? Would the URLs be the same or different for every event?

If the buttons need to be individual to each event then the start would be to add them to each event.

This is a mock up with actual HTML copied by hand into place. Obviously we wouldn't leave the original buttons in their starting position.

With some Javascript we could move them into the meta area. Also would probably need some CSS.

Would something like this work for your needs?

Hi Creedon,

Thanks for your questions. I've checked in with my client & they are happy to upgrade to a business plan, so we can make javascript customisations.

Each event will have either 1 or 2 buttons. The linked URLs will be different for each event. For smaller events it will be a "book now" button that links out to Eventbrite, and for longer programmes it'll be 1x sign up button (linking to a page on the squarespace site), 1x download brochure button (linking to a file hosted on the squarespace site).

Your solution sounds good!

I'm so grateful for any help / advice in making this happen.

Katie

Thank you for the update. I will cogitate on how to proceed. If I don't get back to you in a day or so, bump this message to remind me.

Hi Creedon,

Thanks so much for this - I tried it out & didn't get a change. Just want to make sure I've understood right - the 2nd piece of code - this is an event page not a blog, so should the longer bit of code go on blog settings (if so, where on the site?) or should it go on my event page settings?

I have tried adding this to Events > Advanced > Page Header Code Injection but it didn't make a change either...

Katie

Did you change the location of the event meta data? It used to be on the left. If you did change that is probably why it isn't working as the code was looking to put it in a certain place that no longer exists.

The code can probably be updated but I need to know where the meta data is going to be.

Hey - 

I did something different temporarily as my client needed some events live by Weds this week. The plan is to go ahead with the design I showed you with the meta info on the left. I did try your code before making any edits to the meta info this week, but it didn't change the position of the buttons.

I was a bit confused by your instruction as you said to put the second long bit of code in the blog settings, when this is an event? Could you clarify where to enter that code? 

Thank you so much for your help, I really appreciate it 🙂

Katie

Ok yes! Just removed the stuff from the CSS and added your code injection / header code. The buttons now sit with the meta data on the left 💪!!

One issue now is that the body content isn't showing unless I'm in edit mode. Is that something I've done / we can remedy?

Thanks again!!

Screenshots to show edit / back stage / published site

Did the structure of the of the blog posts content change recently? Other than the meta area moving around?

I have updated my code post. I needed to retarget the selectors. Also please reread the original code post as there is an additional condition on how to use.

Let us know how it goes.

Ah I know what I did - I added spacers either side of the right hand column content which upset it.

Sorted! You're a star.