Add linkedin icon/ adress to employee hover box

Sydney
#1

Hello,

thanks for your great and fast support so far!!!

How can I add linkedin profiles (icon/address) to the employee hover boxes in an easy way. I found some posts in the forum and it sounds quiet complicated.

If it is complicated, how can I remove the employee hover boxes?

Thanks again for your help.

Cheers,

Ralf

#2

Hello Ralf,

I don’t think that there is an easy way to add LinkedIn icon there. You can try to use the following CSS code in order to hide (not remove) those hover boxes.

You can add CSS code in Dashboard → Appearance → Customize → Additional CSS (WordPress 4.7 and up). Also you can add CSS code directly to style.css file of your child theme.

.widget_sydney_employees .pop-overlay {
    display: none;
}

Please feel free to ask any other questions that you might have.

Kind Regards, Roman.

#3

Hello Ralf,

To add a LinkIn icon link on each employee, please follow these steps:

  1. Install and activate the TC Custom JavaScript plugin
  2. Go To Appearance > Custom JavaScript
  3. Paste the following code into the provided box

;(function($) {

   'use strict'

   if( $('.roll-team').length ) {

      var linkedInIcon = function(url) {

        return '<li><a class="linkedin" target="_blank" href="'+url+'"><i class="fa fa-linkedin"></i></a></li>';
        
      }
    
      $('.roll-team .team-item').each(function(i){

          var n             = i+1;
          var linkedInURL   = '';

          if( n == 1 ){ // LinkedIn profile for employee 1
            linkedInURL = 'http://linkedin.com/profile-1';
          }

          if( n == 2 ){ // LinkedIn profile for employee 2
            linkedInURL = 'http://linkedin.com/profile-2';
          }

          if( n == 3 ){ // LinkedIn profile for employee 3
            linkedInURL = 'http://linkedin.com/profile-3';
          }          

          if( n == 4 ){ // LinkedIn profile for employee 4
            linkedInURL = 'http://linkedin.com/profile-4';
          }                    

          if( n == 5 ){ // LinkedIn profile for employee 5
            linkedInURL = 'http://linkedin.com/profile-5';
          }   

          if( n == 6 ){ // LinkedIn profile for employee 6
            linkedInURL = 'http://linkedin.com/profile-6';
          }

          if( n == 7 ){ // LinkedIn profile for employee 7
            linkedInURL = 'http://linkedin.com/profile-7';
          }             

          $(this).find('.team-social').prepend(linkedInIcon(linkedInURL));
          
        
      });
   
   }

})(jQuery);

The code above looks complicated, but it isn’t. See the line starting from this code block:


if( n == 1 ){ // LinkedIn profile for employee 1
  linkedInURL = 'http://linkedin.com/profile-1';
}

to this:


if( n == 7 ){ // LinkedIn profile for employee 7
  linkedInURL = 'http://linkedin.com/profile-7';
}

It means to add 7 LinkedIn icons. The first employee LinkedIn address is defined within this this code:


if( n == 1 ){ // LinkedIn profile for employee 1
  linkedInURL = 'http://linkedin.com/profile-1';
}

Do an adjustment to match with the exact address.

  1. Update

I hope it’ll be easy to follow.

Please let us know if further questions come up.

Regards,
Kharis

Changing the Google+ option in Employees / Adding new options
Employee / information
#4

Hey Kharis, fantastic!!! It works! You are so great! Thank you so much!

Have a great day,

Ralf

#5

You’re welcome, Ralf!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis