Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Discord Button Replacement


Lukems

Question

17 answers to this question

Recommended Posts

  • 1

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.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 1

@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.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 0
/* 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

Link to comment
  • 0
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.

Link to comment
  • 0

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.

Edited by creedon
fixed syntax error

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 0
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"

Link to comment
  • 0
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. 

Link to comment
  • 0
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

Link to comment
  • 0
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!

Link to comment
  • 0
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!

Link to comment
  • 0

@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!

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...