Customizing Event CSS and Javascript in Events 5.0 and higher

DISCLAIMER: This CSS tag is not supported or maintained by TargetX and is meant as an example of how you may choose to use CSS within our products. Some or all of the customizations these tags provide may change or no longer apply to your instance at any time. If at any time the CSS impedes expected functionality in the TargetX product, our recommendation will be for you to remove the CSS to regain functionality.  

Custom CSS changes are stored directly in Salesforce as data on the Events Custom Code Object. To use this new object, you will first need to create a tab for Events Custom Code. To do so, please see the documentation from Salesforce on creating new tabs. 

Note: A new tab was not added as part of this package given Salesforce's limit on custom tabs. 

To create new custom CSS or Javascript:
 

Notes: 

• Leave out the Script tags when creating custom CSS or Javascript. They are automatically applied in the code and not needed.
• IMPORTANT! In order to have CSS work correctly in your Events module, you must set the Sharing Settings for external users to Public Read Only or a sharing rule must be created to share with profiles, so the site can see the record on the Events Custom Code Object. For additional information, see: Recommended sharing settings for Default External Access (Organization-wide Defaults).

1. Click "+" to see full list of tabs in Salesforce
2. Click on the Events Custom Code tab
3. Click New
4. Enter a Theme Name and copy the exact name for reference in later steps.
5. Enter the CSS or Javascript for the Events page.

Note: The custom CSS and Javascript will apply to all pages. Separate CSS or Javascript on a page by page setting is not available.

6. Click Save
7. Navigate to Setup and search for Custom Settings
8. Select Manage next to Events Settings
9. Click Edit next to the custom setting to which you'd like to apply the CSS or Javascript
10. Type or paste in the exact name of the custom code record you created into the Template Override field
11. Click Save

Note: To test this feature, you can paste the following sample CSS code into an Events Custom Code record and enter the name of that theme in the Template Override field on one of your events custom setting files.

There are two places where you can make updates to the look and feel of your public event site: your Default Community Theme and in the Events Custom Code object:

If you want to keep your logo the same between your Events page and your App Dashboard or Portal Events pages, you'll want to update the Header Logo in each of your community themes. This will ensure continuity across the board.

Note: When you update the Header Logo in your App Dashboard or Portal Community Themes, that will also change the logo on your App Dashboard or Portal Community site.