Customise events page

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

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.

Please see Event Content End Buttons Move to Meta.

Let us know how it goes.

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

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.

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. 

How do I "bold" the Title Lines of each of my upcoming events?

https://www.wisdom2be.com/events-wisdom-seekers

@Lecreesma

Add the following to Design > Custom CSS.

.eventlist-title .eventlist-title-link {

  font-size : 18px !important;
  font-weight : bold;
  
  }

This is for a v7.1 site.

Let us know how it goes.

Wonderful!  One last thing, is it possible to adjust the "font size" of the Events Tiles?

23 minutes ago, Lecreesma said:

is it possible to adjust the "font size" of the Events Tiles?

I have updated my code post. You can use numbers as I have done or use words such as smaller, bigger, etc.

When i change the font size number nothing happens :  like 18px to 12px

.eventlist-title {

  font-size : 18px;
  font-weight : bold;

  }

48 minutes ago, Lecreesma said:

When i change the font size number nothing happens :  like 18px to 12px

I've updated my code again. Replace the previous version with the new code.

Let us know how it goes.

It works!  Thanks so much for your help.  I know you probably have bigger and better things to do so I really appreciate your time.

3 minutes ago, Lecreesma said:

I know you probably have bigger and better things

Au contraire mon ami (on the contrary my friend). I'm here to help! I help with the things that interest me! 🙂

I have updated the cited code in my Feb. 25th post. I've tried to make the code a little more generalized for others to use.

@katieslee It may work for your clients site as well. If your current code is working well no rush to check the new code out. Basically I tried not depend on the 1, 10, 1 column you has set for the event layout. I referred to your site in updating the code and it looks like you've altered my original code in a similar manner! 🙂