Redes Sociales en la cabecera

Redes Sociales en la Cabecera (header)

3919068previoredessociales.jpg 3919450previoredessociales2.jpg 3919466previoredessociales3.jpg

Si quieres tener enlaces a tu perfil de las Redes Sociales en la Cabecera de tu foro, aquí tienes una solución.
Duración: 5 minutos.
Dificultad: Baja.
Redes: Facebook y Tuenti
Extra: Youtube

Instrucciones

1. Descarga el archivo adjunto redes-sociales-by-and34.rar el cual contiene las imágenes necesarias.
2. Ve al AdminCP -> Estilos y Plantillas, y edita las siguientes plantillas:
   
   • header
     Busca:
     
     Código HTML:

     <div class="above_body"> <!-- closing tag is in template navbar -->
     <div id="header" class="floatcontainer doc_header">
         {vb:raw ad_location.ad_header_logo}
         <div><a name="top" href="{vb:raw vboptions.forumhome}.php{vb:raw session.sessionurl_q}" class="logo-image"><img src="{vb:stylevar titleimage}" alt="{vb:rawphrase x_powered_by_vbulletin, {vb:raw vboptions.bbtitle}}" /></a></div>

     Añade debajo:
     
     Código HTML:

     <!--Redes Sociales-->
             <div class="social">
                 <div class="base">
                         <a class="social-youtube" href="http://www.youtube.com/tucanal" target="_blank">Youtube</a>
                 </div>
                 <div class="base">
                         <a class="social-facebook" href="http://www.facebook.com/tuperfil" target="_blank">Facebook</a>
                 </div>
                 <div class="base">
                         <a class="social-tuenti" href="http://www.tuenti.es/tuperfil" target="_blank">Tuenti</a>
                 </div>
             </div>
         <!-- fin Redes Sociales-->

   • additional.css
     Añade al final:
     
     Código:

     /* ******* Redes Sociales ******* */
     .social{
     margin-left:10px;
     float:left;
     }
     .base{
     background:transparent url(images/icons/base.png) no-repeat;
     float:left;
     width:27px;
     height:23px;
     margin-left:4px;
     }
     a.social-youtube:link, a.social-youtube:visited{
     text-indent:-20000px;
     background:transparent url(images/icons/youtube.png) no-repeat;
     display:block;
     width:17px;
     height:17px;
     margin-top:2px;
     margin-left:5px;
     }
     a.social-youtube:hover{
     background:transparent url(images/icons/youtube_hover.png) no-repeat;
     }
     a.social-youtube:focus{
     outline:none;
     }
     a.social-facebook:link, a.social-facebook:visited{
     text-indent:-20000px;
     background:transparent url(images/icons/facebook.png) no-repeat;
     display:block;
     width:17px;
     height:17px;
     margin-top:2px;
     margin-left:5px;
     }
     a.social-facebook:hover{
     background:transparent url(images/icons/facebook_hover.png) no-repeat;
     }
     a.social-facebook:focus{
     outline:none;
     }
     a.social-tuenti:link, a.social-tuenti:visited{
     text-indent:-20000px;
     background:transparent url(images/icons/tuenti.png) no-repeat;
     display:block;
     width:17px;
     height:17px;
     margin-top:2px;
     margin-left:5px;
     }
     a.social-tuenti:hover{
     background:transparent url(images/icons/tuenti_hover.png) no-repeat;
     }
     a.social-tuenti:focus{
     outline:none;
     }

Nota: Si no encuentras additional.css, añade el css al final de la plantilla vbulletin.css

No olvides guardar las Modificaciones!!
Si tienes alguna duda, pregunta sin miedo.

Esto y más en vBHispano.com
tags: insertar menu redes sociales iconos youtube facebook tuenti link en header cabecera logo

Hola And34,

Gracias por tu guia a muchos le servirá

** Tema movido a Guías para Vb4 **

Pues como las redes sociales están en la cabecera de mi skin, las redes sociales estan a la cabecera del internet xD

Gracias jjuuaannk, me despiste y no lo puse en el foro correspondiente.

lo raro es que el foro no me encuentra el

"additional.css"

Buscandolo de 2 maneras

' additional.css ' y 'additional'


Que pasa
Esto igual es para 4.0.x

xD

Si david,

Es para vbulletin 4

Saludos

Iniciado por David!

lo raro es que el foro no me encuentra el

"additional.css"

Buscandolo de 2 maneras

' additional.css ' y 'additional'

Esa era mi perguna

Porfa dime porque no me sale

Hola david, porque seguro usas 4.0.0 y esa plantilla viene en 4.0.1

un saludo

y que puedo editar entonces ??

Coloco las Imagenes con HTML en el header si editar CSS

o pasame otro CSS

y si uso 4.0.0 xD

Avía que esperar si el compañero AnD34 tiene la forma de adaptarlo en 4.0.0

un saludo

Iniciado por David!

y que puedo editar entonces ??

Coloco las Imagenes con HTML en el header si editar CSS

o pasame otro CSS

y si uso 4.0.0 xD

Por que no pruebas a meter el css en el vbulletin.css o en el vbulletin-chrome.css,seguramente te funcione igual si no tienes los css que pide,yo lo e hecho en local y me a funcionado.

Un saludo

woow muy buen tip =D lo agregare a mi sitio!! thx!

@David busca la plantilla vbulletin.css y pega el codigo css al final. Lo he probado y funciona sin problemas.

Muy bien exelente gracias

me quedo todo prefecto mi pregunta es yo puedo colocar twitter en ves de social-tuenti por que no se para que me sirvesocial-tuenti

pero todo me quedo prefecto muchas gracias

Hola chicos!

Miren, me salió bien todo para uno de mis skins, pero en este las redes salen abajo del banner, y no arriba de él D:

http://img.photobucket.com/albums/v2...22587/jsrs.png

que deberia cambiar en las plantillas para que quede arriba?