social icons on news2 template

Rate this topic: Evaluations: 1, 1.00 on the average.Evaluations: 1, 1.00 on the average.Evaluations: 1, 1.00 on the average.Evaluations: 1, 1.00 on the average.Evaluations: 1, 1.00 on the average.Evaluations: 1, 1.00 on the average.1.00 out of 6 based on 1 vote(s)
GK User
Wed Mar 12, 2014 10:06 am
Reply with quote
Report this post
Hi,

I need to change the social icons near LOG IN button and have Facebook, Youtube and vimeo. For the moment I only deleted twitter and google+, and changed the link of the facebook icon but the elements changed their layout. You can see on www.lodicitta.it/gavick_news2 what I mean.
How can I reset them at original size? And where can I add the more icons I need?
As editor I am using JCE as default.
Thank you very much for your very precious help.
User avatar
Expert Boarder

GK User
Thu Mar 13, 2014 4:04 pm
Reply with quote
Report this post
can someone please help me?
User avatar
Expert Boarder

teitbite
Sat Mar 15, 2014 3:22 pm
Reply with quote
Report this post
Hi

Icons require some html5 options which are stripped by joomla editors. Please disable using editor in user settings and make changes to code there. Here is orginal code You should use from clean installation:

Code: Select all
<div class="custom ">
<a target="_blank" href="https://plus.google.com/+gavickpro?rel=author"><i class="gk-icon-gplus"></i></a>
<a target="_blank" href="https://twitter.com/gavickpro"><i class="gk-icon-twitter"></i></a>
<a target="_blank" href="https://www.facebook.com/gavickpro"><i class="gk-icon-fb"></i></a>
<a target="_blank" href="http://www.gavick.com/magazine/?format=feed&amp;type=rss"><i class="gk-icon-rss"></i></a>   
</div>


You can change the url there. About the icons You may use Font Awsome. http://fortawesome.github.io/Font-Awesome/icons/ here You can find available icons and instruction how to use it.
User avatar
Moderator

GK User
Sun Mar 16, 2014 2:50 pm
Reply with quote
Report this post
Thank you teitbite. Now all is fine.
User avatar
Expert Boarder

teitbite
Mon Mar 17, 2014 10:00 pm
Reply with quote
Report this post
Hi

No problem. Glad I could help :)
User avatar
Moderator

GK User
Tue Apr 01, 2014 3:45 am
Reply with quote
Report this post
Hello - I've got the same issue with the News2 template. I wanted to add a YouTube icon but see that Font Awesome is now the preferred choice. I switched to their social media icons, but how do get them to change color on mouse over like the original gk-icons did?
User avatar
Junior Boarder

teitbite
Wed Apr 02, 2014 8:25 pm
Reply with quote
Report this post
Hi

Please show me Your site.
User avatar
Moderator

GK User
Tue Apr 08, 2014 1:02 am
Reply with quote
Report this post
Thanks for the reply. My test site is at stnbeta.com. We're currently using the original gk-icons, but would rather switch over to the preferred Font Awesome ones.
User avatar
Junior Boarder

teitbite
Tue Apr 08, 2014 9:13 pm
Reply with quote
Report this post
Hi

I still can see the regular gavick icons but the code to change on mouse over for twitter icon is:

Code: Select all
#gkSocial a:active i.gk-icon-twitter, #gkSocial a:focus i.gk-icon-twitter, #gkSocial a:hover i.gk-icon-twitter {
    color: #2AA9E0;
}


If You want to add a YouTube icon than You can find a direct code for this icon here: http://fortawesome.github.io/Font-Awesome/icon/youtube/, than a color change with a code proposed by font awsome will looks like this:

Code: Select all
.fa-youtube:hover,
.fa-youtube:active,
.fa-youtube:focus {
    color: pink;
}
User avatar
Moderator

GK User
Sun Apr 13, 2014 2:06 am
Reply with quote
Report this post
Thank you for your help! I did have to make a change to the code before it would work:
Code: Select all
.fa-youtube:hover:before,
.fa-youtube:active,
.fa-youtube:focus {
    color: #CD332D;
}


I also found all of the "official" social media colors here:
http://simpleicons.org/
User avatar
Junior Boarder

teitbite
Mon Apr 14, 2014 5:35 pm
Reply with quote
Report this post
Hi

hover:before ?? Ok, that's interesting. Thank You for the information.
User avatar
Moderator

GK User
Tue Apr 15, 2014 7:03 pm
Reply with quote
Report this post
Hi Just following on from this,

I would like to add instagram, pinterest, linkedin and youtube social icons next to the 3 default ones,

Can you help to how this is achieved? Where are the extra icons?

Thank you
Pd
User avatar
Junior Boarder

teitbite
Thu Apr 17, 2014 8:54 pm
Reply with quote
Report this post
Hi

You can use Font Awsome to add icons. For example pintrest icon:

HTML to add to module:

Code: Select all
<a class="fa fa-pinterest" href="#">Pinterest</a>


CSS code to add to override.css (override needs to be enabled in template settings)

Code: Select all
.fa {
    font-size: 2em;
    -moz-osx-font-smoothing: grayscale;
    display: inline-block;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
}

.fa-pinterest:before {
    content: "\f0d2";
}
User avatar
Moderator

GK User
Tue May 20, 2014 11:24 am
Reply with quote
Report this post
I have read the posts above but it seems I don't really understand how I can change the default gk icons to Font Awesome icons.

My site test site is http://2014.myjcr.com...can you please give me the code I can paste into the custom html module to enable me have icons for:

- Facebook
- Twitter
- and Youtube?
User avatar
Senior Boarder

teitbite
Thu May 22, 2014 11:44 pm
Reply with quote
Report this post
Hi

Now I just had a better idea :) It would be much easier to change the code in custom module to:

Code: Select all
<a href="https://twitter.com/myjcr" target="_blank">
<i class="fa fa-twitter"></i>
</a>
<a href="https://www.facebook.com/myjcr" target="_blank">
<i class="fa fa-facebook"></i>
</a>
<a href="http://www.facebook.com/myjcr" target="_blank">
<i class="fa fa-rss"></i>
</a>


this way the font awsome already included to site will be used.
User avatar
Moderator

GK User
Sat May 24, 2014 12:03 pm
Reply with quote
Report this post
Thank you. It worked for me.
User avatar
Senior Boarder

teitbite
Sat May 24, 2014 3:35 pm
Reply with quote
Report this post
Hi

Sorry I haven't thought about that before. This is much simplier solution :)
User avatar
Moderator

GK User
Sat Sep 27, 2014 2:49 pm
Reply with quote
Report this post
Sorry guys, but where do you modify the code in order to change/add/delete icons and related links?
User avatar
Senior Boarder

teitbite
Sun Sep 28, 2014 10:00 am
Reply with quote
Report this post
Hi

It's a custom html module published in "social" module position.
User avatar
Moderator


cron
Remember me
Register New Account
If you are old Gavick user, click HERE for steps to retrieve your account.