Skip to main content
All CollectionsEvent Website DesignEvent Landing Page
Adding Custom CSS to Your Event Page
Adding Custom CSS to Your Event Page

Use our CSS editor and change specific elements to your Event Landing Page!

Ariane Ramirez avatar
Written by Ariane Ramirez
Updated over 10 months ago

Add Custom CSS to Your Event Landing Page

Adding Custom CSS when setting up your landing page gives you more design freedom. Since our themes are hardcoded, we added an option for you to add your code to customize some of the areas in the event landing page, such as changing the color and size of the event title, changing the background colors of the social media icons, and other buttons.

Important Notes:

  • Adding custom CSS to your site can break your design and potentially harm your site. Please be sure to use caution while using this feature. Our support team will be limited in their ability to help with design-related issues if you have custom CSS.

  • CSS should only be used to change fonts, colors, borders, round corners, shapes, and backgrounds.

  • This feature is not available in the attendee app

Add Custom CSS

  • Go to the Event Design tab

  • Select Event Website

  • Click Edit Website under Standard

  • Scroll down and click Advanced Customization

  • Toggle on Enable Simple Custom CSS

  • Paste in your custom code

  • Click Update Custom CSS

That's it! Go to your event page to check if your code worked!

Here are some sample codes you can use

Customize the event name font color and size for theme C

/* theme C */  
.event-theme-name #event-name 
{ color: #e76f51; font-size: 36px; }

Add a shadow box behind the event name for theme C

/* theme C */ 
.event-theme-name
{ box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px; }

Change the color of the tagline

#EventTagLine {
  color: #FE5000;
}

Change the "Add to Calendar" color

#isPasted a,
.new-theme-add-to-calendar #ae-dropdown .new-landing-page-add-to-calendar {
color: #FE5000 !important;
}

Change the background color of social media icons

.social-share-link{
background-color: #74c69d;
}

Change the background and font color of the More Events and Contact button

.organizer-btn-box #moreEvents, .organizer-btn-box #contactPopup{
background-color: #0bb758;
color: #a9f28f;
}

Did this answer your question?