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.

If you would like to know more about CSS, here is tutorial on CSS https://www.w3schools.com/css/

Grenadine Event Manager -> Your event -> Website -> Website Configuration -> Custom CSS

Add Custom CSS

To add customer CSS just follow the simple procedure below:

  1. Write CSS in the textbox designated for this purpose.
  2. Type in or copy/paste the changes you would like to make.
  3. 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;
}