Introduction
Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language like HTML. You can add custom CSS to apply styles to HTML elements on your Grenadine Event Website.
To apply custom CSS on your event website, locate website settings in Grenadine Admin -> Your Event -> Event settings -> Website. You will find a text area to enter your custom CSS at the bottom of the page.
Note: Custom CSS is intended for advanced users. All CSS that you enter will be scoped to your event’s public website only and will not affect your other events. If you are interested in assistance with custom CSS for your event website, you can contact Grenadine support.
If you are interested in learning more about CSS, check out this documentation: https://www.w3schools.com/css/.
CSS Examples
Below are some examples of custom CSS you can use on your Event Website.
Replace the main event title color on Home page
h1.big-event-name {
color: #bf1f40;
}
Replace the Event Website accent color
body {
--accent-color: #534E45;
}
Hide the event location section on the Home page
div#event-info {
display: none;
}
Hide the Who’s Attending section on Session Detail pages
div#whos-attending-container {
display: none;
}
Remove the labels on the Schedule page at the top right corner of each session tile (“New”, “Updated”, etc.)
div#session-label-container {
display: none;
}