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

LULU3

Question

Posted (edited)

Site URL: https://luluthelabel.com/

1056894416_Screenshot2021-06-06at22_41_08.thumb.jpg.588c16d8a22c61a9bfdf9c975589d07a.jpg677403656_Screenshot2021-06-06at22_44_09.thumb.png.6ad5595b7d3e786615c5b38262b6be86.pngHello! 

I recently coded in a TikTok icon for my social links which are shown on both the header and footer of my site. I have noticed that the hover function does not work on this icon, is there a custom code for this please? For example, I hover over the Instagram icon and the TikTok icon does not fade like the others. 

Template is Hyde.

Thanks in advance.

Edited by LULU3
Added in images.
Link to comment
  • Answers 4
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Posted Images

4 answers to this question

Recommended Posts

  • 0

I unset your CSS and found out the tiktok icon is hard-coded on top of the normal URL icon. All of the original icons comes under the class ".sqs-svg-icon--social" which is only where the hover effect is applied.

spacer.png

And it seems to me that this piece of code is used to hardcode your tiktok icon.

<script>
var tiktoks = document.querySelectorAll('a[href*="tiktok"]');
tiktoks.forEach(item => {
    item.innerHTML = `<div>
  <svg class="SocialLinks-link-svg">
    <svg fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" clip-rule="evenodd" viewBox="0 0 55 55" style="fill: black;">
  <path fill-rule="nonzero" d="M37.006,22.323C36.779,22.344 36.549,22.358 36.316,22.358C33.693,22.358 31.388,21.009 30.047,18.97L30.047,30.507C30.047,35.216 26.229,39.034 21.52,39.034C16.811,39.034 12.993,35.216 12.993,30.507C12.993,25.798 16.811,21.98 21.52,21.98C21.698,21.98 21.872,21.996 22.047,22.007L22.047,26.209C21.872,26.188 21.7,26.156 21.52,26.156C19.116,26.156 17.168,28.104 17.168,30.508C17.168,32.912 19.116,34.86 21.52,34.86C23.924,34.86 26.047,32.966 26.047,30.562C26.047,30.467 26.089,10.968 26.089,10.968L30.105,10.968C30.483,14.559 33.382,17.393 37.006,17.653L37.006,22.323Z"></path>
</svg>     
    </svg>
</div>`
})
</script>

The styling of the icon is coming with the script itself. You can see style="fill: black;". Maybe, you have to find a way to stimulate similar styling on the script itself. To be honest, I am not experienced to solve this but I hope the information above will be helpful for someone who do. Never dealt with SVG attributes!

 

humaneer

 

 

Sharing virtual tactics for an abstract world
Blogger @ humaneer.org

Link to comment
  • 0
On 6/9/2021 at 11:22 AM, tuanphan said:

If you agree, we can replace 4 social icons with Code Block. Then you can change size, color, hover, easier.

 

Hi, yes this sounds good please if you can assist further? 

Thank you!

Link to comment
  • 0
18 hours ago, LULU3 said:

Hi, yes this sounds good please if you can assist further? 

Thank you!

Add a Code Block > Paste this code

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css" integrity="sha384-vp86vTRFVJgpjF9jiIGPEEqYqlDwgyBgEF109VFjmqGmIY/Y4HV4d3Gp2irVfcrp" crossorigin="anonymous">
<ul class="t-social">
<li>
  <a href="https://instagram.com">
  <i class="fab fa-instagram"></i>
  </a>
</li>
<li>
  <a href="https:facebook.com">
  <i class="fab fa-facebook-f"></i>
  </a>
</li>
<li>
  <a href="https://twitter.com">
  <i class="fab fa-twitter"></i>
  </a>
</li>
<li>
  <a href="https://tiktok.com">
  <i class="fab fa-tiktok"></i>
  </a>
</li>
</ul>
<style>
  /* code block padding top bottom */
  .code-block {
    padding-top: 0;
    padding-bottom: 0;
}
  /* social icons code */
.t-social {
    display: block;
    margin: 0 auto;
    padding-top: 5px;
    text-align: center;
  	padding-left: 0;
}
  .t-social li {
  display: inline-block;
    margin: 0;
    line-height: 100%!important;
  }
  .t-social li i {
    font-size: 30px;
    margin: 0 20px;
}
</style>

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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