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 fácilmente una barra lateral al foroTema Solucionado

Dudas sobre estilos phpBB 3.0.x
Colaboraciones gráficas paquetes de rangos aquí y botones aquí.
  Reglas del Foro
Cerrado

0
No hay votos
 
Votos totales: 0
Avatar de Usuario
mitch
Ex Staff
Mensajes: 4260
Registrado: 04 Sep 2005, 04:28
Género:

Añadir fácilmente una barra lateral al foro  Tema Solucionado

#1

Mensaje por mitch »

Hola... la idea de esta guía, es poder añadir una barra lateral, muy sencilla.
La idea es poder poner un menú (como el de la cabecera), Enlaces a webs amigas, publicidad, o lo que se te ocurra.

Poner el avatar o el nick del usuario ya es algo mas avanzado, y el objetivo de esta guía no es ese. Para ello, habría que instalar un MOD como SilverBar MOD, publicado/traducido en este foro (pero obviamente eso es mas difícil de instalar).

Asi que veremos como agregar, de forma muy sencilla, una barra lateral, que aparecerá en todas las páginas de tu foro (al ver un tema, en la busqueda, etc).

Puedes editar lo que gustes, agregar nuevos bloques, quitar los que pongo yo por defecto, agregar mas enlaces, etc etc... solo es cosa de probar.

Imagenes de Muestra (prosilver y subsilver2):

Imagen Imagen

Importante:
  • Recuerda limpiar el caché luego de editar.
  • Cuando edites, ve a Archivo > Guardar Como..., guardas con el mismo nombre, pero abajo, donde dice "Tipo de archivo" o similar, seleccionas UTF8 (o los acentos te aparecerán extraños).
:arrow: Primero, debes subir unas imágenes...
Sube las imagenes del adjunto, a la carpeta /images/ de tu foro.
imagenes barra lateral.zip
(9.82 KiB) Descargado 285 veces
:arrow: Edición para Prosilver (y plantillas que se basen en este estilo)
  • Abrir: /styles/prosilver/template/overall_header.html

    Al final del archivo, en una nueva línea, Agregar:

    Código: Seleccionar todo

    <table width="100%" cellspacing="0">
<tr>
<td valign="top" width="17%" style="padding-right:8px;">

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

<ul class="linklist navlinks">
<li><img src="./images/nav.png">&nbsp;<b>Navegación</b></li></ul>
					
<img src="./images/dot.gif" border="0"><a href="index.php">Índice general</a>
<br><img src="./images/dot.gif" border="0"><a href="search.php">Buscar</a>
<!-- IF S_USER_LOGGED_IN -->
<br><img src="./images/dot.gif" border="0"><a href="ucp.php">Perfil</a>
<br><img src="./images/dot.gif" border="0"><a href="{U_PRIVATEMSGS}">{PRIVATE_MESSAGE_INFO}</a>
<!-- ENDIF -->
<br><img src="./images/dot.gif" border="0"><a href="search.php?search_id=newposts">Mensajes nuevos</a>
<br><img src="./images/dot.gif" border="0"><a href="search.php?search_id=egosearch">Sus mensajes</a>
<br><img src="./images/dot.gif" border="0"><a href="search.php?search_id=unanswered">Mensajes sin respuesta</a>
<br><img src="./images/dot.gif" border="0"><a href="search.php?search_id=active_topics">Temas activos</a>
<br>
<!-- IF not S_USER_LOGGED_IN and S_REGISTER_ENABLED -->
<br><img src="./images/dot.gif" border="0"><a href="{U_REGISTER}">{L_REGISTER}</a>
<!-- ENDIF -->
<!-- IF not S_IS_BOT -->
<br><img src="./images/dot.gif" border="0"><a href="{U_LOGIN_LOGOUT}">{L_LOGIN_LOGOUT}</a>
<!-- ENDIF -->
		
<ul class="linklist navlinks">
<br><li><img src="./images/user.png">&nbsp;<b>Usuarios</b></li></ul>
							
