Using CSS to customize Eventact

Why use Custom CSS

Eventact allows you to customize the event website, forms, event app, and other customer-facing interfaces. This allows you to go beyond just changing colors, fonts and images using the back-office ‘Design’ settings.

Adding Rules in the Back Office

• Go to Design → Custom HTML and paste your CSS into the custom CSS area.
• In case of a website customization you can add rules just in the HTML section.

Examples

Website

• Hide the navigation bar for small screens

@media (max-width: 600px) {
  #ws-app .navbar-event .navbar-nav {
    display: none;
  }
}

• Adjust top navbar height

#ws-app nav.navbar-event {
  height: 88px;
}

• Set a custom underline for the active navigation item

.navbar-event .navbar-nav li.active a {
  border-bottom: solid 4px #1abdd8;
  padding-bottom: 6px;
}

• Set text size in a custom section based on screen size

@media (min-width: 300px) and (max-width: 991px) {
  .description-title {
    font-size: 25px;
  }
}
@media (min-width: 992px) {
  .description-title {
    font-size: 50px;
  }
}

• Make countdown numbers outlined with no fill color

.countdown .part .value {
  color: transparent;
  -webkit-text-stroke: 2px #960d54;
  text-stroke: 2px #aaf0d1;
  font-weight: bold;
}

• Set background and title colors for a specific section

#section-0-77269 {
    background-color: #f5faff;
    }

#section-0-77269 h2 {
    color: #042994;
    }

#section-0-77269 h3 {
    color: #042994;
    }

• Style all buttons and button links with gradient background

.btn, a.btn, a.btn:link, .btn-link, button.btn-link {
    color: #ffffff;
    background-color: var(--ea-btn-bg-color);
    background: linear-gradient(315deg, rgb(144 43 250) 0%, rgb(242 55 168) 100% 89%);
}

• Convert link to an exhibitor page to a button-like view

.exhibitor-card .card-body a:last-of-type { 
    border: 1px solid #ac54f7;
    color: white;
    background-color: #ac54f7;
    border-radius: 6px;
    padding: 5px 10px;
}

• Change speaker images (in section id=section-Speakers-77777)

#section-Speakers-77777 .ws-section img.speaker-img {
    border-radius: 12px !important;
}

.ws-section img.speaker-img {
    border: none !important;
    border-radius: 12px;
}

Agenda

• Hide the icons up and down in session

.session-wrapper i.mdi.mdi-chevron-up {
      display: none;
    }
.session-wrapper i.mdi.mdi-chevron-down {
      display: none;
    }

• Change the color of action bar icons

.action-bar-icon a .mdi { 
  color: white;
}

• Change lecture page colors

.pv-lecture-pg .lv-lecture-container .lv-lecture-title { 
  color: #b90d0d;
}
.pv-page.pv-lecture-pg .pv-wrapper {
  background-color: white;
}
.pv-page.pv-lecture-pg .pv-author a span {
  color: #9323d2;
}

Event App

• Customize the main app appearance with a gradient background and black card borders

body#main-app {
  background: linear-gradient(55deg, #ffdbcb, #f4f2f114);
}
#main-app .card {
  border-color: black !important;
}

• Adjust the menu bar background for small screens

@media only screen and (max-width: 600px) {
  #main-app #navbar-banner.in {
    background-image: linear-gradient(
      to left,
      rgba(255, 255, 255, 1),
      rgba(255, 255, 255, 0.5),
      rgba(255, 255, 255, 0) 800px
    ),
    url(https://events.eventact.com/experience/header.png);
  }
}

Registration

• Change the button shape for a specific form (form id="55555")

#eaForm-55555 #form-btns .btn {
  border-radius: 29px;
  width: 82%;
  height: 50px;
}

• Change the button hover color for the form

#form-btns .btn:hover {
  background-color: #d28e5c;
}

• Change the shape of the input fields

#eaForm-55555 .form-control {
  border-radius: 29px;
  height: 50px;
}

• Add a shadow to the input fields

.form-control {
  box-shadow: 0px 4px 10px rgba(55, 99, 255, .2);
}

Do it yourself

To apply other CSS rules:

• Find the item you want to change
• Create the CSS rule
• Add the rule in the back office

Find Elements

• Open your website or app, press F12, and inspect the desired element in the Elements tab.
• Copy its class or ID (e.g., class="speaker-img").

Create and test CSS Rule

• Create a rule to change the element according to your design.
• You can use ChatGPT, Gemini or othe AI to create such rules. For example, a prompt can look like: "For the button with the class .btn inside the div with the ID form-btns, set the text color red and the background white."
• To restrict styling to your website only, combine it with a parent selector: #ws-app .speaker-img { display: none; }
• You can preview CSS rules directly in Developer Tools.

Add the rule

Once you’re satisfied with the result, copy the CSS rule to the Custom HTML section of the back office. Check the website to see the changes. Note: sometimes updates may take a few minutes to appear.