Jump to content

Events list page customisation

Recommended Posts

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

Link to comment
  • Replies 5
  • Views 1.6k
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

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

-------- > 👆 <---------- Please quote or @ me when replying, or I won't get a notification 

Melody | Squarespace Nerd

💻 💁‍♀️ 1-2-1 Squarespace Training session <- feeling stuck and want to learn?
👩‍💻 💁‍♀️ Website help <- send me your to-do list. From code to plugin to domain setup.
🧰 See the tools I use (contain affiliate links)
 Did I help? I like coffee (Thank you)

Link to comment

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.

 

-------- > 👆 <---------- Please quote or @ me when replying, or I won't get a notification 

Melody | Squarespace Nerd

💻 💁‍♀️ 1-2-1 Squarespace Training session <- feeling stuck and want to learn?
👩‍💻 💁‍♀️ Website help <- send me your to-do list. From code to plugin to domain setup.
🧰 See the tools I use (contain affiliate links)
 Did I help? I like coffee (Thank you)

Link to comment

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

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

 

-------- > 👆 <---------- Please quote or @ me when replying, or I won't get a notification 

Melody | Squarespace Nerd

💻 💁‍♀️ 1-2-1 Squarespace Training session <- feeling stuck and want to learn?
👩‍💻 💁‍♀️ Website help <- send me your to-do list. From code to plugin to domain setup.
🧰 See the tools I use (contain affiliate links)
 Did I help? I like coffee (Thank you)

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.