<img src="./images/dot.gif" border="0"><a href="memberlist.php">Lista de Usuarios</a>
<br><img src="./images/dot.gif" border="0"><a href="memberlist.php?mode=leaders">El equipo</a>

<ul class="linklist navlinks">
<br><li><img src="./images/help.png">&nbsp;<b>Ayuda</b></li></ul>

<img src="./images/dot.gif" border="0"><a href="faq.php">FAQ</a>
<br><img src="./images/dot.gif" border="0"><a href="faq.php?mode=bbcode">FAQ BBcodes</a>
<br><img src="./images/dot.gif" border="0"><a href="ucp.php?mode=terms">Términos de uso</a>
<br><img src="./images/dot.gif" border="0"><a href="ucp.php?mode=privacy">Política de Privacidad</a>

<span class="corners-bottom"><span></span></span>
</div>
</div>


<br><div class="navbar">
<div class="inner">
<span class="corners-top"><span></span></span>
<ul class="linklist navlinks">
<li><img src="./images/world_link.png">&nbsp;<b>Webs Amigas</b></li></ul>
					
<marquee id="webs" name="webs" behavior="scroll" direction="up" scrolldelay="100" scrollamount="2" onmouseover="this.stop()" onmouseout="this.start()" height="100">
<center>
<a href="http://www.phpbb.com/" target="_blank"><img src="./images/phpbb.gif"></a>
</center>
</marquee>

<span class="corners-bottom"><span></span></span>
</div>
</div>


<br><div class="navbar">
<div class="inner">
<span class="corners-top"><span></span></span>
<ul class="linklist navlinks">
<li><img src="./images/cup.png">&nbsp;<b>Publicidad</b></li></ul>
					
Puedes poner una imagen o código de Google Ad.

<span class="corners-bottom"><span></span></span>
</div>
</div>

</td>
<td width="100%" valign="top">
    nota: en la tercera línea, el 17% es el ancho de la barra lateral. Puedes cambiarlo si quieres.
    El resto creo que no es tan difícil de poder modificar.
  • Abrir: /styles/prosilver/template/overall_footer.html

    Al principio del archivo, en una nueva línea, agregar:

    Código: Seleccionar todo

    </td>
</tr>
</table>
:arrow: Edición para Subsilver2 (y plantillas que se basen en este estilo)
  • Abrir: /styles/subsilver2/template/overall_header.html

    Al final del archivo, en una nueva línea, Agregar:

    Código: Seleccionar todo

    <table width="100%" cellpadding="3">
<tr>
<td valign="top" width="17%">

<table class="tablebg" width="100%" cellspacing="1">
<tr><th align="left"><img src="./images/menu.png">&nbsp;Menú</th></tr>

<tr><td class="cat"><h4><img src="./images/nav.png">&nbsp;Navegación</h4></td></tr>
<tr><td class="row1" width="100%"><p class="genmed">
	
<img src="./images/dot.gif" border="0"><a href="index.php">Índice general</a>
<br><img src="./images/dot.gif" border="0"><a href="search.php">Buscar</a>
<!-- IF S_USER_LOGGED_IN -->
<br><img src="./images/dot.gif" border="0"><a href="ucp.php">Perfil</a>
<br><img src="./images/dot.gif" border="0"><a href="{U_PRIVATEMSGS}">{PRIVATE_MESSAGE_INFO}</a>
<!-- ENDIF -->
<br><img src="./images/dot.gif" border="0"><a href="search.php?search_id=newposts">Mensajes nuevos</a>
<br><img src="./images/dot.gif" border="0"><a href="search.php?search_id=egosearch">Sus mensajes</a>
<br><img src="./images/dot.gif" border="0"><a href="search.php?search_id=unanswered">Mensajes sin respuesta</a>
<br><img src="./images/dot.gif" border="0"><a href="search.php?search_id=active_topics">Temas activos</a>
		<br>
<!-- IF not S_USER_LOGGED_IN and S_REGISTER_ENABLED -->
<br><img src="./images/dot.gif" border="0"><a href="{U_REGISTER}">{L_REGISTER}</a>
<!-- ENDIF -->
<!-- IF not S_IS_BOT -->
<br><img src="./images/dot.gif" border="0"><a href="{U_LOGIN_LOGOUT}">{L_LOGIN_LOGOUT}</a>
<!-- ENDIF -->
<br></p></td></tr>

