Añadir iconos de redes socialesTema Solucionado

[ThE KuKa]

Como añadir iconos de redes sociales a tu foro.

Articulo ID: 1077
Escrito por: Sinom
Escrito el: 07 de Julio, 2012 23:22
Traducción: ThE KuKa (Raul) - http://www.phpbb-es.com
Descripción: Este artículo le mostrará cómo agregar iconos de redes sociales a su foro phpBB con estilo prosilver.

Enlace original al Articulo: Knowledge Base - How to add social icons

Primero deberás crear una nueva carpeta donde colocaremos dichas nuevas imagenes.
Ve a /styles/prosilver/theme/images y ahora crea dentro de dicha ruta, una nueva carpeta llamada social

Dentro de la nueva carpeta social copia las nuevas imagenes que quieres colocar en el encabezado del foro, dichas imagenes tendrán el nombre social-name.png
Por ejemplo el nombre de la imagen de Facebook tendrá el nombre social-facebook.png

Para conseguir las imagenes pongo unos enlaces que podrían servir perfectamente:

• Twitter
• Facebook
• RSS

Es obvio que puedes añadir las que tu quieras.

Ahora vamos a empezar editando el archivo /styles/prosilver/theme/colours.css así que lo abrimos y nos vamos al final del todo de dicho archivo, y en una nueva línea añadimos este código:

Código: Seleccionar todo

#social_bar {
   margin: 0 auto;
   position: relative;
   right: 10px;
   top: 30px;
}
#social_buttons {
   float: right;
}

Ahora vamos a editar el encabezado de nuestro foro editando el archivo /styles/prosilver/template/overall_header.html así que abrimos este archivo.

BUSCAR:

Código: Seleccionar todo

<div class="inner"><span class="corners-top"><span></span></span>

DESPUÉS AÑADIR:

Código: Seleccionar todo

            <div id="social_bar">
               <div id="social_buttons">
                  <a href="Enlace a tus feeds"><img alt="RSS" width="33px" height="33px" src="{T_THEME_PATH}/images/social/social_rss.png"></a>
                  <a href="http://www.facebook.com/"><img style="border-radius:4px 4px 4px 4px;" alt="Facebook" width="33px" height="33px" src="{T_THEME_PATH}/images/social/social_facebook.png"></a>
                  <a href="http://www.twitter.com/"><img style="border-radius:4px 4px 4px 4px;" alt="Twitter" width="33px" height="33px" src="{T_THEME_PATH}/images/social/social_twitter.png"></a>
               </div>
            </div>

Tras realizar estos cambios, deberéis limpiar cache de temas y plantilla desde el ACP y ver el resultado, si veis que se descuadra con el cuadro de búsqueda del encabezado, podéis probar a eliminar este cuadro de búsqueda y colocar un enlace, esto esta explicado en este Artículo.

Si quieres intentar dejar ese cuadro de búsqueda, prueba de hacer esto.

Abre el archivo /styles/prosilver/theme/common.css

BUSCAR:

Código: Seleccionar todo

#search-box {
   color: #FFFFFF;
   position: relative;
   margin-top: 30px;
   margin-right: 5px;
   display: block;
   float: right;
   text-align: right;
   white-space: nowrap; /* For Opera */
}

BUSCAR margin-right: 5px; y REEMPLAZAR POR: margin-right: 20px;

El resultado debería ser como esta imagen:

1077_social_icons.png (31.56 KiB) Visto 3778 veces

Recuerda limpiar cache de tema y plantilla desde el ACP después de realizar todos los cambios.