Change the Color of the Add to Calendar Button

Creating a template

1. Scroll down to the first sharing method, Event landing page. Create a custom event landing page template by clicking Custom Templates in the app and clicking + New Template. Add a name for the template.

   

Changing the Color

1. Now that we have named our custom template, we can customize the color of our add to calendar button. Use HTML Color Codes to select your color and then grab the HEX code.

   

2. Next, go back to your custom template and add the following style code right above the closing/head section, replacing the #000 with the HEX code of the color you have chosen:

   HTML

   <style>
   .addeventatc {background: #000 !important;}
   .addeventatc:hover {background: #000 !important;} 
   .addeventatc:active {background: #000 !important;}
   </style>
   

   

📘

These colors do not have to be the same!

5. Scroll down to the end of your custom template and click Create.
6. Head back to the event page and set your new custom template to your event by selecting it from the dropdown menu (where the newest templates are always at the top).
7. Finally, click the Event page link to view your customized event landing page!

Watch this tutorial!