There are several ways to add custom CSS and JavaScript to your website, depending on whether you want the changes to apply to a single page or across the entire site.
Script Editor Web Part
The script editor web part allows you to insert custom HTML, CSS or JavaScript into the page at the location of your cursor. This means the code is added to the middle of the HTML structure, not at the top or bottom of the page. You can use multiple Script Editor web parts on a single page. To add the Script Editor,
Note: Code added this way only affects the specific page it's placed on and will not apply site-wide.
To add the Script Editor, click the "Web Part" button from the "Insert" ribbon and select it from the "Media and Content" section. You can then add the code by clicking on the "EDIT SNIPPET" link.
Template Settings
The "Page Head" section in the Template Settings allows you to insert custom HTML directly into the <head> of the document. This is useful for adding third-party scripts or linking to external CSS/JavaScript files. You can also upload custom CSS or JavaScript files to your site’s Style Library and include them in this section. When you are done, check in your changes and the code will be immediately included on the live site.
Be careful when editing the Page Head section. It often contains important tracking scripts or site-wide functionality. Avoid deleting or overwriting existing code unless you're certain it's safe to do so. In addition, checking in your changes will immediately push those changes to your live site.
Agency Files
Each agency site includes two shared files: agency.css and agency.js. These are automatically referenced in the <head> of every page, making them ideal for adding custom code that should apply site-wide. You can access these files by logging into the authoring environment on your sites homepage, selecting the small gear icon at the top and choosing Site Settings. Then, depending on the file you want to edit, follow these steps:
agency.css
From the root site, select "Style Library" > "CSS" > "agency.css"
agency.js
From the root site, select "Style Library" > "JS" > "agency.js"
To edit these files:
From the appropriate file, click the "..." icon and select "Download".
Open the file in your preferred text editor and make your changes.
Save the file, then drag and drop it back into the same folder in the Style Library, replacing the original file.
Once uploaded, your changes will appear in the authoring environment but not on the live site. This is a good opportunity to test and confirm everything is working as expected. When you're satisfied, publish the files to push the changes to the live site.
Comments
0 comments
Please sign in to leave a comment.