Customise events page

Could you help me with code where the banner image is the same on all event posts but not on the Events collection page? I already have the events collection page with a banner on it.

On 7/10/2023 at 8:34 AM, STC said:

Could you help me with code where the banner image is the same on all event posts but not on the Events collection page? I already have the events collection page with a banner on it.

What is event page url? We can check easier

Sorry, I didn't see your reply but I was able to fix it. 

Thank you @tuanphan and @creedon with help on this issue. I'm hoping to achieve the event page layout (attached JPEG) if possible.

https://www.ontheboards.org/events/24-25/javaad-alipoor

So the desire is that the banner image moves to the right of the .eventitem-column-meta in one full-width row, and the .eventitem-column-content to expand to full width below them. Another issue I foresee is that on mobile view, it should still stack as is does currently: 

1. banner image
2. eventitem-column-meta
3. eventitem-column-content

Thank you for any help/advice you can offer.

The current code relating to this layout is 

JavaScript

<!-- Pull featured image to top of event page -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>;
<script>
jQuery(document).ready(function ($) {
    a = $('meta[property="og:image"]');
    a.attr("content", a.attr("content").replace("http", "https"));
    var t = a.attr("content");
    $('<div class="event-detail-banner"><img class="event-detail-banner-image" src="' + t + '"></div>').insertBefore("div.events-item-wrapper");
});
</script>


<!--Title, Dates, Times '.event-custom-metadata-->
<script>
$(document).ready(function(){
    $('.event-custom-metadata').insertAfter('h1.eventitem-title');
});
</script>


