Try ShortPoint nowIn 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:
