Custom CSS Injection
  • 13 Jul 2022
  • 1 Minute to read
  • Dark
    Light

Custom CSS Injection

  • Dark
    Light

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.

Target and Modify CSS

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

Examples

Example 1: Remove the Date and Time

By default, the Event overview page would look similar to this:
example 1 1

By adding the following CSS, it will hide the "Date & Time" section, as well as the calendar date above the Event title.

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

example 1 2

Example 2: Change the Greeting

After registering for an Event, an Attendee would be greeted with this message by default:
example 2 1

By adding the following CSS, it will hide the green checkmark.

.check {
  display:none !important;
}

example 2 2


What's Next