Team Social Links

Hi again,

I don't understand how works the custom HTML module that does the Team presentation. To be exact, I don't find where (and how) you get the rollover social icons and their links.

Also, as soon as I edit the HTML and change the names and save, I loose the layout and rollover effect ???

Any help with that ?

Best regards

Disable editor in global configurations > Default Editor - None and enable it after you finish editing or make sure your current editor does not strip part of the html code.

1. Edit your module.
2. Copy below code.
3. Change links to your users links. Each team member is wrapped in "figure class".
4. Change Column if you need more team members. See towards bottom of this reply.
5. Change image location or image name to your team members image.

Code: Select all

<div class="gkTeam col4 animate_queue">

<figure class="animate_queue_element" data-gplus="https://plus.google.com/mygoogleplusname" data-twitter="https://twitter.com/mytwittername" data-fb="https://www.facebook.com/myfacebookname">
<img src="images/demo/about/1.jpg" border="0" alt="Tim Berners" />
<figcaption>
<h3>Tim Berners</h3>
<small>CEO Executive Officer</small>
</figcaption>
</figure>

<figure class="animate_queue_element" data-gplus="https://plus.google.com/mygoogleplusname" data-twitter="https://twitter.com/mytwittername" data-fb="https://www.facebook.com/myfacebookname">
<img src="images/demo/about/2.jpg" border="0" alt="Julia Morena" />
<figcaption>
<h3>Julia Morena</h3>
<small>Creative Director</small>
</figcaption>
</figure>

<figure class="animate_queue_element" data-gplus="https://plus.google.com/mygoogleplusname" data-twitter="https://twitter.com/mytwittername" data-fb="https://www.facebook.com/myfacebookname">
<img src="images/demo/about/3.jpg" border="0" alt="Eddy Doe" />
<figcaption>
<h3>Eddy Doe</h3>
<small>Customer Support</small>
</figcaption>
</figure>

<figure class="animate_queue_element" data-gplus="https://plus.google.com/mygoogleplusname" data-twitter="https://twitter.com/mytwittername" data-fb="https://www.facebook.com/myfacebookname">
<img src="images/demo/about/4.jpg" border="0" alt="Robert Frost" />
<figcaption>
<h3>Robert Frost</h3>
<small>Web Designer</small>
</figcaption>
</figure>
</div>

<p style="text-align: center;"><a class="border bigbutton" href="#">Learn More</a></p>


Also note if you need to adjust columns change it in main div col4 such as col3 col2 col5

Code: Select all

<div class="gkTeam col4 animate_queue">


Template script replaces links to GavickPRO when there is nothing entered.
Template script gets data- attributes and creates overlay for each figure class.

Following is module details in case users wants to add from new.

Module Type: Custom Html Module
Module advanced options > Module suffix : bigtitle greybg
Module Position: Bottom 1 in demo.


See you around...

Splendid !

Many thanks

No problem at all, have a nice day.

I only have one person in the "About Me" section. How can I center her picture?

<div class="gkTeam col4 animate_queue">

<figure class="animate_queue_element" data-gplus="https://plus.google.com/mygoogleplusname" data-twitter="https://twitter.com/twittername" data-fb="https://www.facebook.com/facebook">
<img src="images/demo/about/meett.jpg" border="0" alt="T John" />
<figcaption>
<h3>T John</h3>
<small>Freelance Makeup Artist</small>
</figcaption>
</figure>

<p style="text-align: center;"><a class="border bigbutton" href="#">Learn More</a></p>

Also, is there a way to tweak the code so that the link opens in a new tab or window?

For centering please remove col4 from "gkTeam" div element.

Code: Select all

<div class="gkTeam col4 animate_queue">


Code: Select all

<div class="gkTeam animate_queue">


Then add following css code to your css/override.css and enable css override in template settings > advanced settings > css override.

Code: Select all

.gkTeam figure {
    float: none;
    margin: 0 auto;
    width: 250px;
}


For opening links in new windows or tab please do following.

Find File: /templates/gk_creativity/js/gk.scripts.js
Line: 162 to 175 which is below

Code: Select all

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


Replace with below

Code: Select all

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


See you around...

is it possible to add or switch in
/templates/gk_creativity/js/gk.scripts.js
icones with skype icon and call or any other icon, like email and so on? where are this icons anyway?
BR

@gladfin,

icons are actually like a normal text, this template is using fontawesome font package which displays icons for the equivalent text.

See following url for which text represents which icon so you can replace it without making changes to javascript.
http://astronautweb.co/snippet/font-awesome/

Following is used in our css file gk.stuff.css located in template/gk_creativity/css/.

Code: Select all

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

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

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


See you around...

Hi.
I need to put in the "About us" section six people: the director alone in the first row, then his assistant, and in the third row the other four persons.

How do I have to change the code? If I change to col1 in "gkteam" DIV element the pictures looks very big; if I remove the col4 (always only for the persons that I want to be alone in their row) and put this code in the override.css:

Code: Select all

.gkTeam figure {
    float: none;
    margin: 0 auto;
    width: 250px;
}

the result is that I have one person for each row (but in the third I want four of them...)

Thanks for helping.

s.

@sergiomercuri,

Following is for 3 single team members on their own line and then 4 team members on the same line. This is only for example purpose.
HTML in module

Code: Select all

<div class="gkTeam animate_queue">
   <figure data-fb="https://www.facebook.com/gavickpro" data-twitter="https://twitter.com/gavickpro" class="animate_queue_element">
      <img src="images/demo/about/1.jpg" border="0" alt="Tim Berners" />
      <figcaption>
         <h3>Tim Berners</h3>
         <small>CEO Executive Officer</small> </figcaption>
   </figure>
