How can we help you today?

How to Add Custom HTML Anywhere on a Modern Page

In this advanced tutorial, we will show you an example of how you can insert Custom HTML code anywhere on a Modern Page using the ShortPoint Theme Builder. You will require some HTML, JavaScript (jQuery) and Browser Developer Tools knowledge. By the end of your tutorial you will be able to add custom code to any element located on a Modern Page. Here is an example of what you can achieve:



Step 1: Identify the Target Location


Where do you want to add the custom HTML code? You will have to choose a location for it and further explore its inner HTML structure using the browser's Developer Tools. We recommend using Google Chrome for this tutorial.


Let's say that we want to add a description underneath our Communication Site's top navigation element. Let's open up Developer Tools in Chrome and see what the code looks like underneath:



We will have to use the following selector so let's write it down:

.ms-HorizontalNavItems

Step 2: Prepare the Custom JavaScript Code


var $ = shortpoint.$
var $targetElem = $('.ms-HorizontalNavItems');
var customHTML = [
  '<div class="shortPointCustomHTML">',
  '  <p>This text has been inserted using the <strong>Shortpoint Theme Builder</strong>!</p>', 
  '</div>'
].join('\n')
$( document ).ready(function() {
  $(customHTML).insertAfter($targetElem);
});

The first line allows us to use the jQuery library.

The second line sets a variable to identify the target element we located in the previous step.

The third line and the following lines allow you to add HTML lines of code as string elements of an array which will be inserted into the page as regular HTML.


We are using the .insertAfter() jQuery method which will insert our custom HTML after a specific HTML element which we've targeted using a class selector.


Step 3. Add the Custom JavaScript in the Theme Builder


Launch the Theme Builder, navigate to Utilities > Custom JavaScript, copy the code from the above section and insert it in the textbox. Click Apply and Publish and you should be good to go. After the page finishes saving and reloads, you should see the following in your Developer Tools:


Hopefully this has been helpful to you and you are able to achieve the needed look and feel.


Related articles:


Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.

World's best intranet sites are designed using ShortPoint

Get started today! Learn more
See all 15 topics

Start a trial

Ignite your vision. Install ShortPoint directly on your site, or play in sandbox mode. No credit card required.

Get started today

World’s best intranet sites are designed using ShortPoint

Thousands of companies using ShortPoint everyday to design, brand and build award winning intranet sites.

Get started Learn more