Jump to content

Customise events page

Recommended Posts

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 comment

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

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 comment

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 comment

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 comment

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 comment

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 comment
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 comment

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 comment

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 comment
  • 5 months later...
  • 2 weeks later...

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! 🙂

 

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

Link to comment

Create an account or sign in to comment

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

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.