Recordad que para pedir soporte alguno, debéis facilitar los datos de soporte oportunos por favor, mirad aquí y leer las Normas generales del foro, esto nos servirá de ayuda para dar el mejor soporte..

Gracias.

La Administración de phpBB España.

Añadir iconos de redes socialesTema Solucionado

Dudas sobre estilos phpBB 3.0.x
Colaboraciones gráficas paquetes de rangos aquí y botones aquí.
Cerrado
Avatar de Usuario
ThE KuKa
Administrador
Mensajes: 8930
Registrado: 04 Ene 2004, 19:27
Nombre real: Raúl
Ubicación: Terrassa
Género:
Edad: 45
Contactar:

Añadir iconos de redes sociales  Tema Solucionado

#1

Mensaje por ThE KuKa » 19 Oct 2014, 15:26

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: 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
1077_social_icons.png (31.56 KiB) Visto 2752 veces
Recuerda limpiar cache de tema y plantilla desde el ACP después de realizar todos los cambios.


Raul [ThE KuKa] en phpBB
Jr. Extension Validator - Jr. Styles Validator - Style Customisations - Translator - International Support Team


Enlace:
BBCode:
HTML:

Ocultar enlaces al mensaje
Mostrar enlaces al mensaje

Cerrado

Volver a “Soporte para Estilos phpBB 3.0.x”