<tr><td class="cat"><h4><img src="./images/user.png">&nbsp;Usuarios</h4></td></tr>
<tr><td class="row1" width="100%"><p class="genmed">

<img src="./images/dot.gif" border="0"><a href="memberlist.php">Lista de Usuarios</a>
<br><img src="./images/dot.gif" border="0"><a href="memberlist.php?mode=leaders">El equipo</a>
<br></p></td></tr>

<tr><td class="cat"><h4><img src="./images/help.png">&nbsp;Ayuda</h4></td></tr>
<tr><td class="row1" width="100%"><p class="genmed">

<img src="./images/dot.gif" border="0"><a href="faq.php">FAQ</a>
<br><img src="./images/dot.gif" border="0"><a href="faq.php?mode=bbcode">FAQ BBcodes</a>
<br><img src="./images/dot.gif" border="0"><a href="ucp.php?mode=terms">Términos de uso</a>
<br><img src="./images/dot.gif" border="0"><a href="ucp.php?mode=privacy">Política de Privacidad</a>

<br></p></td></tr>
</table>

<br>
<table class="tablebg" width="100%" cellspacing="1">
<tr><th align="left"><img src="./images/world_link.png">&nbsp;Webs Amigas</th></tr>
<tr><td class="row1" width="100%"><p class="genmed">

<marquee id="webs" name="webs" behavior="scroll" direction="up" scrolldelay="100" scrollamount="2" onmouseover="this.stop()" onmouseout="this.start()" height="100">
<center>
<a href="http://www.phpbb.com/" target="_blank"><img src="./images/phpbb.gif"></a>
</center>
</marquee>

</p></td></tr>
</tr>
</table>

<br>
<table class="tablebg" width="100%" cellspacing="1">
<tr><th align="left"><img src="./images/cup.png">&nbsp;Publicidad</th></tr>
<tr><td class="row1" width="100%"><p class="genmed">
Puedes poner una imagen o código de Google Ad.
</p></td></tr>
</tr>
</table>

</td>
<td width="100%" valign="top">
    nota: en la tercera línea, el 17% es el ancho de la barra lateral. Puedes cambiarlo si quieres.
    El resto creo que no es tan difícil de poder modificar.
  • Abrir: /styles/subsilver2/template/overall_footer.html

    Al principio del archivo, en una nueva línea, Agregar:

    Código: Seleccionar todo

    </td>
</tr>
</table>
:arrow: ¿ Y si quiero agregar nuevos bloques ?
  • En prosilver, debes añadir luego de algun otro bloque (dentro del código de arriba), un código como este:

    Código: Seleccionar todo

    <br><div class="navbar">
<div class="inner">
<span class="corners-top"><span></span></span>
<ul class="linklist navlinks">
<li><img src="./images/cup.png">&nbsp;<b>Título</b></li></ul>
					
Acá poner el contenido.

<span class="corners-bottom"><span></span></span>
</div>
</div>
    Editando la imagen, título y el contenido.
    nota: Cada bloque, de los que agregamos arriba, termina en 2 </div> seguidos. Por lo tanto, debajo eso, agregas el nuevo bloque.
  • En subsilver2, algo como esto:

    Código: Seleccionar todo

    <br>
<table class="tablebg" width="100%" cellspacing="1">
<tr><th align="left"><img src="./images/cup.png">&nbsp;Título</th></tr>
<tr><td class="row1" width="100%"><p class="genmed">

Acá poner el contenido.

</p></td></tr>
</tr>
</table>
    Editas la imagen, el título y el contenido.
    nota: cada bloque, de los que agregamos arriba, termina en </table>. Por lo tanto debajo de eso, agregas el nuevo bloque
Dudas, consultas... en los foros de soporte, con sus datos obviamente.
Arriba
Cerrado

Volver a “Soporte para Estilos phpBB 3.0.x”