social-links Squarespace Discord Social Media Icon (Need help with solution found on here)

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

Hello!

I'm working on adding a social media link icon for Discord onto my site. I luckily managed to find a solution on this forum here. But unfortunately, I've ran into a very small problem while using it:

The problem is that while I can successfully change the generic link icon into one that appears to be the proper Discord icon, it seems that the icon is being cut off and I'm only seeing the center of it:

Ideally, I'll want the full Discord icon to be visible, which looks like this:

The original solution can be found at this link, and was made by a user named Creedon, however I haven't been able to get in contact with him. Do any of you know of a way to modify his code to hopefully fix this small issue? While I am a programmer, I don't necessarily have the experience with html/css to fix this myself - though I did try with little luck.

Thank you so much for your time! I hope you've all had a great new year so far.

Any tips/advice/or even alternative solutions are welcome!

There are two issues. My code is not designed/tested for v7.0 sites. There is also a bug in the code. My intent was to only change the generic header icon to a discord icon.

The following is not a solution but a workaround to the issue you are experiencing.

Add the following to Design > Custom CSS.

/* workaround for discord svg scaling issue */

.sqs-svg-icon--wrapper[href^="https://discord.gg/"] div {

  transform : unset;

  }

This is for v7.0 using the Brine template family and is specific to the poster's need.

Interestingly I am in the process of updating my discord icon code for v.71. I can't guarantee that I I can make it compatible with v7.0 (at least the Brine template family hopefully) but I am going to look into it.

To keep up with the latest on the code please follow the thread of the following post. There is nothing new there now but I try to post there when there are updates.

Let us know how it goes.

That did the trick! Thank you so much for your time!!

I plan on making a website for 7.1 eventually, it's just time consuming and I have other things I need to focus on for now. So by the time I do that, hopefully your new solution will be fully  working. So thanks again!

Hello again! @creedon, there seems to be one small problem I just noticed while using my website earlier. When hovering over the social icons, their alpha value is adjusted based on which one is selected. For example, here I'm selecting the Discord social icon:

However, if I select the YouTube social icon:

You can see that the Discord icon isn't affected for some reason.

Is there any way to fix something like this? It seems as if it'd be tricky to diagnose. I don't know where to start here frankly.

Quote

there seems to be one small problem

I fixed that issue in my updated code. Please see my previous post.

3 hours ago, creedon said:

I fixed that issue in my updated code. Please see my previous post.

Thank you! I'll take a look!

Hi @creedon! I followed the instructions here for redoing my install of the custom code, as per your instructions:

https://github.com/tomsWebConsulting/twcsl/tree/main/Social Icon Discord Generic Icon to Discord Change#social-icon-discord-generic-icon-to-discord-change

And then added your additional code to the bottom of the CSS code that you provided above:

/* workaround for discord svg scaling issue */

.sqs-svg-icon--wrapper[href^="https://discord.gg/"] div {

  transform : unset;

  }

This fixed the issue with the fading! However now, the icon is too small:

I'm not quite sure where the variable for tweaking this would be if there is one. Ideally you'd want it to be the same size as the rest of the icons.

P.S. There's a typo in the custom CSS portion of the plugin you've written:

https://github.com/tomsWebConsulting/twcsl/blob/main/Social Icon Discord Generic Icon to Discord Change/social icon discord generic icon to discord change.css#L1

"Blurple" was accidentally typed as "Burple" here. I fixed it on my end, I just thought you might like to know and push a tweak.

Thank you for all of the help, I know this must be getting tedious by now. I really appreciate your time and assistance!

EDIT: 

There appears to be more problems I've noticed as well.

Let's say I'm viewing the blog section of my website:

https://www.nokoriware.com/blog

If I click our home icon in the upper left corner (our company logo), it takes me back to the main page, but the Discord icon is no longer working and it reverts to the default placeholder icon:

15 hours ago, Brasch said:

And then added your additional code to the bottom of the CSS code that you provided above:

The workaround is no longer needed with the new code.

15 hours ago, Brasch said:

There's a typo in the custom CSS portion of the plugin you've written:

"Blurple" was accidentally typed as "Burple" here. I fixed it on my end, I just thought you might like to know and push a tweak.

Thank you for the bug report! It's fixed locally but I haven't pushed an update yet.

15 hours ago, Brasch said:

There appears to be more problems I've noticed as well.

Let's say I'm viewing the blog section of my website:

https://www.nokoriware.com/blog

If I click our home icon in the upper left corner (our company logo), it takes me back to the main page, but the Discord icon is no longer working and it reverts to the default placeholder icon:

I am almost certain it has to do with Ajax loading. Let me do some testing. As a temporary workaround you could turn it off.

It's the weekend so this may take me several days.

Good news @creedon! With the changes you proposed, it finally appears to be working as intended now:

Here's what I did to get it working:

1. I removed the workaround you said was no longer required in the CSS
2. I disabled Ajax loading in the site style settings

So now, the icon is the appropriate size, and moving between different pages of the website doesn't seem to mess up the icon anymore.

If you intend to fix it where you can leave Ajax loading on while using this plugin, be sure to let me know here when you apply the fix. 

Thank you so much for your time! You've been a huge help! I'm happy to send you a little money for your time if you can direct me to somewhere on your website where I can do as such.

Before you turned off Ajax was the icon reverting back to generic consistent in the scenario you described above? On blog page, click logo, home page loads, and icon reverts.

Although I saw happen once on your site before you switched Ajax off, I've not been able to get a similar behaviour on my test site.

Ajax makes my grumpy! 🙂