As a reseller, you might have external tools, web builders, or systems outside of the 20i platform that are integral to your workflow or your customers' operations.
const checkForElement = setInterval(function() {
// Find all elements with the specific heading class
document.querySelectorAll('h5.mb-0.float-left').forEach(function(heading) {
// Check if the heading text matches the desired section (e.g., 'Web Files', 'CDN', etc.)
if (heading.textContent.trim() === 'Your Section Name') {
// Stop checking once the element is found
clearInterval(checkForElement);
// Find the icon container within the corresponding section
const iconContainer = heading.closest('.card').querySelector('.icon-results');
// Create a new div element for the custom icon
const newIconDiv = document.createElement('div');
newIconDiv.className = 'col-4 col-sm-3 col-md-3 col-lg-3 col-xl-2 text-center col-icon';
// Create the link element for the custom icon
const newIconLink = document.createElement('a');
newIconLink.href = 'https://example.com'; // Replace with your custom link
newIconLink.target = '_blank'; // Open the link in a new tab
newIconLink.className = 'icon-grid-nav__link';
newIconLink.setAttribute('data-toggle', 'tooltip');
newIconLink.setAttribute('data-placement', 'top');
newIconLink.title = 'Your Tooltip Text'; // Set the tooltip text for the icon
// Create a container for the image element
const imageContainer = document.createElement('div');
imageContainer.className = 'image-container';
// Create the image element for the icon
const newIconImg = document.createElement('img');
newIconImg.src = '/path/to/your/icon.svg'; // Replace with the path to your custom icon image
newIconImg.alt = 'Your Tooltip Text';
newIconImg.className = 'img-fluid icon-grid-nav__icon';
// Append the image to the image container
imageContainer.appendChild(newIconImg);
// Create the text label for the icon
const iconText = document.createElement('span');
iconText.className = 'icon-grid-nav__text';
iconText.textContent = 'Your Link Text'; // Set the label text for the icon
// Append the image container and text label to the link
newIconLink.appendChild(imageContainer);
newIconLink.appendChild(iconText);
// Add the new icon link to the icon container in the section
iconContainer.appendChild(newIconDiv);
}
});
}, 1000); // Check every second until the section is found
</script>
Customizing the Code:
To tailor this code to your specific needs, you’ll need to modify the following:
Section Title: In the line if (heading.textContent.trim() === 'Your Section Name'), you can change 'Your Section Name' to match the StackCP section where you want the custom icon to appear. Valid section names include:
'CDN''Web Files''Web Tools''Email''Domain Names''Security''Logs & Stats''One-Click Installs'
Link URL: Inside newIconLink.href = 'https://example.com';, replace https://example.com with the URL you want the new icon to link to.
Tooltip Title: Modify 'Your Link' in newIconLink.title = 'Your Link'; to display the appropriate tooltip text when users hover over the icon.
Image Path: Replace /path/to/your/icon.svg with the file path to the custom icon you want to use. You can upload your icon to a website's filespace on a 20i hosting package, or use a link from an external resource.
Icon Label Text: Change 'Your Link' in iconText.textContent = 'Your Link'; to update the label text beneath the icon.
Important Notes:
- This JavaScript code will run every second until it finds the correct StackCP section (e.g., "Web Files"). Once it finds the section, it will stop running and inject the custom icon.
- If you have multiple sections to customize, you can duplicate the code and adjust each section’s title, link, and icon as needed.
