How to turn event calendar links into buttons // Customize Squarespace Event Links for Google & iCal

[@InsideTheSquare]

⚠️ IMPORTANT CSS UPDATE ⚠️ When logging into Squarespace, if you see the word "Website" at the top of your menu, you are using their new internal navigation!
To edit the CSS of your Squarespace website, click on the word "Website" and scroll to the bottom of the list of pages. Here you'll see "Website Tools" - click on that option and select "Custom CSS" to open the CSS panel and add your code here. For more information, watch this tutorial: th-cam.com/video/euJqHXs_L1M/w-d-xo.html

[@smoothviews]

Hi, I am finding something wrong with this piece of code - /* This code add some space to the top */
.eventlist-meta-export {margin-top:1rem!important}* = do you know what is wrong with it? Thanks for your help!

[@connieolmos5339]

Thank you sooo much! You always have useful information and easy to follow

[@InsideTheSquare]

Yay! So happy I could help! 🙌🏻

[@jenglenn8656]

This is SO helpful! I'm buying you coffee! - Do you know if you can edit the title of the event before adding it to someone's calendar? I manage a website for a musician. I add a lot of events to his calendar and I don't want to clutter it up by putting his name into every event. But, when it gets added to someone's calendar, I'd like to append his name to the title. So, if he's playing at "Bill's Place". I want his calendar event to just say "Bill's Place". But when someone adds it to their personal calendar, I'd like that event to say "My Musician at Bill's Place". Is that possible?

[@InsideTheSquare]

Intersting question! That kind of functionality is outside the scope of Squarespace, but there might be a creative add-to-calednar link you could embed that would allow for that. I'd recommend posting in the forum to see if anyone has any software suggestions or workarounds. Best of luck with your project! :)

[@MikeGoggin]

This is great! Many visitors to my site are not savvy to text links and this will help tremendously! I don't suppose there is a way to do likewise with the "(map)" link that comes with adding an event location?

[@InsideTheSquare]

Great question! Feel free to submit a code help request here: insidethesquare.co/code-help

[@IthaCAT1026]

Is there a way to custom CSS the "learn more" button for events to go to a custom URL? In Squarespace 7.1, I can't change the prefix URL to establish a fully custom redirect to the host page for the event I wish to promote. Thanks in advance!

[@InsideTheSquare]

CSS changes the style of a site and not the way it works, so we can't use it to create or change a link. I'd recommend posting in the Squarespace forum to see if anyone has a workaround. Best of luck with your project!

[@GreenGeraldine-band]

I'd love to use this, however mine shows a syntax error on line 9 (.eventlist-meta-export-ical, .eventitem-meta-export-ical). Any thoughts on how to fix this?

[@InsideTheSquare]

a syntax error is a sign of an incorrect character - usually a space or a symbol in the wrong place. can you paste all of your code here? if not, check out my toubleshooting tips at insidethesquare.co/code-help

[@GreenGeraldine-band]

@@InsideTheSquare Thank you! I literally copied and pasted your text:
/*This code removes the divider line */
.eventlist-meta-export-divider, .eventitem-meta-export-divider, [data-content-field="categories"]{display:none}
/* This code add some space to the top */
.eventlist-meta-export {margin-top:1rem!important}*
/* This code is for the iCal link */
.eventlist-meta-export-ical, .eventitem-meta-export-ical{
background:#e5f5f6;
padding: .5rem;
border-radius:1rem;
}
.eventlist-meta-export-ical:hover, .eventitem-meta-export-ical:hover{
background:#efefef;
}
/* This code is for the Google link */
.eventlist-meta-export-google, .eventitem-meta-export-google{
background:#F6EDCE;
padding: .5rem;
border-radius:1rem
}
.eventlist-meta-export-google:hover, .eventitem-meta-export-google:hover{
background:#efefef;
}

[@GreenGeraldine-band]

@@InsideTheSquare Thank you! I literally copied and pasted your text as written:
/*This code removes the divider line */
.eventlist-meta-export-divider, .eventitem-meta-export-divider, [data-content-field="categories"]{display:none}
/* This code add some space to the top */
.eventlist-meta-export {margin-top:1rem!important}*
/* This code is for the iCal link */
.eventlist-meta-export-ical, .eventitem-meta-export-ical{
background:#e5f5f6;
padding: .5rem;
border-radius:1rem;
}
.eventlist-meta-export-ical:hover, .eventitem-meta-export-ical:hover{
background:#efefef;
}
/* This code is for the Google link */
.eventlist-meta-export-google, .eventitem-meta-export-google{
background:#F6EDCE;
padding: .5rem;
border-radius:1rem
}
.eventlist-meta-export-google:hover, .eventitem-meta-export-google:hover{
background:#efefef;
}

[@EricVieira-v1f]

Can you somehow change the text of the link or add some text to say "click to add to calender"? Thanks

[@InsideTheSquare]

Great question! You can use the before and after pseudo states to add that text. I don’t have a tutorial on that specifically, but trying playing around with this code, changing the quotation marks to the correct ones (I’m on my phone so I can’t type it accurately 😅)
.eventlist-meta-export a:before {content: “click to add this to your ”}
.eventlist-meta-export a:after {content: “calendar”}

[@camatkaracreative]

Hi! What is the code for mobil? ty!

[@InsideTheSquare]

Check out this tutorial that will teach you how to create an alternate layout for mobile: th-cam.com/video/AQnwhitEqnI/w-d-xo.html