Advanced users can customize some elements of the Grenadine Event Website using CSS (Cascading Style Sheet).
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 a style to HTML element of your Grenadine Event Website.
Note: This is for advanced users and Grenadine does not provide support or advice for building CSS. If you don’t know what you’re doing here, then maybe you’ll want to leave this alone. All CSS that you enter here will be scoped to your event’s public website only, and you will not affect your other events.
If you would like to know more about CSS, here is tutorial on CSS https://www.w3schools.com/css/
Navigation Path
Add Custom CSS
To add customer CSS just follow the simple procedure below:
- Write CSS in the textbox designated for this purpose.
- Type in or copy/paste the changes you would like to make.
- Click on .
Your changes will be reflected on the website. Please allow up to 3 minutes to see your changes.
CSS Examples
Below are some CSS you can use as examples.
/* --------------------------------------------------------------- */
/* replaces the main event title color and hide the title's shadow */
/* --------------------------------------------------------------- */
h1.big-event-name {
color: #bf1f40;
text-shadow:none;
}
/* ------------------------------ */
/* replaces the main accent color */
/* ------------------------------ */
body {
--accent-color: #534E45;
}
/* ------------------------------------------ */
/* hides the "About" section on the home page */
/* ------------------------------------------ */
body div#event-info {
display: none;
}
/* --------------------------------- */
/* hides the who's attending section */
/* --------------------------------- */
body div#whos-attending-container {
display: none;
}
/* ---------------------------------------------------- */
/* makes the background of the ticket window translucid */
/* ---------------------------------------------------- */
body div.event-details-box {
background-color: rgba(255,255,255,0.3);
}
/* -------------------------------------------------------------------------------------------------------------- */
/* remove the ribbons on the schedule page at the top right corner of each session tiles ("New", "Updated", etc.) */
/* -------------------------------------------------------------------------------------------------------------- */
#ribbon-container {
display: none;
}
/* ------------------------------------------------------------- */
/* remove the registration menu item and button on the home page */
/* ------------------------------------------------------------- */
.tickets-button-div {
display: none;
}
.tickets-button-div {
display: none;
}