Fest social icons

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
Sat May 10, 2014 12:39 pm
Reply with quote
Report this post
Hello,

I'm trying the template Fest on my site.

Everything works kind of smooth but for some reason I don't seem to get the social icons (right of main menu) right.

First I tried to add Instagram, Tumblr icons to the social_icons.png - but that did nothing.
After a while I gave up and did my own custom html with separate jpg files that I linked to Facebook etc.

Now it doesn't matter what I do - only Facebook icon is showing.

(http://www.flippingoods.com)

Please help,

Magnus
User avatar
Fresh Boarder

GK User
Sat May 10, 2014 12:49 pm
Reply with quote
Report this post
I don't see any social icons on your homepage.
Could you please post an url to your site to exact place where this issue can be seen?
User avatar
Moderator

GK User
Sat May 10, 2014 4:28 pm
Reply with quote
Report this post
Cyberek wrote:I don't see any social icons on your homepage.
Could you please post an url to your site to exact place where this issue can be seen?


Hello - since I posted I've even tried the Perfect Icons - no luck - for some reason all icons become Facebook icon.

You should see them at: http://www.flippingoods.com .

Just checked and icons are there.

BR

Magnus
User avatar
Fresh Boarder

GK User
Sat May 10, 2014 5:44 pm
Reply with quote
Report this post
Please edit the module again with tinyMCE editor turned off (change it to no editor).
Then paste this code:
Code: Select all
<p><a class="gkFb" href="#">Facebook</a> <a class="gkTwitter" href="#">Twitter</a> <a class="gkGplus" href="#">Google+</a> <a class="gkRss" href="#">RSS</a></p>

and start over again.
User avatar
Moderator

GK User
Sat May 10, 2014 6:21 pm
Reply with quote
Report this post
Well...

That only makes the social icons to Facebook, Twitter, Google and RSS.
The whole thing was to get Facebook, Twitter, Google, Tumbr and Instagram.

When I change like you said - it turns back to original - but when I paste in code from Perfect Icons or anything else - every icon turns to Facebook only.

BR

Magnus
User avatar
Fresh Boarder

GK User
Sat May 10, 2014 6:38 pm
Reply with quote
Report this post
Its because you not only need to change html but also include correct font files and css. It will not work out of the box like that.
You might modify templates/gk_fest/images/social_icons.png file and add the icons on the right, but then you need to create custom classes modifying background position to show correct icon.
If you don't know how to do it - please modify png file by inserting your icons and write back I'll help you creating correct css overrides.
User avatar
Moderator

GK User
Sat May 10, 2014 11:52 pm
Reply with quote
Report this post
Cyberek wrote:Its because you not only need to change html but also include correct font files and css. It will not work out of the box like that.
You might modify templates/gk_fest/images/social_icons.png file and add the icons on the right, but then you need to create custom classes modifying background position to show correct icon.
If you don't know how to do it - please modify png file by inserting your icons and write back I'll help you creating correct css overrides.


Fantastic!

Here's the logos I want to use.

Image

BR

Magnus
User avatar
Fresh Boarder

GK User
Sun May 11, 2014 9:48 am
Reply with quote
Report this post
Could you please replace original:
templates/gk_fest/images/social_icons.png
file (back it up in first place)?
User avatar
Moderator

GK User
Sun May 11, 2014 10:04 am
Reply with quote
Report this post
Cyberek wrote:Could you please replace original:
templates/gk_fest/images/social_icons.png
file (back it up in first place)?


Sorry I don't really understand what you want here.
The original file is replaced with updated file (added logos - as you can see with my attached file earlier message).

Thought this is what you wanted?

Or - do you want me to put back original file?

BR

Magnus
User avatar
Fresh Boarder

GK User
Mon May 12, 2014 3:43 pm
Reply with quote
Report this post
1. Your custom module html should look this way:
Code: Select all
<p><a class="gkFb" href="#">Facebook</a> <a class="gkTwitter" href="#">Twitter</a> <a class="gkGplus" href="#">Google+</a> <a class="gkTumblr" href="#">Tumblr</a> <a class="gkInstagram" href="#">Instagram</a></p>

(instead of current list and different classes).
2. Please edit: /templates/gk_fest/css/override.css and add at its end:
Code: Select all
#gkSocial .gkTumblr {
background-position: -134px 0;
}
#gkSocial .gkInstagram {
background-position: -107px 0;
}

Remember to enable "CSS override" in template settings - advanced section.
User avatar
Moderator

GK User
Mon May 12, 2014 4:39 pm
Reply with quote
Report this post
Fantastic Cyberek!

Thanks for all your help - it got perfect!

BR

Magnus
User avatar
Fresh Boarder

GK User
Tue May 13, 2014 3:36 pm
Reply with quote
Report this post
Great.
If you will have any other questions, feel free to post new forum threads.
User avatar
Moderator


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