Social Icons.

Can someone provide me with a little more information on how to edit the social icons in the boutique template?

I'm aware that the image file is located in templates/gk_boutique/images/social_icons.png
I'm alsow aware that there is a customer HTML module in teh social module position.

I'm just not clear on how to play with the existing code to do the following

1. Reorder existing images in the existing social_icons.png as I want facebook, twitter, and youtube to be the first three.
2. Add my own icons for linkedin, etc.

I'm presuming that I just change the image file social_icons.png to be in the order and contain the new icons, but can someone assist me in what code alterations I'd make?

To assist, here's my ideal social bar order.
1. facebook
2. twitter
3. linkedin
4. google+
5. pinterest
6. youtube
7. vimeo
8. flickr
9. angie's list

Thanks in advance to all who read and especially to those who assist...

Hi,
social icon module in boutique is a Custom HTML module with this content:

Code: Select all

<div class="gkSocialIcons"><a class="gkSocialIcon iconTwitter" href="#">Twitter</a> <a class="gkSocialIcon iconYouTube" href="#">YouTube</a> <a class="gkSocialIcon iconVimeo" href="#">Vimeo</a> <a class="gkSocialIcon iconFacebook" href="#">Facebook</a> <a class="gkSocialIcon iconSkype" href="#">Skype</a> <a class="gkSocialIcon iconDigg" href="#">Digg</a> <a class="gkSocialIcon iconMobyPicture" href="#">MobyPicture</a> <a class="gkSocialIcon iconLastFM" href="#">Last.FM</a> <a class="gkSocialIcon iconDribbble" href="#">dribbble</a></div>


To add link to social profile you have to add url to your profile account in href. Now there are '#'. If you want to change order icons you only need change links order.
We use one image with all social icons as a background and we only change background position in css. But if you want own icons you can update file to images folder and add own css rule to link.

Hi - thanks for the quick reply. It appears there are references in this code below that I'll have to change as well?

for example, I don't want dribble, but will be changing that icon to angie's list.

<a class="gkSocialIcon iconDribbble" href="#">dribbble

I see a reference to "iconDribbble" in this code snippet that I'm unclear how to address. Is there another css file I need to pull up and change iconDribble to iconAngie?

I just want my callouts to be correct and learn along the way.

Thanks!

Css file depends from style you are using. If you are using style 1 all code for social icons you will find in css/typography.style1.css if style 2 it will be in css/typography.style2.css.Just edit it. But if you want to add new code I advise add it to override.css. It will avoid issues during further updates becasue this is olny one css file which you will never override. But remember to enable override.css options in template settings.