Using Custom HTML

Using Custom HTML

SharePoint users may find that the Rich Text Editor does not provide enough flexibility for their layout needs. The best way to have more control over your site is to directly insert HTML. This document will go over how to insert custom code into your agency’s web site. Please note that adding custom code can impact accessibility, so it's important to exercise caution and test your changes.

Learning HTML/CSS/JavaScript

The purpose of this document is not to teach how to use HTML, CSS or JavaScript but instead focuses on how to effectively use it on your website. There are many resources on how to learn these skills.

• W3Schools
• MDN Web Docs
• freeCodeCamp
• Kevin Powell (YouTube)
• Web Dev Simplified (YouTube)

Adding or Editing HTML on a Web Page

You can insert HTML into any content well. The columns displayed will vary depending on your page layout. These content wells are responsive, meaning that the layout will change based on whether you are viewing the page on a computer or a phone.

Edit the Page

1. Go to your site’s authoring environment.
2. Navigate to the page you would like to update or view the HTML
3. Using the gear icon in the upper right corner, select “Edit Page” This will open the page for editing as well as checking it out to you. While the page is checked out others will be unable to edit the page until it has been checked in.

View/Edit the HTML

1. Click into the content well you would like to edit/view to place the cursor. Positioning your cursor on a line of existing content will open the page source at the cursor’s location.
2. Using the SharePoint ribbon, select the “Format Text” tab
3. Click the “Edit Source” button. Note that on smaller screens, this button, as well as some others can be consolidated under a “Markup” button. If this is the case, select “Edit Source” from the dropdown the Markup button loads.
4. A modal will open with “HTML Source” at the top. Here you can view or edit any existing HTML in that section or add new content.

Saving Your Changes

1. Once you finish editing, click “Save” from the SharePoint ribbon’s “Page” tab to save the changes for your personal use only. Be sure to test your changes to ensure it displays correctly across different devices.
2. To make your changes visible to other users, select “Check In” Note that while the page is checked out, others cannot edit it.
3. When you are ready to make it available publicly, choose “Publish” from the SharePoint ribbon’s “Publish” tab. Depending on your agency’s policy, this will either make the page live immediately or will submit a request for approval.

Using Embedded Code

Sometimes you will need to insert code from a third-party application or website. For security reasons, the HTML Editor strips out certain HTML tags, many of which are required for this third-party code to run. To add code like this you would use the “Script Editor”

Edit the Page

1. Navigate to the page you would like to update or view the HTML
2. Using the gear icon in the upper right corner, select “Edit Page” This will open the page for editing as well as checking it out to you. While the page is checked out others will be unable to edit the page until it has been checked in.

Adding the Script Editor

1. Click into the content well where you would like to add the code and place the cursor
2. Using the SharePoint ribbon, select the “Insert” tab.
3. Select the “Web Part” button
4. Select the “Media and Content” category
5. Select “Script Editor” part and select the “Add” button
6. Select the “EDIT SNIPPET” button from the Script Editor web part
7. A white rectangular object with black lines
8. Description automatically generated
9. Paste your HTML into the modal window.

Moving your Script Editor

To move content from the Script Editor reliably, edit the HTML of the content area and physically relocate the code. SharePoint converts the Script Editor’s code into a series of divs which can be cut and pasted wherever it needs to go. Ensure that you get the entire block of code when cutting the content.

Editing the HTML of a SharePoint List Column

Some columns in SharePoint Lists can accept custom HTML To enable this functionality, a column’s type should be configured to “Multiple Lines of Text” and have the “Enhanced rich text (Rich text with pictures, tables and hyperlinks)” option selected.

The easiest way to tell if a column can accept custom HTML is to look for the “Edit Source” button when the cursor is in that column while editing a list.

Adding Custom CSS/JavaScript

Although you can use inline styles for your custom HTML, this approach is not optimal. To include custom CSS classes to your website or to add custom JavaScript you can add them the “agency” files that is are the root of your agency’s website under “Style Library” > “CSS” > “agency.css” for the CSS and “Style Library” > “JS” > “agency.js” for the JavaScript