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 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

Preview or publish changes by doing one of the following:

  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 "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;
}


Tags: