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;
}
/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>
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>
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 */
}
margin-right: 5px;
y REEMPLAZAR POR: margin-right: 20px;
El resultado debería ser como esta imagen: Recuerda limpiar cache de tema y plantilla desde el ACP después de realizar todos los cambios.