How To Host & Include External CSS Stylesheets or Javascript Libraries

Link: https://support.brilliantdirectories.com/support/solutions/articles/12000075579-how-to-host-include-external-css-stylesheets-or-javascript-libraries

It's possible to include and reference 3rd-party CSS stylesheets and JavaScript Libraries. They can be included in many areas of the platform. The most common areas to reference 3rd-party scripts are listed below:



1. Site-Wide References

Custom scripts included here will be applied throughout the entire website.


Navigate to Settings > Design Settings > Custom CSS / HEAD tab > Enter your code in the Additional HEAD Code input field



2. Page-Level References

Custom scripts included here will only be applied on the specific web page they are referenced on.


Navigate to Content > Web Page Builder > edit a specific Web Page > use the HEAD or Footer JavaScript tabs as needed to insert and reference 3rd-party scripts




3. Custom Widget References

Custom scripts included here will only be applied on web pages the custom widget is rendered on.


Navigate to Toolbox > Widget Manager > edit a specific Widget > use the HTML or JavaScript tabs as needed to insert and reference 3rd-party scripts



Need to Host Stylesheets or JavaScript Files Online?


To reference 3rd-party scripts and libraries they need to already exist and be hosted online. For the security of the Brilliant Directories network at large, 3rd-party scripts and libraries need to be uploaded and hosted elsewhere, via third-party hosting providers. This helps to maintain higher levels of security and data integrity for your website.


There are many solutions to host files online. While it is possible to use any hosting service, in this example we will recommend creating a FREE account on https://codesandbox.io and following the steps outlined below  on how to host and reference external resources. 



Step 1:


Click Sign In, no need to have an account, this page will allow you to create one using a Google Account or a Github Account:



Step 2:


Select a Google Account or a Github Account



Step 3:


Click Create Sandbox to start the upload process:



Step 4:


Select the Static option with the HTML 5 logo:



Step 5:


In order to upload the CSS file to the sandbox use the following upload button:



Step 6:


Choose the CSS file to be used:



Step 7:


To view the path to the CSS file which exists in the sandbox select the following option



Step 8:


This is an example of the URL where the CSS file will exist on:




Step 9:


The CSS file path will be the name of the custom CSS file and the URL:



Step 10:


Add the link to the CSS stylesheet in any of the areas mentioned before, this is an example of adding the link to the HEAD section of the website: