Skip to main content

BlueSky Social Icon in Header

You can use the following scripts to replace either the X, YouTube or LinkedIn buttons to a BlueSky logo. Place in the Scripts tab, not an embed. Should be used in conjunction with the social color style page so that they are all black or white.

X - Black Icon 

// Replacing the Twitter Icon for a Black BlueSky Icon
document.addEventListener('DOMContentLoaded', function() {
  var twitterAnchor = document.querySelector('a[aria-label="twitter"]');
  if (twitterAnchor) {
    var img = document.createElement('img');
    img.src = 'https://4515944.fs1.hubspotusercontent-na1.net/hubfs/4515944/IM%20Background%20Images/BlueSky-Black.png';
    img.alt = "BlueSky Icon";
    img.width = 25;
    img.height = 25;
    img.style.display = 'inline';
    img.style.verticalAlign = 'top';
    
    while (twitterAnchor.firstChild) {
      twitterAnchor.removeChild(twitterAnchor.firstChild);
    }
    
    twitterAnchor.appendChild(img);
  }
});

X - White Icon 

// Replacing the Twitter Icon for a Black BlueSky Icon
document.addEventListener('DOMContentLoaded', function() {
  var twitterAnchor = document.querySelector('a[aria-label="twitter"]');
  if (twitterAnchor) {
    var img = document.createElement('img');
    img.src = 'https://4515944.fs1.hubspotusercontent-na1.net/hubfs/4515944/IM%20Background%20Images/BlueSky-White.png';
    img.alt = "BlueSky Icon";
    img.width = 25;
    img.height = 25;
    img.style.display = 'inline';
    img.style.verticalAlign = 'top';
    
    while (twitterAnchor.firstChild) {
      twitterAnchor.removeChild(twitterAnchor.firstChild);
    }
    
    twitterAnchor.appendChild(img);
  }
});

YouTube - Black Icon 

// Replacing the Youtube Icon for a black BlueSky Icon
document.addEventListener('DOMContentLoaded', function() {
  var youtubeAnchor = document.querySelector('a[aria-label="youtube"]');
  if (youtubeAnchor) {
    var img = document.createElement('img');
    img.src = 'https://4515944.fs1.hubspotusercontent-na1.net/hubfs/4515944/IM%20Background%20Images/BlueSky-Black.png';
   img.alt = "BlueSky Icon";
   img.width = 25;
    img.height = 25;
    img.style.display = 'inline'; // Ensures the image flows with the text/icons
    img.style.verticalAlign = 'top'; // Aligns the top of the image with the top of the line-box
    while (youtubeAnchor.firstChild) {
      youtubeAnchor.removeChild(youtubeAnchor.firstChild);
    }
    youtubeAnchor.appendChild(img);
  }
});

YouTube - White Icon 

// Replacing the Youtube Icon for a white BlueSky Icon
document.addEventListener('DOMContentLoaded', function() {
  var youtubeAnchor = document.querySelector('a[aria-label="youtube"]');
  if (youtubeAnchor) {
    var img = document.createElement('img');
    img.src = 'https://4515944.fs1.hubspotusercontent-na1.net/hubfs/4515944/IM%20Background%20Images/BlueSky-White.png';
    img.alt = "Bluesky Icon";
    img.width = 25;
    img.height = 25;
    img.style.display = 'inline'; // Ensures the image flows with the text/icons
    img.style.verticalAlign = 'top'; // Aligns the top of the image with the top of the line-box
    while (youtubeAnchor.firstChild) {
      youtubeAnchor.removeChild(youtubeAnchor.firstChild);
    }
    youtubeAnchor.appendChild(img);
  }
});

LinkedIn - Black Icon 

// Replacing the LinkedIn Icon for a black BlueSky Icon
document.addEventListener('DOMContentLoaded', function() {
  var linkedinAnchor = document.querySelector('a[aria-label="linkedin"]');
  if (linkedinAnchor) {
    var img = document.createElement('img');
    img.src = 'https://4515944.fs1.hubspotusercontent-na1.net/hubfs/4515944/IM%20Background%20Images/BlueSky-Black.png';
    img.alt = "BlueSky Icon";
    img.width = 25;
    img.height = 25;
    img.style.display = 'inline'; // Ensures the image flows with the text/icons
    img.style.verticalAlign = 'top'; // Aligns the top of the image with the top of the line-box
    while (linkedinAnchor.firstChild) {
      linkedinAnchor.removeChild(linkedinAnchor.firstChild);
    }
    linkedinAnchor.appendChild(img);
  }
});

LinkedIn - White Icon 

// Replacing the LinkedIn Icon for a White BlueSky Icon
document.addEventListener('DOMContentLoaded', function() {
  var linkedinAnchor = document.querySelector('a[aria-label="linkedin"]');
  if (linkedinAnchor) {
    var img = document.createElement('img');
    img.src = 'https://4515944.fs1.hubspotusercontent-na1.net/hubfs/4515944/IM%20Background%20Images/BlueSky-White.png';
    img.alt = "BlueSky Icon";
    img.width = 25;
    img.height = 25;
    img.style.display = 'inline'; // Ensures the image flows with the text/icons
    img.style.verticalAlign = 'top'; // Aligns the top of the image with the top of the line-box
    while (linkedinAnchor.firstChild) {
      linkedinAnchor.removeChild(linkedinAnchor.firstChild);
    }
    linkedinAnchor.appendChild(img);
  }
});