---
title: "Custom CSS Injection"
slug: "custom-css-injection"
tags: ["Events"]
updated: 2026-09-02T12:34:50Z
published: 2026-09-02T12:34:50Z
canonical: "docs.blackthorn.io/custom-css-injection"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://docs.blackthorn.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Custom CSS Injection

**September 2026: check your CSS after upgrading**

The September 2026 release changed the underlying structure of public event pages in two ways: an accessibility remediation pass re-leveled headings and added proper list markup, and the pages moved to a newer major version of their framework. How you configure CSS injection has not changed, and Blackthorn's own styling was updated to match.

If your stylesheet targets heading tags such as `h2`, those rules may no longer match and that part of your branding will revert to the default appearance, with no error shown. After you upgrade, walk one Event end to end at both desktop and phone widths, and do the same for any event you embed in your own site.

One deliberate change: warning messages at checkout no longer fade out on a timer. They remain until dismissed.

## Overview

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

CSS injection is supported on 3 levels: Event Settings, Event, and Event Groups and is applied additively (multiple CSS files are loaded simultaneously).

Before adding a CSS file, it is important to understand how CSS code is applied at the different levels.

If the Event Group has a CSS file in the **Custom CSS Url** field AND the **Event Settings** field contains a related Event Settings record with a different CSS file in the Event Settings **Custom CSS Url** field, then the CSS file in the related Event Settings **Custom CSS Url** field will be applied.

If the Event Settings **Custom CSS Url** field is blank but the Event Group **Custom CSS Url** field contains a CSS file that includes Event-specific styling, the Event Organizer will see the changes to all Events in the Event Group.

For example, if the file in the Event Group’s **Custom CSS Url** field includes code that will change the color of the **Share** button, the color will be updated for all Events in the Event Group.

**Note:** Using the “!important” tag in a CSS file will overwrite all other CSS files or styling rules for that specific feature on the element.

## Store Custom CSS Files

Limitation

Hosting custom CSS files in static resources is not supported.

We recommend hosting your custom CSS files in Salesforce as a Salesforce File.

Complete the steps below to store a file in Salesforce.

1. Create a .css file and save it to your desktop.
2. Navigate to Files in Salesforce.  

![CustomCSS_UploadFiles_1](https://cdn.document360.io/f977eec0-500f-40a3-b663-724a51f78075/Images/Documentation/CustomCSS_UploadFiles_1.png)
3. Click **Upload Files** to upload the .css file to Files.

## Copy CSS Files

1. Select the newly created .css file in Salesforce and click **Public Link** at the top of the page.  

![CustomCSS_UploadFiles_2](https://cdn.document360.io/f977eec0-500f-40a3-b663-724a51f78075/Images/Documentation/CustomCSS_UploadFiles_2.png)
2. Make sure the **Expiration date** and **Password** are toggled “Off” and click **Create Link**.  

![CustomCSS_UploadFiles_3](https://cdn.document360.io/f977eec0-500f-40a3-b663-724a51f78075/Images/Documentation/CustomCSS_UploadFiles_3.png)
3. Click **Copy Link** to copy the generated link.
4. Open the URL in a new browser and click **Download**.  

![CustomCSS_UploadFiles_4](https://cdn.document360.io/f977eec0-500f-40a3-b663-724a51f78075/Images/Documentation/CustomCSS_UploadFiles_4.png)
5. Navigate to all downloads and find the .css file.  

![CssDownloadGif](https://cdn.document360.io/f977eec0-500f-40a3-b663-724a51f78075/Images/Documentation/CssDownloadGif.gif)
6. Copy the URL (downloaded file). You may need to right-click the file and click **Copy Link Address**.

## Add a CSS File

1. Open the Event, Event Settings, or Event Group record where you want to add the CSS. The **Custom CSS Url** field is located on all three.
2. Click the **Pencil** icon next to the **Custom CSS Url** field.
3. Paste the file URL in the **Custom CSS Url** field.
4. Click **Save**.
5. Go to the related Event record.
6. Click **Update**.

The new Custom CSS will now be visible.

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

### Desktop vs. Mobile

Some elements are not shared between desktop and mobile displays. Therefore, they need different code in the CSS.

For example, the CSS class used to hide the registration button on a mobile device is different from the CSS class used on a desktop computer.

- The `.get-tickets-button` class works for devices wider than 600px.
- The `.mobile-registration-action-container.ng-star-inserted` class works for phone and tablet devices smaller than 600px.

Sample code snippet:

```
.get-tickets-button, .mobile-registration-action-container.ng-star-inserted {
    display: none;
}
```

Both code snippets serve the same purpose and hide all **Get Tickets** or **Register** buttons on mobile, tablet, and desktop devices.

## Target and Modify CSS

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

[Embedded content](https://www.youtube.com/embed/Os3ZjXHnbvQ)

## Examples

### Example 1: Remove the Date and Time

By default, the Event overview page would look similar to this: ![example 1 1](https://cdn.document360.io/f977eec0-500f-40a3-b663-724a51f78075/Images/Documentation/example%201%201.png)

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](https://cdn.document360.io/f977eec0-500f-40a3-b663-724a51f78075/Images/Documentation/example%201%202.png)

### Example 2: Change the Greeting

After registering for an Event, an Attendee would be greeted with this message by default: ![example 2 1](https://cdn.document360.io/f977eec0-500f-40a3-b663-724a51f78075/Images/Documentation/example%202%201.png)

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

```
.check {
  display:none !important;
}
```

![example 2 2](https://cdn.document360.io/f977eec0-500f-40a3-b663-724a51f78075/Images/Documentation/example%202%202.png)

### Example 3: Add a Custom Font

The example below imports the Gilroy font and applies it to the body of the document. This results in the Event webpage using the Gilroy font.

```
@import url('https://fonts.cdnfonts.com/css/svn-gilroy');
@import url('https://fonts.cdnfonts.com/css/gilroy-bold');

body {
    /*font-family: 'SVN-Gilroy', sans-serif;                                                                  
    font-family: 'Gilroy-Regular', sans-serif;
    font-family: 'Gilroy-Heavy', sans-serif;
    font-family: 'Gilroy-Light', sans-serif;
    font-family: 'Gilroy-Medium', sans-serif;*/
    font-family: 'Gilroy-Bold', sans-serif;
}
```