Author Topic: Social Icons  (Read 6202 times)

Offline emanuelben616

  • Jr. Member
  • **
  • Posts: 55
  • Karma: +2/-0
    • View Profile
Social Icons
« on: June 11, 2015, 04:29:58 PM »
Hi, I wanted to know if anyone knows how to change the color for the social icons. As well how do I put in Pinterest logo and the like it button for Facebook and Pinterest. Any help will do. Thank you so much!!

Offline Basara

  • Administrator
  • Hero Member
  • *****
  • Posts: 5798
  • Karma: +274/-2
    • View Profile
Re: Social Icons
« Reply #1 on: June 12, 2015, 02:13:17 AM »
Hello

For social icons in header you need to edit HTML block. Visit Admin-Design-Blocks and search for social name

Offline emanuelben616

  • Jr. Member
  • **
  • Posts: 55
  • Karma: +2/-0
    • View Profile
Re: Social Icons
« Reply #2 on: June 12, 2015, 12:54:32 PM »
I have done that but when i put in for example like Pinterest the icon for Facebook shows. Any advice on how to change that?

Offline Basara

  • Administrator
  • Hero Member
  • *****
  • Posts: 5798
  • Karma: +274/-2
    • View Profile
Re: Social Icons
« Reply #3 on: June 15, 2015, 02:40:28 AM »
To remove facebook icon change
Code: [Select]
<a class="facebook" href=to
Code: [Select]
<a href=
You need to add Pinterest icon manually

Offline emanuelben616

  • Jr. Member
  • **
  • Posts: 55
  • Karma: +2/-0
    • View Profile
Re: Social Icons
« Reply #4 on: June 15, 2015, 04:32:57 PM »
ok awesome thank you!

Offline jaysbar

  • Full Member
  • ***
  • Posts: 139
  • Karma: +13/-5
    • View Profile
Re: Social Icons
« Reply #5 on: June 22, 2015, 11:13:03 AM »
I hope this comprehensive guide helps:

How to edit the Social Media Icons and links
1.   Go to Design/Blocks
2.   Edit the Social Icons block
3.   Add your HTML line such as <a href="http://www.facebook.com/AbanteCart" target="_blank" title="Facebook" class="facebook">Facebook</a> and Save
4.   Open the icons grid from /Storefront/View/Default/Image/Footericon.png
5.   Erase over one of the unused icons such as Dig or Linkedin
6.   Download your new icon from the internet (i.e the F for Facebook) and put it in the spaces you just made (you need to add it to the top and bottom grid as the bottom grid is a Hover icon)
7.   Use the Photoshop filter to select a Colour Overlay to match the top and bottom grid
8.   Save the image
9.   Open /Storefront/View/Default/Stylesheet/Style.CSS
10.   Find references to the inage you just erased (i.e Dig) and change the word in 4 places from Dig to Facebook (or whatever icon you just added) then Save
11.   Put all of these files back on your FTP server and BINGO!

Offline Basara

  • Administrator
  • Hero Member
  • *****
  • Posts: 5798
  • Karma: +274/-2
    • View Profile
Re: Social Icons
« Reply #6 on: June 23, 2015, 03:01:29 AM »
Thank You, jaysbar.

 

Powered by SMFPacks Social Login Mod