Chaturbate Social Media Icon Header Maker

If you are looking to customise your Chaturbate bio page then you will want to check out my Chaturbate Social Media Icon Header Maker.

How To Use The Chaturbate Header Maker

Step 1:
Select your header background colour.

Step 2:
Now select an icon that goes behind the social media icon. (Or you can use one you have from elsewhere.)

Step 3:
Depending on what colour your background is. Choose if you want white or black social media icons. (For contrast)

Step 4:
Next select the Social Media Platform you want to add to your header

Step 5:
Enter your social media link. (Click Apply)

Step 6:
Repeat this for all your links and click the apply changes button.

Step 7:
Check your layout in the preview window and if all is good to go click the copy button.

You can see what your header is looking like in the Live preview window.

Chaturbate Social Media Icon Header Maker

Chaturbate Header Maker

Footer Color: Fade To: Fade To: Gradient Type: Radial Horizontal Vertical Your Icon Background: Or choose from:

Icon Colour: Black White Select Your Social Platform:

`; } }function addSocialLink() { const linkUrl = linkUrlInput.value.trim(); if (selectedImageSrc && linkUrl) { let bgStyle = 'black'; for (let i = 0; i < backgroundStyleRadios.length; i++) { if (backgroundStyleRadios[i].checked) { bgStyle = backgroundStyleRadios[i].value; break; } } let dynamicImageSrc = getCorrespondingImage(bgStyle, selectedImageSrc); // Use the correct image based on selectionlet socialLinkHtml = `

Link URL:

`; linksContainer.insertAdjacentHTML('beforeend', socialLinkHtml); const newLink = linksContainer.lastElementChild; const removeButton = newLink.querySelector('.removeLinkButton'); removeButton.addEventListener('click', () => { newLink.remove(); generateSidebarCode(); // Regenerate code after removal });linkUrlInput.value = ''; // Clear the URL input after adding linkUrlInputContainer.style.display = 'none'; // Hide the URL input box selectedImageSrc = ''; // Reset the selected image spriteOffset = '0px'; // Reset the offsetgenerateSidebarCode(); // Regenerate code after addition } else { alert("Please select an image and enter a URL."); } }const imageElements = document.querySelectorAll('.socialImage'); imageElements.forEach(image => { image.addEventListener('click', () => { selectedImageSrc = image.src; // Directly use src for selection spriteOffset = image.getAttribute('data-sprite-offset') || '0px'; linkUrlInputContainer.style.display = 'block'; linkUrlInput.focus(); console.log('Selected:', selectedImageSrc, 'Offset:', spriteOffset); }); });sidebarEditor.querySelector('.applyChangesButton').addEventListener('click', generateSidebarCode);submitLinkButton.addEventListener('click', addSocialLink);copyCodeButton.addEventListener('click', () => { navigator.clipboard.writeText(finalCodeOutput.value).then(function() { console.log('Code copied to clipboard'); alert("Code copied to clipboard!"); }, function(err) { console.error('Could not copy text: ', err); alert("Failed to copy code to clipboard"); }); });backgroundStyleRadios.forEach(radio => { radio.addEventListener('change', generateSidebarCode); });// Event listener for gradient type changes gradientTypeRadios.forEach(radio => { radio.addEventListener('change', generateSidebarCode); });// Event listeners for color changes document.getElementById('colorPicker1').addEventListener('change', generateSidebarCode); document.getElementById('colorPicker2').addEventListener('change', generateSidebarCode); document.getElementById('colorPicker3').addEventListener('change', generateSidebarCode);// Initial generation to show something in the iframe generateSidebarCode();