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 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 Customizations -> Custom CSS

Add Custom CSS

To add customer CSS just follow the simple procedure below:

  1. Click on the “Add” button to add new CSS.
  2. Type in or copy/paste the changes you would like to make.
  3. Click on .

Preview and/or publish the changes

Once the tou can preview or publish your changes:

  1. If you wish to preview your changes select .
  2. 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 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;
}


Tags: