Discord Button Replacement

Site URL: https://www.abovethestorm.com/

Hello,

I am trying to replace the "chain" link standard image that is embedded on the top right of my page for our discord link as it does not have one that normally pops up. Any help? its the one to the right of instagram. Thank you!

/* CHANGES SOCIAL ICON TO DISCORD */
.sqs-svg-icon--list a:nth-of-type(4) {
svg {
display:none;
}
background-image: url(https://cdn4.iconfinder.com/data/icons/logos-and-brands/512/91_Discord_logo_logos-512.png);
background-size: 110%;
background-repeat: no-repeat;
}

Design -> Custom CSS

On 11/27/2020 at 6:22 PM, JoeF said:

/* CHANGES SOCIAL ICON TO DISCORD */
.sqs-svg-icon--list a:nth-of-type(4) {
svg {
display:none;
}
background-image: url(https://cdn4.iconfinder.com/data/icons/logos-and-brands/512/91_Discord_logo_logos-512.png);
background-size: 110%;
background-repeat: no-repeat;
}

Design -> Custom CSS

Thank you for the response. All i need to do is copy that into the Custom CSS? i tried to copy/paste and nothing happened. sorry not a genius at this.

Update 5/16/24: Apparently Squarespace now  provides their own discord SVG icon. There is no need to use custom code.

My original post follows.

Add the following to Design > Custom CSS.

/* begin change social icon to discord */

  .header-actions--right .header-actions-action--social .icon:nth-of-type( 4 ), /* desktop */
  .header-menu-actions .header-menu-actions-action--social:nth-of-type( 4 ) /* mobile */
  
    {
    
      background-image: url( https://cdn4.iconfinder.com/data/icons/logos-and-brands/512/91_Discord_logo_logos-512.png );
      background-repeat: no-repeat;
      background-size: 110%;
      
      }
      
  .header-actions--right .header-actions-action--social .icon:nth-of-type( 4 ) svg, /* desktop */
  .header-menu-actions .header-menu-actions-action--social:nth-of-type( 4 ) svg /* mobile */
  
    {
    
      display: none;
      
      }
      
  /* end change social icon to discord */

This is specific to the poster's need.

Let us know how it goes.

32 minutes ago, creedon said:

Add the following to Design > Custom CSS.

/* begin change social icon to discord */

  .header-actions--right .header-actions-action--social .icon:nth-of-type( 4 ), /* desktop */
  .header-menu-actions .header-menu-actions-action--social:nth-of-type( 4 ) /* mobile */
  
    {
    
      background-image: url( https://cdn4.iconfinder.com/data/icons/logos-and-brands/512/91_Discord_logo_logos-512.png );
      background-repeat: no-repeat;
      background-size: 110%;
      
      }
      
  .header-actions--right .header-actions-action--social .icon:nth-of-type( 4 ) svg /* desktop */
  .header-menu-actions .header-menu-actions-action--social:nth-of-type( 4 ) svg, /* mobile */
  
    {
    
      display: none;
      
      }
      
  /* end change social icon to discord */

Let us know how it goes.

I appreciate the response! i received a "syntax error on line 1"

I fixed a syntax error in the code. Give it another go!

53 minutes ago, creedon said:

I fixed a syntax error in the code. Give it another go!

it worked thank you very much

54 minutes ago, Lukems said:

it worked thank you very much

random question.... i figured out a lot of what you did and i appreciate it. do you know if there is a way to make it to where it appears as a different color on different pages? When i go to the Store part of SS, all the other icons go white. 

I'm going to suggest a different approach to your issue.

The original image is an SVG. If we use some Javascript we should be able to swap out the original SVG data with an SVG from discord.

The big advantage is that it appears to pick up the colors automatically! With a little editing of the SVG direct from discord.

My initial tests show that may work well. If that is something you want to pursue let us know.

10 hours ago, creedon said:

I'm going to suggest a different approach to your issue.

The original image is an SVG. If we use some Javascript we should be able to swap out the original SVG data with an SVG from discord.

The big advantage is that it appears to pick up the colors automatically! With a little editing of the SVG direct from discord.

My initial tests show that may work well. If that is something you want to pursue let us know.

That would be awesome! what do i need to do

Please see Social Icon Discord Generic Icon to Discord Change.

Let us know how it goes.

On 11/29/2020 at 1:53 PM, creedon said:

Add the following to Settings > Advanced > Code Injection > HEADER. 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Add the following to Settings > Advanced > Code Injection > FOOTER. 

<script>

  $( ( ) => {
  
    // replace SS generic svg social link icon with dicord
    
    const discordLinkPosition = 4;
    
    // do not change anything below, there be the borg here
    
    const discordSvg = '<svg ' + // id="Layer_1"
    
      'xmlns="http://www.w3.org/2000/svg" viewBox="0 0 245 240">' +
      
      /* '<style>' +
      
        '.st0 {' +
        
          'fill: #FFFFFF;' +
          
          '}' +
          
        '</style' + */
        
      '<path class="st0" d="M104.4 103.9c-5.7 0-10.2 5-10.2 11.1s4.6 11.1 ' +
      
        '10.2 11.1c5.7 0 10.2-5 10.2-11.1.1-6.1-4.5-11.1-10.2-11.1zM140.9 ' +
        
        '103.9c-5.7 0-10.2 5-10.2 11.1s4.6 11.1 10.2 11.1c5.7 0 10.2-5 ' +
        
        '10.2-11.1s-4.5-11.1-10.2-11.1z" />' +
        
      '<path class="st0" d="M189.5 20h-134C44.2 20 35 29.2 35 40.6v135.2c0 ' +
      
        '11.4 9.2 20.6 20.5 20.6h113.4l-5.3-18.5 12.8 11.9 12.1 11.2 21.5 ' +
        
        '19V40.6c0-11.4-9.2-20.6-20.5-20.6zm-38.6 130.6s-3.6-4.3-6.6-8.1c13.' +
        
        '1-3.7 18.1-11.9 18.1-11.9-4.1 2.7-8 4.6-11.5 5.9-5 2.1-9.8 3.5-14.5 ' +
        
        '4.3-9.6 1.8-18.4 1.3-25.9-.1-5.7-1.1-10.6-2.7-14.7-4.3-2.3-.9-4.' +
        
        '8-2-7.3-3.4-.3-.2-.6-.3-.9-.5-.2-.1-.3-.2-.4-.3-1.8-1-2.8-1.7-2.' +
        
        '8-1.7s4.8 8 17.5 11.8c-3 3.8-6.7 8.3-6.7 8.3-22.1-.7-30.5-15.2-30.' +
        
        '5-15.2 0-32.2 14.4-58.3 14.4-58.3 14.4-10.8 28.1-10.5 28.1-10.5l1 ' +
        
        '1.2c-18 5.2-26.3 13.1-26.3 13.1s2.2-1.2 5.9-2.9c10.7-4.7 19.2-6 ' +
        
        '22.7-6.3.6-.1 1.1-.2 1.7-.2 6.1-.8 13-1 20.2-.2 9.5 1.1 19.7 3.9 ' +
        
        '30.1 9.6 0 0-7.9-7.5-24.9-12.7l1.4-1.6s13.7-.3 28.1 10.5c0 0 14.4 ' +
        
        '26.1 14.4 58.3 0 0-8.5 14.5-30.6 15.2z" />' +
        
      '</svg>';
      
    $( '.header-actions-action--social .icon:nth-child( ' +
    
      discordLinkPosition + ' ) svg, .header-menu-actions-action--social' +
      
      ':nth-child( ' + discordLinkPosition + ' ) svg' )
      
      .replaceWith ( discordSvg );
      
    } );
    
  </script>

This is for v7.1.

If the position of the discord link changes in the header you can change the value for discordLinkPosition.

Let us know how it goes.

Hi Creedon! I used this code myself to get Discord as my third link and it worked great! However - I am trying to add Telegram as a 4th social link on my site. Anyway you can help me duplicate and edit this code to add that icon as well? Thanks a bunch!

@Stijn

Please post the URL for your site.

If your site is not public please set up a site-wide password, if you've not already done so.

Post the password here.

Adding a site-wide password is not a security breach. Please read the documentation at the link provided to understand how it works.

We can then take a look at your issue.

1 hour ago, creedon said:

@Stijn

Please post the URL for your site.

If your site is not public please set up a site-wide password, if you've not already done so.

Post the password here.

Adding a site-wide password is not a security breach. Please read the documentation at the link provided to understand how it works.

We can then take a look at your issue.

http://mushroom-sapphire-4xnj.squarespace.com/ Here's the site! PW is boyking

Was hoping to change the 2nd link to a telegram logo. I am currently using custom CSS on the third link to get the discord logo!

@Stijn

I can help if you can provide a suitable SVG graphic. It should be black and white, I think.

I suggest contacting Telegram and ask if they have an official SVG icon suitable for this purpose. I much prefer official code to the tons of hacks on a jillion sites out there.

A small rant! Hey you social media companies out there! Please provide a media page on your site that contains official media. PNGs, JPEGs, SVGs, etc.! Doing that for us helps your users promote your brand. Free advertising! Make versions suitable to be added as a link to site builders like SS!

Thank you for your help in this thread! I had the same problem and was able to get the Discord icon working in my header. I'm now facing the same problem within my "Contact Us" page: https://www.yurconalegames.com/contact-us.

How would I modify the code to add the Discord icon to my "Social Links" section on this page?

@Yurconale

Please see the following. Even though we are discussing a different social icon, the same underlying issue applies.

I have updated my cited code in my Nov. 29, 2020 post.

On 5/4/2021 at 6:37 PM, creedon said:

@Stijn

I can help if you can provide a suitable SVG graphic. It should be black and white, I think.

I suggest contacting Telegram and ask if they have an official SVG icon suitable for this purpose. I much prefer official code to the tons of hacks on a jillion sites out there.

A small rant! Hey you social media companies out there! Please provide a media page on your site that contains official media. PNGs, JPEGs, SVGs, etc.! Doing that for us helps your users promote your brand. Free advertising! Make versions suitable to be added as a link to site builders like SS!

Hi there, I just found this link and was able to use it for my discord icon! Many thanks!

I was wondering if you ended up doing the same for a telegram/whatsapp icon. Any help would be greatly appreciated.

Have a great day!

17 hours ago, Geist said:

I was wondering if you ended up doing the same for a telegram/whatsapp icon.

I have done header Whatsapp code.

Please see Header Social Icon Whatsapp Generic Icon to Whatsapp Change.

I don't have a Whatsapp solution for social icons in other locations.

Let us know how it goes.

On 9/3/2021 at 4:25 AM, creedon said:

I have updated my cited code in my Nov. 29, 2020 post.

Hi, I tried using the code you updated, and the header is working fine, but my footer is having issues displaying the icon! May I know what I might be doing wrongly?

On 12/21/2021 at 2:53 AM, KennethEeJunJie said:

the header is working fine, but my footer is having issues displaying the icon!

As mentioned in my post.

Quote

I don't have a Whatsapp (or other) solution for social icons in other locations.

I have updated my cited code in my Nov. 29, 2020 post.

Extensive changes. Added support for v7.0 Brine template family. Also social blocks are supported as well.

@KennethEeJunJie

22 minutes ago, Nabil said:

I tried this, it changed the logo for Linkedin instead, any tips?

Yes. The code I wrote was for a specific users need.

There is better more generic code now. Please see the following.

Let us know how it goes.