</div>
<div class="gkTeam animate_queue">
   <figure data-fb="https://www.facebook.com/gavickpro" data-twitter="https://twitter.com/gavickpro" class="animate_queue_element">
      <img src="images/demo/about/1.jpg" border="0" alt="Tim Berners" />
      <figcaption>
         <h3>Tim Berners</h3>
         <small>CEO Executive Officer</small> </figcaption>
   </figure>
</div>
<div class="gkTeam animate_queue">
   <figure data-fb="https://www.facebook.com/gavickpro" data-twitter="https://twitter.com/gavickpro" class="animate_queue_element">
      <img src="images/demo/about/1.jpg" border="0" alt="Tim Berners" />
      <figcaption>
         <h3>Tim Berners</h3>
         <small>CEO Executive Officer</small> </figcaption>
   </figure>
</div>
<div class="gkTeam col4 animate_queue">
   <figure data-fb="https://www.facebook.com/gavickpro" data-twitter="https://twitter.com/gavickpro" class="animate_queue_element">
      <img src="images/demo/about/1.jpg" border="0" alt="Tim Berners" />
      <figcaption>
         <h3>Tim Berners</h3>
         <small>CEO Executive Officer</small> </figcaption>
   </figure>
   <figure data-fb="https://www.facebook.com/gavickpro" data-twitter="https://twitter.com/gavickpro" data-gplus="https://plus.google.com/+gavickpro/posts" class="animate_queue_element">
      <img src="images/demo/about/2.jpg" border="0" alt="Julia Morena" />
      <figcaption>
         <h3>Julia Morena</h3>
         <small>Creative Director</small> </figcaption>
   </figure>
   <figure data-fb="https://www.facebook.com/gavickpro" data-twitter="https://twitter.com/gavickpro" data-gplus="https://plus.google.com/+gavickpro/posts" class="animate_queue_element">
      <img src="images/demo/about/3.jpg" border="0" alt="Eddy Doe" />
      <figcaption>
         <h3>Eddy Doe</h3>
         <small>Customer Support</small> </figcaption>
   </figure>
   <figure data-fb="https://www.facebook.com/gavickpro" data-twitter="https://twitter.com/gavickpro" data-gplus="https://plus.google.com/+gavickpro/posts" class="animate_queue_element">
      <img src="images/demo/about/4.jpg" border="0" alt="Robert Frost" />
      <figcaption>
         <h3>Robert Frost</h3>
         <small>Web Designer</small> </figcaption>
   </figure>
</div>
<p style="text-align: center;"><a class="border bigbutton" href="#">Learn More</a></p>


CSS Code in override.css

Code: Select all

.gkTeam { padding: 20px 0;}
.gkTeam figure {float: none;margin: 0 auto;width: 250px;}
.col4 figure {float:left; margin: 0 1% !important;}


See you around...

@gladfin,

icons are actually like a normal text, this template is using fontawesome font package which displays icons for the equivalent text.

See following url for which text represents which icon so you can replace it without making changes to javascript.
http://astronautweb.co/snippet/font-awesome/

Following is used in our css file gk.stuff.css located in template/gk_creativity/css/.

Code: Select all

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

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

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


See you around...

Hi
I changed twitter with linkedin:

Code: Select all

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

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

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

.
and in the module:
changed data-twitter=...with data-linkedin= .....
but now I do not see the icon..
what do I miss?
BR

You also need to edit javascript file and change twitter to linkedin.

File: /templates/gk_creativity/js/gk.scripts.js
Line: 145 to 198.

See you around...

You also need to edit javascript file and change twitter to linkedin.

File: /templates/gk_creativity/js/gk.scripts.js
Line: 145 to 198.

See you around...

OK!
got it before you
thanks! it work great now!

No problem, see you around.

@sergiomercuri,

Following is for 3 single team members on their own line and then 4 team members on the same line. This is only for example purpose.

Thanks!! It works fine!!

s.

No problem at all, see you around...

Hi,

Can help with the code for 2 person side by side align in the center for "About"? Thanks.

Hi,first of all thanks for this great gorgeous template.

Ok..i wanna have Google,Twitter and Linkedin

so i changed the gkstuff.css like this

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

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

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

.gkTeamOverlay a[data-type="linkedin"]:before {
content: '\f0e1';

Then i changed the js script you told above like this

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

jQuery(figures).each(function(i, figure) {
figure = jQuery(figure);
if(
figure.attr('data-fb') != undefined ||
figure.attr('data-twitter') != undefined ||
figure.attr('data-gplus') != undefined ||
figure.attr('data-linkedin') != undefined ||
figure.attr('data-pinterest') != undefined


) {
var overlay = new jQuery('<div class= "gkTeamOverlay"></div>');

var htmloutput = '';
var classcounter = 0;

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

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

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

if(figure.attr('data-linkedin') != undefined) {
htmloutput += '<a href="'+figure.attr('data-linkedin')+'" data-type="linkedin">Linkedin</a>';
classcounter++;
}

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

jQuery(overlay).html(htmloutput);

and it worked^^

now..can you tell me how to put my link there ,i mean the one for our Gplus,Pint,Twitter?
Thanks

ps.
gosh...i'm just tired..its in the module...sorry...
i hope this helps.
bye from Florence

Hi,first of all thanks for this great gorgeous template.

Ok..i wanna have Google,Twitter and Linkedin

so i changed the gkstuff.css like this

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

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

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

.gkTeamOverlay a[data-type="linkedin"]:before {
content: '\f0e1';

}

Sorry i did miss the final "brace"

sorry

have a nice day,