Tutorial: Redes Sociales en la cabecera

1. Descarga el archivo adjunto Ver el archivo adjunto 2725 el cual contiene las imágenes necesarias.
2. Ve al AdminCP -> Estilos y Plantillas, y edita las siguientes plantillas:
   • header
     Busca:
     
     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:
     
     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:
     
     Insertar CODE, HTML o PHP:

     /* ******* 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;
     }

David! dijo:

lo raro es que el foro no me encuentra el

"additional.css"

Buscandolo de 2 maneras

' additional.css ' y 'additional'

Hacer clic para expandir...

David! dijo:

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

Hacer clic para expandir...

Nanda dijo:

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/v297/Chi-san22587/jsrs.png

que deberia cambiar en las plantillas para que quede arriba?

Hacer clic para expandir...

Nanda dijo:

La cuestión es que no pienso manejar el estilo default D: ~ en fin... gracias, anyway <3

Hacer clic para expandir...