change social icons on loyal team pictures

Hi,

I need to change twitter image with linkedin. Now I have changed the code like this:
<figure data-scroll-reveal="enter from the top and move 50px over 0.4s" data-fb="https://www.facebook.com/carola.taroni" data-linkedin="it.linkedin.com/pub/carola-taroni/43/738/9a"><span><img src="images/staff/carola_taroni.jpg" alt="Team member" /></span><figcaption data-scroll-reveal="enter from the bottom and move 50px over 0.4s after 0.1s"><h3>Carola Taroni</h3><small>Webmaster, Project Manager</small></figcaption></figure>
but it displays facebook, twitter and g+, as you can see on the screenshot

social_icon.jpg

Can you please help me?

Hello,

If you want to support your own custom data-* attributes you have to also edit the following fragment in the gk.scripts.js file:

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({
               'touchend': function() {
                  if(!figure.hasClass('hover')) {
                     figure.fireEvent('mouseenter');
                  } else {
                     figure.fireEvent('mouseleave');
                  }
               },
               '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');
               }
            });
         }
      });
   }

sorry, I need to replace TWITTER with LINKEDIN and remove GOOGLE +?
I have found that code in the file but didn't understand exactly what to do....

First of all you have to add the linkedin icon to the available icons or replace the icons with font awesome icons - it will need changes in the CSS code too. Then you will have to replace the data-gplus references with data-linkedin - it will replace the gplus icon with linkedin data.

can you please help me with the replacement in css code and with the icons? where can I find them?

I'm sorry but it is a bigger custom work which is a beyond of our technical support. You have to implement these changes by yourself.

The font-awesome icons are included in the template and you have to just change the font-family and content properties according to the icons list: http://fontawesome.io/icons/

ok. I understand, but can you tell me which are the files I need to change? What I don't know is where are font awesome set.

You have to apply the changes in the css/gk.stuff.css file - there is a CSS code block responsible for the team display. If you want to use font awesome you have to change the font-family to FontAwesome and content to the value connected with the specific icon - this value is available on the icon list after clicking on the specific icon i.e.: http://fontawesome.io/icon/female/ as an unicode value - for this icon you have to use:

Code: Select all

content: "\f182";
font-family: FontAwesome;

Hi. Now I solved the trouble about changing icons. Is there the possibility to link the click to another page? If users click on facebook it opens the new page instead of my website, and I'd prefer another page (to understand: target="_blank"). Same problem with icon envelope which I would like open the mailto:[email protected].
I hope you can help me. Thank you.

You have to add target="_blank" in the js/gk.scripts.js file i.e. you have to change the following code:

Code: Select all

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

to:

Code: Select all

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

thank you. can you please check if envelope opens the email? I have set the mailto:[email protected] only in the module. in the file gk.script.js I changed the code like this:
if(figure.attr('data-email') !== null) {
htmloutput += '<a href="'+figure.attr('data-email')+'" data-type="email">Email</a>';
classcounter++;
}
is this correct?

Sorry but without the URL I'm unable to check the icon behaviour on your website

sorry. I thought you already know it... here you are: lnx.nitrofilm.it

For me the envelope icon opens my e-mail client

ok. so it's a problem with my browser. better if so!!! thank you!!!