Brightspot allows content creators to modify the actual page with raw HTML, CSS, and Javascript if specific and custom changes need to occur to the site. This will not be a tutorial on HTML/CSS/JS but rather how to set up the module to start making specific, custom changes to your content.
Setting Up Custom Code
To get the module to add custom code to your page do the following:
- Click on add under the content.
- Scroll to the bottom of the options and click on the misc tab.
- In this tab, there is an option for a Raw HTML Module. Click on it.
Once the module is loaded, the main screen will pull up. Here you can give it a name if you'd like. If you do choose a name or description, keep in mind it will show up on your page.
At the top of the module, there are three tabs. Each of these tabs will be associated with a different type of code that can be used for your site. In the CSS/JS tab you can set the internal name, which will be the name you link to inside your HTML tab. The CSS/JS tab can also link to other external scripts outside of Brightspot if that is something necessary for your page (see photo on right).
Your script will the preview page as your code, so you can view the changes to the page "live" without having to publish to see the finished results.
Tips
Coding
Inside the HTML tab, instead of using all three tabs to write out your code, can also use <style> or <script> tags here as well to keep everything inside one file. This is especially useful if the page only needs minor, small lines of code done to it.
Finding Brightspots IDs
If there is a specific module or content type that you need to be modified for your page, you can use the Inspect Element feature that most browsers provide.
On Chrome and Edge, right-click anywhere on the page and choose Inspect Element.
If you are running Firefox, click on three lines in the top right of your browser, select Web Developer, and then Inspector.
This will allow you to see what IDs Brightspot has given the modules and content within them and you can modify them as needed.
