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

Graying out a custom social link icon on hover of any of the other icons?

Question

We've added a custom social link icon in the footer of our website our website (Hyde template) using the following custom html in Home>Design>Custom CSS (huge thanks to @tuanphan) :

.Footer-middle .sqs-svg-icon--wrapper:first-child {
    visibility: hidden;
}
.Footer-middle .sqs-svg-icon--outer .sqs-svg-icon--wrapper:first-child:after {
    visibility: visible;
    content: "";
    background-image: url(https://image.flaticon.com/icons/svg/49/49625.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    width: 30px;
    height: 30px;
    display: inline-block;
}

We would like to have the custom icon gray out when the user hovers the pointer over either one of the other two icons in the block. For instance, hovering over icon 1 (the new custom social link icon) causes icon 2 and icon 3 in the block to gray out, but when the user hovers over icon 2, icon 3 will gray out but icon 1 remains the same color. Similarly, hover on icon 3 results in icon 2 graying out, but icon 1 remains solid. Pictures of each scenario have been included for the sake of clarity. I've been informed that the solution is somewhat complex and requires using jquery…. Any info is helpful and appreciated.

1125054226_ScreenShot2019-11-26at9_52_53AM.png.c079650f1f78c6793d271e0a2115e84a.png

1476631496_ScreenShot2019-11-26at9_54_19AM.png.3603123677b35b87ccb2634ae691e421.png

260559754_ScreenShot2019-11-26at9_53_46AM.png.f7a508969678c1a705ca600d4f817971.png

Share this post


Link to post

2 answers to this question

Recommended Posts

  • 0

Don't have an answer for this question. But for anyone trying to add custom social icons to the SquareSpace social icons block, I used @tuanphan's code with FontAwesome instead and am really happy with how it turned out. It's definitely not perfect (as mentioned in the above question), but will do until SquareSpace adds the additional icons we need such as Phone and Whatsapp. *Ahem* @SQUARESPACE

FYI I am using the XL Circle Knockout icons!

.sqs-svg-icon--wrapper.url {
    visibility: hidden;
}
.sqs-svg-icon--wrapper.url:after {
  visibility: visible !important;
  display: block !important;
  position: absolute !important;
  font-family: "Font Awesome 5 Pro"; /*for some reason writing "Font Awesome 5 Free" didn't work even though I have the free plan, this solved the problem for me*/
  font-weight: 900;
  font-size: 1.3em;
  color: #728291;
  content: "\f879"; /*This is the unicode number from whichever font awesome icon you select, make sure you leave in "\" before the number otherwise it won't work*/
  background: white;
  text-align: center;
  line-height: 48px; /*This number is VERY important in order to get it to align correctly in the circle, square or whatever size icons you have, I got the size from doing inspect on Google Chrome and looking at what size SquareSpace was using for knockout circle icons I am using*/
  width: 48px;
  overflow: hidden;
}

 

Share this post


Link to post
  • 0

Update: I also did the same for the links in my header. And I realized I didn't need the "!important;" tags since this is a new element --can you guys tell I'm new at this?! Hopefully this will help someone somewhere. Also note that I needed to decrease the font size to match the corresponding icons since the social icons in my header are a lot smaller.

 

Alllso, for anyone wondering why I didn't just do font awesome icons in my secondary menu or tagline, I'm using a double header with a logo in the middle and navigation on either side. So this was pretty much the only option I could think of.

 

.SocialLinks-link.url  {
    visibility: hidden;
}

.SocialLinks-link.url:after {
  visibility: visible;
  display: block;
  position: absolute;
  font-family: "Font Awesome 5 Pro";
  font-weight: 900;
  font-size: 0.8em;
  color: #455b6d;
  content: "\f879";
  background: white;
  text-align: center;
  line-height: 28px;
  width: 28px;
  overflow: hidden;
}

 

Edited by LJSpace
Additional info

Share this post


Link to post

Create an account or sign in to comment

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


×
×
  • Create New...