<!--Content end buttons move to meta-->
  <script>
    $( ( ) => {
      const selector = '.eventitem-column-content > .sqs-grid-12 > ' +
        '.sqs-row > .sqs-col-12 > .sqs-row:last .sqs-block-button';
      $( `<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' );
      $( selector )
        .appendTo ( '.eventitem-meta-buttons' );
      } );
    </script>
<!-- end event content end buttons move to meta -->

<!-- Back to event -->
<script>
 $(document).ready(function(){
$('a.eventitem-backlink').insertAfter('.eventitem-meta-buttons')
});
</script>

CSS

<style>
/* banner image style*/
  body {overflow-x:hidden;}
img.event-detail-banner-image {
  width: 98vw; 
  max-width: 1200px;
  display : flex;
  justify-content: center!important;
  }
  .event-detail-banner {      
    display : flex;
    justify-content: center!important;
}/* Meta buttons */  
  body:not( .sqs-edit-mode ) .eventitem-column-content > .sqs-grid-12 > .sqs-row > .sqs-col-12 > .sqs-block-horizontalrule:nth-last-of-type( 2 ),
    body:not( .sqs-edit-mode ) .eventitem-column-content > .sqs-grid-12 > .sqs-row > .sqs-col-12 > .sqs-row:last-child
      {
        display : none;
        }
    .eventitem-meta-buttons {
      -webkit-box-align : start;
      -ms-flex-align : start;
      align-items : flex-start;
      display : -webkit-box;
      display : -ms-flexbox;
      display : flex;
      gap : 1.5em;
      -webkit-box-pack : justify;
      -ms-flex-pack : justify;
      justify-content : start;
      margin: 0 0 3vw 0 !important;
      }
    .eventitem-meta-buttons .sqs-block-button {
      white-space : nowrap;
      }
    @media only screen and ( max-width : 639px ) {
      .eventitem-meta-buttons {
        -webkit-box-pack : unset;
        -ms-flex-pack : unset;
        justify-content : unset;
        }
        .events {
 		 padding-top: 6vw!important;
        }
        .eventlist-datetag {
    left: 10px!important;
  }
      }
 /* Backlink */    
  .eventitem-backlink {
  margin:0px!important;}
  .eventitem-column-meta {  margin:0px!important;}
</style>

On 7/20/2024 at 6:35 AM, VladaKremenovic said:

Thank you @tuanphan and @creedon with help on this issue. I'm hoping to achieve the event page layout (attached JPEG) if possible.

https://www.ontheboards.org/events/24-25/javaad-alipoor

So the desire is that the banner image moves to the right of the .eventitem-column-meta in one full-width row, and the .eventitem-column-content to expand to full width below them. Another issue I foresee is that on mobile view, it should still stack as is does currently: 

1. banner image
2. eventitem-column-meta
3. eventitem-column-content

Thank you for any help/advice you can offer.

The current code relating to this layout is 

JavaScript

<!-- Pull featured image to top of event page -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>;
<script>
jQuery(document).ready(function ($) {
    a = $('meta[property="og:image"]');
    a.attr("content", a.attr("content").replace("http", "https"));
    var t = a.attr("content");
    $('<div class="event-detail-banner"><img class="event-detail-banner-image" src="' + t + '"></div>').insertBefore("div.events-item-wrapper");
});
</script>


<!--Title, Dates, Times '.event-custom-metadata-->
<script>
$(document).ready(function(){
    $('.event-custom-metadata').insertAfter('h1.eventitem-title');
});
</script>


<!--Content end buttons move to meta-->
  <script>
    $( ( ) => {
      const selector = '.eventitem-column-content > .sqs-grid-12 > ' +
        '.sqs-row > .sqs-col-12 > .sqs-row:last .sqs-block-button';
      $( `<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' );
      $( selector )
        .appendTo ( '.eventitem-meta-buttons' );
      } );
    </script>
<!-- end event content end buttons move to meta -->

<!-- Back to event -->
<script>
 $(document).ready(function(){
$('a.eventitem-backlink').insertAfter('.eventitem-meta-buttons')
});
</script>

CSS

<style>
/* banner image style*/
  body {overflow-x:hidden;}
img.event-detail-banner-image {
  width: 98vw; 
  max-width: 1200px;
  display : flex;
  justify-content: center!important;
  }
  .event-detail-banner {      
    display : flex;
    justify-content: center!important;
}/* Meta buttons */  
  body:not( .sqs-edit-mode ) .eventitem-column-content > .sqs-grid-12 > .sqs-row > .sqs-col-12 > .sqs-block-horizontalrule:nth-last-of-type( 2 ),
    body:not( .sqs-edit-mode ) .eventitem-column-content > .sqs-grid-12 > .sqs-row > .sqs-col-12 > .sqs-row:last-child
      {
        display : none;
        }
    .eventitem-meta-buttons {
      -webkit-box-align : start;
      -ms-flex-align : start;
      align-items : flex-start;
      display : -webkit-box;
      display : -ms-flexbox;
      display : flex;
      gap : 1.5em;
      -webkit-box-pack : justify;
      -ms-flex-pack : justify;
      justify-content : start;
      margin: 0 0 3vw 0 !important;
      }
    .eventitem-meta-buttons .sqs-block-button {
      white-space : nowrap;
      }
    @media only screen and ( max-width : 639px ) {
      .eventitem-meta-buttons {
        -webkit-box-pack : unset;
        -ms-flex-pack : unset;
        justify-content : unset;
        }
        .events {
 		 padding-top: 6vw!important;
        }
        .eventlist-datetag {
    left: 10px!important;
  }
      }
 /* Backlink */    
  .eventitem-backlink {
  margin:0px!important;}
  .eventitem-column-meta {  margin:0px!important;}
</style>

 

Don't remove any code in your current code. Use this code to bottom of Code Injection > Footer

<script>
  $(document).ready(function(){
    $('<div class="event-top-section"></div>').insertBefore('.events-item-wrapper.events-stacked-item-wrapper');
    $('.eventitem-column-meta').appendTo('.event-top-section');
    $('.event-detail-banner').appendTo('.event-top-section');
});
</script>
<style>
  .event-top-section {
    max-width: 1200px;
    padding-left: 2vw;
    padding-right: 2vw;
    margin: 0 auto;
    display: flex;
}
.event-detail-banner img {
    width: 100% !important;
}
  @media screen and (max-width:767px) {
    .event-top-section {
        flex-direction:column-reverse;
    }
    .event-detail-banner {
        margin-bottom: 20px;
    }
}
</style>
  

On 7/25/2024 at 2:55 AM, tuanphan said:

Don't remove any code in your current code. Use this code to bottom of Code Injection > Footer

<script>
  $(document).ready(function(){
    $('<div class="event-top-section"></div>').insertBefore('.events-item-wrapper.events-stacked-item-wrapper');
    $('.eventitem-column-meta').appendTo('.event-top-section');
    $('.event-detail-banner').appendTo('.event-top-section');
});
</script>
<style>
  .event-top-section {
    max-width: 1200px;
    padding-left: 2vw;
    padding-right: 2vw;
    margin: 0 auto;
    display: flex;
}
.event-detail-banner img {
    width: 100% !important;
}
  @media screen and (max-width:767px) {
    .event-top-section {
        flex-direction:column-reverse;
    }
    .event-detail-banner {
        margin-bottom: 20px;
    }
}
</style>
  

This is AMAZING @tuanphan thank you. I have a couple of clarifying questions:

1. Is it possible to have the event-top-section be equal width as the rest of the page? 
2. When I shrink the browser window, the featured image squishes as shown in the image below. Is it possible to make the image overflow inside the wrapper and maintain height, or at least shrink equally?
3. Lastly, is there a way to vertically center eventitem-column-meta with the image?

Thank you!!!

On 2/9/2021 at 7:55 AM, katieslee said:

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

@katieslee @tuanphan @creedon 

Hi! I clicked on the link that @katieslee provided in this post & really like how you were able to get the left side bar to stay on the page as you scroll down. How did you do this? I saw that both you responded to this post and you've been a great help to me in the past, so I thought I would ask if either of you helped out or know how I could achieve this on my site? 

https://www.thepromiseofliberty.org/events/empire-rare-book-fair

On 8/1/2024 at 2:16 AM, VladaKremenovic said:

This is AMAZING @tuanphan thank you. I have a couple of clarifying questions:

1. Is it possible to have the event-top-section be equal width as the rest of the page? 
2. When I shrink the browser window, the featured image squishes as shown in the image below. Is it possible to make the image overflow inside the wrapper and maintain height, or at least shrink equally?
3. Lastly, is there a way to vertically center eventitem-column-meta with the image?

Thank you!!!

 

Sorry, I missed your comment. Do you still need help with this?

@User1776 You can use this code to Website Tools > Custom CSS

div.eventitem-column-meta {
        align-self: flex-start;
        position: sticky;
        top: 50px;
    }
}

