Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Customise events page


katieslee

Question

Site URL: https://iguana-hexaflexagon-3ca4.squarespace.com/current-programmes

Hello,

I'm trying to customise the style of the events summary on this site, and the events pages themselves.

1.  On the summary, I'd like to make the following style changes for all events:

  • Increase the size of the title text (the custom font)
  • Align the text to the centre of the image
  • Change the 'learn more' link to a button


2. On all the individual events pages, I'd like to move the back link, event title & metadata to be centred above the body copy.

Is this possible? Any help so appreciated!

Thank you,

Katie

Screenshot 2021-02-09 at 12.45.50.png

Screenshot 2021-02-09 at 12.54.01.png

Link to post
  • Answers 13
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

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.  

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

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?

Posted Images

13 answers to this question

Recommended Posts

  • 1

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.

1694233392_ScreenShot2021-03-09at4_20_10PM.thumb.png.74b63f9073e76816e5db3fcd27879e1a.png

 

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.

Edited by creedon

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to post
  • 1
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.

454288504_ScreenShot2021-03-05at9_43_48AM.thumb.png.fbc8d4ac02986a3f536e088ae447fe89.png

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to post
  • 0

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

 

Link to post
  • 0

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.

231127585_ScreenShot2021-02-16at1_55_49PM.thumb.png.db2466b70691e665bafc706a658095c9.png

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?

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to post
  • 0

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

Link to post
  • 0

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

Link to post
  • 0

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.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to post
  • 0
Posted (edited)

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

Edited by katieslee
Link to post
  • 0
Posted (edited)

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

 

 

Screenshot 2021-03-09 at 10.06.22.png

Screenshot 2021-03-09 at 10.06.30.png

Screenshot 2021-03-09 at 10.06.39.png

Edited by katieslee
Link to post
  • 0

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.

Edited by creedon

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...