Social Media buttons in a other Template

Hi,

i would like use the Social Buttons at the end of the site in a other Templates. Where is the code what i must copy.

I find only the images and the code under style(1,2,3).css but i need also the code that i can use the graphic and animation for mouse over

Hi,
do you talk about that ?

social-icons.png

Tip for Joomla 2.5
HTML code is easy:

Code: Select all

<div class="custom">
<a href="#" class="gkTwitter">Twitter</a>
<a href="#" class="gkFb">Facebook</a>
<a href="#" class="gkPinterest">Pinterest</a>
<a href="#" class="gkGplus">Google+</a>   
</div>

CSS code

Code: Select all

.gkTwitter,
.gkFb,
.gkGplus,
.gkPinterest {
   color: #363636;
   display: inline-block;
   font-size: 14px;
   font-weight: 600;
   line-height: 60px;
   padding: 0 65px 0 48px;
   text-transform: uppercase;
   -webkit-transition: background 0.3s cubic-bezier(.17,.67,.88,1.25), color 0.2s linear;
      -moz-transition: background 0.3s cubic-bezier(.17,.67,.88,1.25), color 0.2s linear;
        -o-transition: background 0.3s cubic-bezier(.17,.67,.88,1.25), color 0.2s linear;
           transition: background 0.3s cubic-bezier(.17,.67,.88,1.25), color 0.2s linear;
}

.gkTwitter {
   background: transparent url('../images/style1/social_icons.png') no-repeat 0 0;
}

.gkFb {
   background: transparent url('../images/style1/social_icons.png') no-repeat 0 -60px;
}

.gkPinterest {
   background: transparent url('../images/style1/social_icons.png') no-repeat 0 -120px;
}

.gkGplus {
   background: transparent url('../images/style1/social_icons.png') no-repeat 0 -180px;   
}

.gkTwitter:active,
.gkTwitter:focus,
.gkTwitter:hover {
   background: transparent url('../images/style1/social_icons.png') no-repeat 0 -240px;
   color: #f7693b;
}

.gkFb:active,
.gkFb:focus,
.gkFb:hover {
   background: transparent url('../images/style1/social_icons.png') no-repeat 0 -300px;
   color: #f7693b;
}

.gkPinterest:active,
.gkPinterest:focus,
.gkPinterest:hover {
   background: transparent url('../images/style1/social_icons.png') no-repeat 0 -360px;
   color: #f7693b;   
}

.gkGplus:active,
.gkGplus:focus,
.gkGplus:hover {
   background: transparent url('../images/style1/social_icons.png') no-repeat 0 -420px;
   color: #f7693b;   
}

but you have to copy PNG images also ! and change URL or create this same folder structure.

Thank You , works perfect