Rollover "Team" Area - Adding Pinterest

Is there a place where I could get a pinterest icon that matches the fb, twitter and google+ icons on the rollover under the team section?

How would I put this extra icon in?

Hopefully this makes sense.

Hi,

In this case you have to edit the js/gk.scripts.js file and change this fragment:

Code: Select all

// team overlays
   if(document.getElement('.gkTeam')) {
      var figures = document.getElements('.gkTeam figure');

      figures.each(function(figure, i) {
         if(
            figure.getProperty('data-fb') != null ||
            figure.getProperty('data-twitter') != null ||
            figure.getProperty('data-gplus') != null
         ) {
            var overlay = new Element('div', {
               'class': 'gkTeamOverlay'
            });

            var htmloutput = '';
            var classcounter = 0;

            if(figure.getProperty('data-fb') != null) {
               htmloutput += '<a href="'+figure.getProperty('data-fb')+'" data-type="fb">Facebook</a>';
               classcounter++;
            }

            if(figure.getProperty('data-twitter') != null) {
               htmloutput += '<a href="'+figure.getProperty('data-twitter')+'" data-type="twitter">Twitter</a>';
               classcounter++;
            }

            if(figure.getProperty('data-gplus') != null) {
               htmloutput += '<a href="'+figure.getProperty('data-gplus')+'" data-type="gplus">Google+</a>';
               classcounter++;
            }

            overlay.set('html', htmloutput);
            overlay.addClass('gkIcons' + classcounter);

            overlay.inject(figure.getElement('img') , 'after');

            figure.addEvents({
               'mouseenter': function() {
                  figure.addClass('hover');
                  var linksAmount = figure.getElements('.gkTeamOverlay a').length;
                  for(i = 0; i < linksAmount; i++) {
                     gkAddClass(figure.getElement('.gkTeamOverlay').getElements('a')[i], 'active', i);   
                  }
               },
               'mouseleave': function() {
                  figure.removeClass('hover');
                  figure.getElements('.gkTeamOverlay a').removeClass('active');
               }
            });
         }
      });
   }

to:

Code: Select all

// team overlays
   if(document.getElement('.gkTeam')) {
      var figures = document.getElements('.gkTeam figure');

      figures.each(function(figure, i) {
         if(
            figure.getProperty('data-fb') != null ||
            figure.getProperty('data-twitter') != null ||
            figure.getProperty('data-gplus') != null ||
                                figure.getProperty('data-pinterest') != null
         ) {
            var overlay = new Element('div', {
               'class': 'gkTeamOverlay'
            });

            var htmloutput = '';
            var classcounter = 0;

            if(figure.getProperty('data-fb') != null) {
               htmloutput += '<a href="'+figure.getProperty('data-fb')+'" data-type="fb">Facebook</a>';
               classcounter++;
            }

            if(figure.getProperty('data-twitter') != null) {
               htmloutput += '<a href="'+figure.getProperty('data-twitter')+'" data-type="twitter">Twitter</a>';
               classcounter++;
            }

            if(figure.getProperty('data-gplus') != null) {
               htmloutput += '<a href="'+figure.getProperty('data-gplus')+'" data-type="gplus">Google+</a>';
               classcounter++;
            }

                                if(figure.getProperty('data-pinterest') != null) {
               htmloutput += '<a href="'+figure.getProperty('data-pinterest')+'" data-type="pinterest">Pinterest</a>';
               classcounter++;
            }

            overlay.set('html', htmloutput);
            overlay.addClass('gkIcons' + classcounter);

            overlay.inject(figure.getElement('img') , 'after');

            figure.addEvents({
               'mouseenter': function() {
                  figure.addClass('hover');
                  var linksAmount = figure.getElements('.gkTeamOverlay a').length;
                  for(i = 0; i < linksAmount; i++) {
                     gkAddClass(figure.getElement('.gkTeamOverlay').getElements('a')[i], 'active', i);   
                  }
               },
               'mouseleave': function() {
                  figure.removeClass('hover');
                  figure.getElements('.gkTeamOverlay a').removeClass('active');
               }
            });
         }
      });
   }

The next step is adding:

Code: Select all

data-pinterest="PINTEREST_URL"

attributes to each figure in the team.

And the last step is adding in the css/gk.stuff.css file the following fragment:

Code: Select all

.gkTeamOverlay.gkIcons4 a {
   margin-top: -120px!important;   
}

.gkTeamOverlay.gkIcons4 a + a {
   margin-top: -60px!important;
}

.gkTeamOverlay.gkIcons4 a + a + a {
   margin-top: 0px!important;
}

.gkTeamOverlay.gkIcons4 a + a + a + a {
        margin-top: 60px!important;
}

.gkTeamOverlay a[data-type="pinterest"]:before {
   content: '\f0d2';
}


How do I get to the js/gk.scripts.js file? Through Filezilla?

Yes, you have to use your FTP client or your code editor (if you have built-in FTP client in your code editor).