Creative codes for custom event lists in Squarespace

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 color & other values in this code so it matches the unique style of your own website.

//STYLE ONE
/* 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%
}

//STYLE TWO
/* 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;
  }
}

Related Resources

CSS is a creative code language that gives us Squarespacers creative control well beyond the settings in our design menu. If you are brand new to the concept of code, I want to encourage you to check out my class on the basics, available on demand at insidethesquare.co/learn

If you’re already comfortable with code and want to check out the rest of my Squarespace code collection. you can get access at insidethesquare.co/css