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:
- Click on the “Add” button to add new CSS.
- Type in or copy/paste the changes you would like to make.
- Click on .
Note: You need to publish the changes (see below) to make the changes visible on the website. Until then there won’t be any visible change on your website.
Preview and/or publish the changes
Preview or publish changes by doing one of the following:
- If you wish to preview your changes select .
- To make visible the changes on the website you need to publish the changes. To publish, select
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;
}