Change the Color of the Calendar Landing Page Buttons

Creating a Template

1. Scroll down to the first sharing method, Calendar 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 follow/register to calendar buttons. 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 codes of the colors you have chosen:

   HTML

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

• .buttonregister = the first button, "follow calendar"
• .submit = the second button, "Register to follow calendar"
• .addeventstc = the last button, "follow calendar" where subscriber is presented with the add to calendar options

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