On 8/30/2024 at 4:15 AM, tuanphan said:

Sorry, I missed your comment. Do you still need help with this?

 

@User1776 You can use this code to Website Tools > Custom CSS

div.eventitem-column-meta {
        align-self: flex-start;
        position: sticky;
        top: 50px;
    }
}

 

Thank you! Do you know how to create a box or boarder around the side bar like in this example: https://iguana-hexaflexagon-3ca4.squarespace.com/current-programmes/monday-monthly-16sep

My website link is: https://www.thepromiseofliberty.org/events/empire-rare-book-fair

On 9/5/2024 at 3:08 AM, User1776 said:

Thank you! Do you know how to create a box or boarder around the side bar like in this example: https://iguana-hexaflexagon-3ca4.squarespace.com/current-programmes/monday-monthly-16sep

My website link is: https://www.thepromiseofliberty.org/events/empire-rare-book-fair

You can use this code to Custom CSS

div.eventitem-column-meta {
    background-color: #fff;
    padding: 10px;
}

On 8/30/2024 at 4:15 AM, tuanphan said:

 

@User1776 You can use this code to Website Tools > Custom CSS

div.eventitem-column-meta {
        align-self: flex-start;
        position: sticky;
        top: 50px;
    }
}

 

@tuanphan

Hi! Thank you so much, this worked! But now the formatting is glitchy on the mobile site. Do you know how to make the info box stay on the screen as you scroll in desktop view, but then revert it back to default on mobile view? Basically, I'm asking how do I stop the info box from moving with the screen as you scroll ONLY on mobile view? 

This is a good example of how the info box stays on the screen as you scroll in desktop view, but then it does not on mobile view: https://iguana-hexaflexagon-3ca4.squarespace.com/current-programmes/monday-monthly-16sep

My website link: https://www.thepromiseofliberty.org/events/empire-rare-book-fair

Thank you so much.

On 9/17/2024 at 10:16 PM, User1776 said:

@tuanphan

Hi! Thank you so much, this worked! But now the formatting is glitchy on the mobile site. Do you know how to make the info box stay on the screen as you scroll in desktop view, but then revert it back to default on mobile view? Basically, I'm asking how do I stop the info box from moving with the screen as you scroll ONLY on mobile view? 

This is a good example of how the info box stays on the screen as you scroll in desktop view, but then it does not on mobile view: https://iguana-hexaflexagon-3ca4.squarespace.com/current-programmes/monday-monthly-16sep

My website link: https://www.thepromiseofliberty.org/events/empire-rare-book-fair

Thank you so much.

 

Change the code to this code

@media screen and (min-width:768px) {
div.eventitem-column-meta {
        align-self: flex-start;
        position: sticky;
        top: 50px;
    }
}

5 hours ago, tuanphan said:

Change the code to this code

@media screen and (min-width:768px) {
div.eventitem-column-meta {
        align-self: flex-start;
        position: sticky;
        top: 50px;
    }
}

 

@tuanphan

Thank you!! 

Do you know how to change the size of the info box? I'd like to make the width a bit smaller. 

On 9/19/2024 at 10:08 PM, User1776 said:

@tuanphan

Thank you!! 

Do you know how to change the size of the info box? I'd like to make the width a bit smaller. 

Change it to this

@media screen and (min-width:768px) {
div.eventitem-column-meta {
        align-self: flex-start;
        position: sticky;
        top: 50px;
		flex: 1 0 100px !important;
    }
}