Teams section linking to social profiles

On the home page within your demo you have a section regarding teams linking to social profiles. I have the HTML code from the demo but would like to know am I able to change the twitter part to perhaps my team's websites. Is there an icon built in and what would that little snippet of code be?

tonilaird.com

Capture.JPG

They are done with FontAwesome and a little bit of css help. changing one of them can be hard or easy, depending on if You care about semantic html. you can use link to outside page instead of twitter, just by replacing css targeting FontAwesome. the rest should work well. but if Yu would like to add additional date-site html target indicator, You would require some js editing.

If I wanted to simply change the fontawsome icon from twitter to something else e.g. icon-folder-close would I add/change this class to the HTML in the widget as below?

data-twitter="https://twitter.com/my twitter"

If You will look into:
wp-content/themes/Creativity/css/stuff.css
You will find few lines looking this way:

Code: Select all

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

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

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


What it does, is placing a "letter/sign" before element with data-type of a kind (fb, twitter, gplus), which with use of FontAwesome changes from standard sign into an icon. So You should edit one of those line and change corresponding sign to one that suits your taste.

Hi Cyberik

I have tried numerous ways without luck. To be honest I don't need the Twitter icon so I could just change that for an icon that could represent an website! I found the:

.gk-team-overlay a[data-type="twitter"]:before {
content: '\f099';

and

data-twitter="https://twitter.com/gavickpro"

but what do I change one of them to?

I assumed I would replace the htm with something e.g. 'icon-user' or 'user' from the selection of font awsomes which is obviously not the case

Hi,

@Toni, just replace this code from css/stuff.css

Code: Select all

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

to e.g.

Code: Select all

.gk-team-overlay a[data-type="twitter"]:before {
   content: '\f0c1';
}

Then in Text widget replace text

Code: Select all

 <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="[pageurl]/wp-content/themes/Creativity/images/demo/about/2.jpg" alt="Julia Morena">
      <figcaption>
         <h3>Julia Morena</h3>
         <small>Creative Director</small> </figcaption>
   </figure>

to e.g.

Code: Select all

<figure data-fb="https://www.facebook.com/gavickpro" data-twitter="http://your-team-website-URL" data-gplus="https://plus.google.com/+gavickpro/posts" class="animate_queue_element">
      <img src="[pageurl]/wp-content/themes/Creativity/images/demo/about/2.jpg" alt="Julia Morena">
      <figcaption>
         <h3>Julia Morena</h3>
         <small>Creative Director</small> </figcaption>
   </figure>

That worked perfectly and thank you for your excellent support. Last question; I assume if I have to update the theme at any time I'd need to do this again or could this be added to custom.css?

Text Widget content won't be updated, but stuff.css file may be changed during the update, so the best way is to use override.css file (firstly enable this option in Template Options -> Advanced -> Use the override.css file)

then put your changed css fragment to override.css file (don't do any changes in oryginal stuff.css file)

You can also use Child Themes
http://www.gavick.com/magazine/gavernwp ... hemes.html

I had already done this as I'm using it to control header and footer colors etc, So would I just add this :

.gk-team-overlay a[data-type="twitter"]:before {
content: '\f0c1';
}

and change the stuff.css back to the original code?

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

Yes, exactly.

Thank you. Done, working, solved. I'll leave you alone now