Custom CSS Injection
  • 26 Feb 2024
  • 2 Minutes to read
  • Dark
    Light

Custom CSS Injection

  • Dark
    Light

Article Summary

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.

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 is 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' 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.

Hosting Custom CSS Files

Important Information

Hosting custom CSS files in static resources is not supported.

To store your custom CSS files in Salesforce, we recommend using Salesforce files. 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.
  3. Upload the .css file to Files.
  4. Select the newly created .css file in Salesforce and select Public Link at the top of the page.
  5. Make sure the Expiration Date and Password are toggled “Off” and copy the generated link.
  6. Open the URL in a new browser and click Download.
  7. Navigate to your downloads and click Full Download HIstory.
    CustomCSSInjection_ViewAllDownloads
  8. Find the .css file.
  9. Right click the URL (downloaded file) and click Copy Link Address.
    CustomCSSInjection_CopyLinkAddress
  10. Paste that address into the Event Settings’ Custom CSS Url field.
  11. Go to the related Event record.
  12. Click Update and notice Custom CSS is active.

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

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