Main Events Section & Event Description Pages Formatting

Hello! Looking for some big help with event pages.

Having trouble making both the main Events page and individual events pages look fit for purpose and not clunky and confusing.

Using Summary Blocks as a bypass isn't an option as I need all events visible, rather than restricted to a set number.

URL: https://greyhound-fiddle-c5hb.squarespace.com

(pass: bogeyman)

Things I'm hoping for...

1a. Hide End Date on all reference points (date tag on image, description in event) (ideally event End Time will still display)

1b. Event Date to list as SAT DD/MM (shortened Day and no year)

2. List events on Event page as a grid

3. Remove all other information / buttons etc on the Event main page so it's only the event image

4. In the individual events, have the Featured Image in a left column with all other info and text on the right (as below):

Appreciate the help!

#1. Do it on this page: https://greyhound-fiddle-c5hb.squarespace.com/whats-on/2024/1/20/psychedelic-odyssey-wfmnj

or https://greyhound-fiddle-c5hb.squarespace.com/

?

If list page, add this code to Website Tools (under Not Linked) > Custom CSS to remove Date over image

/* remove date over image */
.eventlist-datetag {
    display: none !important;
}
/* remove event description */
div.eventlist-description {
    display: none;
}

#2. Grid like this or?

#3. Use this CSS code

/* remove date over image */
.eventlist-datetag {
    display: none !important;
}
/* remove event description */
div.eventlist-description {
    display: none;
}
div.eventlist-column-info {
    display: none;
}

#4. This will require JS code. Which plan do/will you use?

Thanks! This is a great start!

1. On all pages

2. Yes, having a grid of the images would be amazing, so like what you suggest

3. Perfect TY!...although is there a way to set up the Event Name to appear over the image on hover? I've done this before on another site but can't remember how!

4. will be on business plan so JS should be fine?

Again, thanks!

#1. Use this CSS code

/* Hide date on event list */
.eventlist-datetag {
    display: none !important;
}
/* Hide date on event detail */
li.eventitem-meta-item.eventitem-meta-date.event-meta-item {
    display: none;
}

#1b. Date format, you can see this thread

#2. Add this code to Custom CSS

/* Event list to grid */
@media screen and (min-width:768px) {
div.eventlist {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    grid-gap: 10px 10px;
}

div.eventlist article {
    margin: 0 !important;
    width: 100% !important;
    flex-direction: column;
}

div.eventlist article>* {
    width: 100% !important;
}

.eventlist-column-thumbnail {
    padding: unset !important;
    height: auto !important;
}

.eventlist-column-thumbnail img {
    position: static !important;
}}

#4. So

Left side: Image

Right side: Back to Link, Title, Description?

Amazing, thanks!

#4

Preferably like this

but this is good too...

Add this to Last Line in Code Injection > Footer

<script>
  $(document).ready(function(){
    $('h1.eventitem-title').insertBefore('div.eventitem-column-content .button-block');
    $('li.eventitem-meta-item.eventitem-meta-date.event-meta-item').insertAfter('h1.eventitem-title');
});
</script>
<style>
  li.eventitem-meta-item.eventitem-meta-date.event-meta-item {
    list-style: none;
}
</style>

Apologies got it to work, thank you so much for the help!

On 1/23/2024 at 8:20 AM, tuanphan said:

#1. Use this CSS code

/* Hide date on event list */
.eventlist-datetag {
    display: none !important;
}
/* Hide date on event detail */
li.eventitem-meta-item.eventitem-meta-date.event-meta-item {
    display: none;
}

#1b. Date format, you can see this thread

#2. Add this code to Custom CSS

/* Event list to grid */
@media screen and (min-width:768px) {
div.eventlist {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    grid-gap: 10px 10px;
}

div.eventlist article {
    margin: 0 !important;
    width: 100% !important;
    flex-direction: column;
}

div.eventlist article>* {
    width: 100% !important;
}

.eventlist-column-thumbnail {
    padding: unset !important;
    height: auto !important;
}

.eventlist-column-thumbnail img {
    position: static !important;
}}

#4. So

Left side: Image

Right side: Back to Link, Title, Description?

Hi, 

Thank you for sharing these codes! with #2 I was able to have my event listing come in grid format. I removed the event decription as well. However I still needed the event column-info to appear. 
Please help with code to align the info to the left edge of the event pic. 

Thank you very much!

18 hours ago, Naoms said:

Hi, 

Thank you for sharing these codes! with #2 I was able to have my event listing come in grid format. I removed the event decription as well. However I still needed the event column-info to appear. 
Please help with code to align the info to the left edge of the event pic. 

Thank you very much!

You can use this new code

/* Event list to grid */
@media screen and (min-width:768px) {
div.eventlist {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    grid-gap: 10px 10px;
}

div.eventlist article {
    margin: 0 !important;
    width: 100% !important;
    flex-direction: column;
}

div.eventlist article>* {
    width: 100% !important;
}

.eventlist-column-thumbnail {
    padding: unset !important;
    height: auto !important;
}

.eventlist-column-thumbnail img {
    position: static !important;
}
.eventlist-column-info {
    padding-left: 0px !important;
}
}

9 hours ago, tuanphan said:

You can use this new code

/* Event list to grid */
@media screen and (min-width:768px) {
div.eventlist {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    grid-gap: 10px 10px;
}

div.eventlist article {
    margin: 0 !important;
    width: 100% !important;
    flex-direction: column;
}

div.eventlist article>* {
    width: 100% !important;
}

.eventlist-column-thumbnail {
    padding: unset !important;
    height: auto !important;
}

.eventlist-column-thumbnail img {
    position: static !important;
}
.eventlist-column-info {
    padding-left: 0px !important;
}
}

 

Thank you so much! This worked 😄