Create a new social module

Hello
I have another little problem, I would like to create a form, to be included in my topbar fixed, with social icons that have the effect mouseover and custom icons.
I read this thread https://www.gavick.com/forums/post/quote.html?f=104&p=90481, but I did not understand how.

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.

I also downloaded the template Boutique (I like the effect) to try to copy it and install it in my template, but I need some of you to give me a hand.

Hi,
As you see, all links have classes added. So you need to copy css rules for this clasess. All rules for them are in typography1.css. So if you want to implement it on diffrent template you need to copy rules to override.css, then check if those styles need some image or images and copy it too and then add this code from post.