Events list page customisation

Password: sophie

Hello!

First of all, my client would like me to have a block between the upcoming and past events where I can use the font chosen on our website (i..e the upcoming events title block on the homepage). Is there a way to do this? So far, I am using code to add a title there between the upcoming and past events, but I'd love to replace this with a block where I can add my own font in line with the rest of the website. 

Secondly, my client wants me to add more spacing around and between the events. How can I do this with CSS?

Thirdly, she'd like me to add a drop down 'read more' so that you can read the excerpt on the event list page. Is this possible to do?

Many thanks! 

Poppy

Hi, please share a link to your website. You might have added it to the post, but it's not showing it 🙂

link: https://clementine-cobalt-n6rg.squarespace.com/diary

password: sophie

Thanks!

Hi, assuming you are using a template? 

For changing the block to your own font. You can target your block like below. You can get the id by using SquareSpace ID Finder.

#blockid xx { // depends how you set up your block, you would need an "a"/"p"/something else to replace xx
	font-family: roboto !important; // your own font
}

For space between the events, add this to your custom css

.eventlist-event {
	margin-top: 90px !important; // current is 68px, so anything above
}

For drop down, possible, but would require more work and depends how you want it to look.

@melody495 thank you - the second code worked great! 

I am unable to locate the block of the 'past events' title - I used this code: 

.eventlist.eventlist--past:before {
    content: "PAST EVENTS";
    display: block;
    font-size: 30px;
    text-align: LEFT;
    margin-top: 50px;
}

It would be great to replace this with either an image, or for it to be in my desired uploaded font. 

Thank you! 

1 hour ago, PoppyShotts said:

I am unable to locate the block of the 'past events' title - I used this code: 

.eventlist.eventlist--past:before {
    content: "PAST EVENTS";
    display: block;
    font-size: 30px;
    text-align: LEFT;
    margin-top: 50px;
}

put this line in your block of code

font-family: roboto !important; // your own font