Custom CSS Injection

Not a fan of our out of the box experience? Want to add something to your page that Blackthorn doesn't offer? Spice it up! We support injecting custom CSS into Events, Event Settings, and Event Groups!


Setup

CSS injection is supported on 3 levels: Event Settings, Event, and Event Groups. The more granular levels will take priority over higher levels (Event and Event Groups > Event Settings).

  1. Adding CSS is easy. First, navigate to the Event, Event Settings, or Event Group objects.
    The Custom CSS Url field will be located on all three.

  2. There is a hierarchy of design since it can be added to three different locations. Event settings is the highest level applying to all events, Event Group in the middle, and Event at the most granular level. This ensures the highest level of flexibility in adding CSS.

    • Event > Event Group > Event Settings
  3. Create custom CSS and add it to the Custom CSS Url field!

Note: Custom CSS must be correctly served as a public file with a MIME type of 'text/css' in order for it to load correctly.

  • Check out this short video on how to host your Custom CSS File on Google Drive.

How to target and modify CSS

Check out this short video to learn how to target classes and modify CSS.

Examples

Example 1

Removing the Date and Time:

By default, the event overview page would look similar to this:

By adding this CSS:

.welcome.ng-star-inserted {
    display: hidden;
}
  .start-dates {
    display:none !important;
  }
  #date-and-time {
    display:none !important;
  }

It will hide the "Date & Time" section, as well as the calendar date above the event title.

Example 2

After registering for an event, an attendee would be greeted with this message by default:

By adding this CSS:

.check {
  display:none !important;
}

It will hide the "Green Checkmark"


Did this page help you?