• 1
  • 4 RepliesReplies
  • 5080 ReadTimes Read
  • 9 PointsPoints

Topic: Footer Social Menu 2.0

no avatar
Usuario: Zoom
Rango: Friend de SMFSimple
Mensajes: 384
Points: 13
Mi web: http://www.portalzone.net
Perfil: View Profile
Pais:
mx
Footer Social Menu 2.0
July 24, 2014 - 01:16 13:16
Footer Social Menu 2.0


Hola amigos, con este tip podremos dar a conocer nuestras redes sociales, en nuestro foro con un diseño elegante y un bonito efecto estilo tooltip.

Bien primero vamos a modificar nuestro index.template.php

Buscamos:
Code: [Select]
<div id="footer_section"><div class="frame">
Agregamos despues:
Code: [Select]
<ul class="tt-SocialMenu">
<li><a class="tt-gplus" href="#"><span>Google Plus</span></a></li>
<li><a class="tt-twitter" href="#"><span>Twitter</span></a></li>
<li><a class="tt-facebook" href="#"><span>Facebook</span></a></li>
</ul>

Nota: Modificar # por el link de su perfil en las redes sociales.

Ahora vamos al index.css y agregamos al final.

Code: [Select]
.tt-SocialMenu{
padding: 0;
width: 50%;
height: 10px;
margin: 40px auto 10px auto;
float: left;
}
.tt-SocialMenu li{
float: left;
}
.tt-SocialMenu li a{
display: block;
width: 68px;
height: 70px;
margin: 0 2px;
outline: none;
background: transparent url(../images/growcase_the_social_gunman_icons.png) no-repeat top left;
text-indent: -9000px;
position: relative;
}
.tt-SocialMenu li .tt-gplus{
    background-position: 0px 0px;
}
.tt-SocialMenu li .tt-twitter{
    background-position: -68px 0px;
}
.tt-SocialMenu li .tt-dribbble{
    background-position: -136px 0px;
}
.tt-SocialMenu li .tt-facebook{
    background-position: -204px 0px;
}
.tt-SocialMenu li .tt-linkedin{
    background-position: -272px 0px;
}
.tt-SocialMenu li .tt-forrst{
    background-position: -340px 0px;
}
.tt-SocialMenu li a span{
width: 100px;
height: auto;
line-height: 20px;
padding: 10px;
left: 50%;
margin-left: -64px;
font-family: 'Alegreya SC', Georgia, serif;
font-weight: 400;
font-style: italic;
font-size: 14px;
color: #719DAB;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
text-align: center;
border: 4px solid #fff;
background: rgba(255,255,255,0.3);
text-indent: 0px;
border-radius: 5px;
position: absolute;
bottom: 70px;
opacity: 0;
visibility: visible;
pointer-events: none;
box-shadow: 1px 1px 2px rgba(0,0,0,0.1);
-webkit-transform: translate(35px) rotate(25deg) scale(1.5);
-moz-transform: translate(35px) rotate(25deg) scale(1.5);
-o-transform: translate(35px) rotate(25deg) scale(1.5);
-ms-transform: translate(35px) rotate(25deg) scale(1.5);
transform: translate(35px) rotate(25deg) scale(1.5);
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.tt-SocialMenu li a span:before,
.tt-SocialMenu li a span:after{
content: '';
position: absolute;
bottom: -15px;
left: 50%;
margin-left: -9px;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid rgba(0,0,0,0.1);
}
.tt-SocialMenu li a span:after{
bottom: -14px;
margin-left: -10px;
border-top: 10px solid #fff;
}
.tt-SocialMenu li a:hover span{
visibility: visible;
opacity: 0.9;
-webkit-transform: translate(0px) rotate(0deg) scale(1);
-moz-transform: translate(0px) rotate(0deg) scale(1);
-o-transform: translate(0px) rotate(0deg) scale(1);
-ms-transform: translate(0px) rotate(0deg) scale(1);
transform: translate(0px) rotate(0deg) scale(1);
}

Bien solo falta subir la siguiente imagen a la carpeta images del theme que usen.

Haciendo de lo simple lo ESPECTACULAR
You do not have permission to give points
point 9 Points

Users who gave points in this topic » Papá distante (5 Pts) » 4kstore (3 Pts) » jarc80 (1 Pts) 

no avatar
Usuario: Areus
Rango: Nuevo Usuario
Mensajes: 17
Points: 2
Mi web: http://hubgamer.tk/
Perfil: View Profile
Pais:
ar
Re:Footer Social Menu 2.0
Reply #1 July 30, 2014 - 06:14 06:14
Muchísimas gracias Zoom por el aporte, ahora, ¿es posible que se pueda cambiar el sitio donde figuran los iconos? Verás me queda así;

http://i.imgur.com/48hQjeK.jpg

Y desearía que este arriba de los creditos/copyright.

PD: La imagen de los iconos debe ser colocada en la carpeta BBC

Usuario: 4kstore
Rango: Moderador Global
Mensajes: 4916
Points: 8111
Mi web: http://www.smfsimple.com
Perfil: View Profile
Pais:
ar
Re:Footer Social Menu 2.0
Reply #2 July 30, 2014 - 08:48 08:48
Excelente tutorial, te dejo unos puntos en forma de agradecimiento.
Saludos

Usuario: steven80
Rango: Nuevo Usuario
Mensajes: 25
Points: 2
Perfil: View Profile
Re:Footer Social Menu 2.0
Reply #3 August 21, 2014 - 10:32 10:32
Gracias por compartir.

no avatar
Usuario: Zoom
Rango: Friend de SMFSimple
Mensajes: 384
Points: 13
Mi web: http://www.portalzone.net
Perfil: View Profile
Pais:
mx
Re:Footer Social Menu 2.0
Reply #4 January 22, 2015 - 12:11 12:11
Si alguien tiene la imagen growcase_the_social_gunman_icons.png por favor subanla de nuevo a mi se me borro

 

TAGS



top

Smfsimple.com es un sitio destinado a brindar un servicio de soporte y herramientas para foros realizados con el sistema de foros gratuito simplemachines.org. Contamos con un selecto equipo de desarrolladores y conocedores del sistema, sus foros estaran en buenas manos.
This site is not affiliated with or endorsed by Simple Machines