Creative codes for custom event lists in Squarespace

events

Oct 15

Squarespace's event collections are great for organizing your upcoming events, but let's be honest – the design options are a little limited, and that "View Event" button could use some pizzazz. In this tutorial, you'll learn how to create two unique event list designs with custom code! Before copying the codes below, make sure you watch the video so you can understand how they work and what part of the code you'll want to customize to fit the style of your own unique website.

Here are the codes from this tutorial. Make sure you customize the colors & other values in this code so it matches the unique style of your own website.

/* event list style code from insidethesquare.co */
/* border */
.eventlist-event{
  border-top:1px solid #333;
  margin:auto;
  padding: 2rem 0rem;
  align-items:center!important;
}
.eventlist-event:first-of-type{
  border-top:none!important
}

/* button */
.eventlist-button{
  font-size:0!important;
  padding:1rem!important;
  transition: all .5s!important
}
.eventlist-button:before{
  content:"SIGN UP →";
 font-size:1rem;
}
.eventlist-button:hover{
  background:pink;
  color:#333;
  font-weight:500!important;
  transition: all .5s !important
}

/* ratio */
.eventlist-column-thumbnail{
  width:20%
}
.eventlist-column-info{
  width:70%
}

/* event list style code from insidethesquare.co */
/* event item */
.eventlist-event{
  background:#F8E0D9;
  align-items:center;
  margin-bottom:-1.5rem!important
}
.eventlist-column-info{
  margin-left:1rem;
  padding:.5rem
}
/* button */
.eventlist-button{
  border-radius:2rem!important;
  background:#e79b85!important;
  font-weight:400!important;
  font-size:0!important;
  padding:1rem!important;
  transition: all .5s!important
}
.eventlist-button:before{
  content:"SIGN UP →";
 font-size:1rem;
}
/* button hover */
.eventlist-button:hover{
  background:#333!important;
  color:#fff;
}
/* mobile style */
@media only screen and(max-width:640px){
  .eventlist-event *{
    text-align:center;
    margin-left:0rem;
  }
}