Modificando Melankolia

[Jedda]

Modificando Melankolia

Hola gente, bueno, acudo a ustedes para que me den una mano con esto., Pues bien, en un principio no parecía tan complicado, pero se me complicó mucho (hace muy poquito que empecé a probar el phpBB, y quiero terminar de armarla antes de hacer la definitiva…)…

…mi idea original era modificar el overall_header (además de otra que después preguntaré…) para añadir arriba de la tablilla que ya tiene el Melankolia para el login, quería añadir dos tablillas más, una la de arriba de dicha tablilla que después veré que coloco allí, y otra más arriba donde quería colocar una tablilla que sea visible para cuando el usuario esté logeado, donde se muestre SU avatar, además de otras opciones que después veré (pero no puedo porque por alguna razón me salta error (error mío de seguro…)…)…

…además, quería añadir un menú desplegable (que no sé si se puede), sobre todas esas tablillas., El menú que quería añadir era el Tigra (http://www.softcomplex.com/products/tigra_menu/), o alguno similar…

Aclarando estructura:

LOGO (que ya está)
Menu (tigra si se puede…)
Tablilla del Avatar
Tablilla extra (que después veré que coloco)
Tablilla ya existente en el Melankolia

…espero haberme aclarado bien, y que me puedan dar una mano con esto…

…saludos…

Spoiler

Soporte:
URL: http://yuki-tsuki.zxq.net/Forum/portal.php
Versión phpBB: phpBB3 3.0.6 (por ahora)
MODs Instalados: Portal Board3 (por ahora, quizás instale el Portal XL)
Plantilla(s) usada(s): Melankolia (subsilver2)
Servidor: Gratuito
Actualización desde otra versión: No
Conversión desde otro sistema de foros: No

[engendro666]

por el menu, ese que linkeas nunca lo probe, yo usuo en desplegable que es muy sencillo fijate en mi foro: http://tegadiccion.net/foro el segundo menu (no el grande mas abajo el de fondo gris) si te gusta ese menu te digo como lo hice, es muy facil de adaptar y editar ya que es puro html y css. por el resto de preguntos me podrias aclarar con algun ejemplo porque no entendi mucho

[Jedda]

Esta es una imagen modificada de lo que quiero hacer:

http://i44.tinypic.com/264ry2a.jpg

…por lo del menú, me parece perfecto =)

[engendro666]

ok, no parece complicado si tu plantilla no estuviera basada en subsilver y yo manejo mejor prosilver pero de todos modos ni bien venga de estudiar te adjunto una guia de como poner el menu (funciona tanto en subsilver como prosilver) y hago unas pruebas con lo del resto de tablillas a ver si puedo hacerlo con tu plantilla. El menu es solo agregar codigo css a stylesheet.css y luego hacer un html con el contenido del menu ni bien regrese te adjunto un menu de ejmplo asi solo tenes que modificar con el contenido de tu foro

[Makoto]

bueno aka un menun tambien para prosilver muy facil de editar
http://area53.die-muellers.org/dm_eds/d ... php?id=141

aka un ejmplo

http://www.animeshuffles.isgreat.org

[engendro666]

bien me hice un tiempo y prepare un menu de ejemplo, ya esta probado en subsilver2:

Abrir: styles/subsilver2/theme/stylesheet.css

Agregar en una nueva linea al final del archivo:

Código: Seleccionar todo

/*menu desplegable*/
.menu{
	border:none;
	border:0px;
	margin:0px;
	padding:0px;
	font-size:14px;
	font-weight:bold;
	}
.menu ul{
	background:#333333;
	height:35px;
	list-style:none;
	margin:0;
	padding:0;
	}
	.menu li{
		float:left;
		padding:0px;
		}
	.menu li a{
		background:#333333 url("images/sep.gif") bottom right no-repeat;
		color:#cccccc;
		display:block;
		font-weight:normal;
		line-height:35px;
		margin:0px;
		padding:0px 25px;
		text-align:center;
		text-decoration:none;
		}
		.menu li a:hover, .menu ul li:hover a{
			background: #2580a2 url("images/hover.gif") bottom center no-repeat;
			color:#FFFFFF;
			text-decoration:none;
			}
	.menu li ul{
		background:#333333;
		display:none;
		height:auto;
		padding:0px;
		margin:0px;
		border:0px;
		position:absolute;
		width:225px;
		z-index:200;
		}
	.menu li:hover ul{
		display:block;
		
		}
	.menu li li {
		background:url('images/sep2.gif') bottom left no-repeat;
		display:block;
		float:none;
		margin:0px;
		padding:0px;
		width:225px;
		}
	.menu li:hover li a{
		background:none;
		
		}
	.menu li ul a{
		display:block;
		height:35px;
		font-size:12px;
		font-style:normal;
		margin:0px;
		padding:0px 10px 0px 15px;
		text-align:left;
		}
		.menu li ul a:hover, .menu li ul li:hover a{
			background:#2580a2 url('images/hover2.gif') center left no-repeat;
			border:0px;
			color:#ffffff;
			text-decoration:none;
			}
	.menu p{
		clear:left;
		}	
                /*fin del menu desplegable*/

Luego creas un archivo nuevo y vacio con extension .html con este codigo de ejemplo:

Código: Seleccionar todo

<div class="menu">
<ul>
<li><a title="Item 1"> <img src="images/menu/inicio.png" /> &nbsp; <strong>Item 1</strong></a>
  <ul>
<li><a href="#">Sub Item 1</a></li>
<li><a href="#">Sub Item 2</a></li>
<li><a href="#">Sub Item 3</a></li>
<li><a href="#">Sub Item 4</a></li>
</ul>
</li>
<li><a title="#"> <img src="images/menu/comunidad.png" /> &nbsp; <strong>Item 2</strong></a>
<ul>
<li><a href="#">Sub Item 1</a></li>
<li><a href="#">Sub Item 2</a></li>
<li><a href="#">Sub Item 3</a></li>
<li><a href="#">Sub Item 4</a></li>
</ul>
</li>
<li><a title="#"> <img src="images/menu/partidas.png" /> &nbsp; <strong>Item 3</strong></a>
<ul>
<li><a href="#">Sub Item 1</a></li>
<li><a href="#">Sub Item 2</a></li>
<li><a href="#">Sub Item 3</a></li>
<li><a href="#">Sub Item 4</a></li>
</ul>
</li>
<li><a title="#" href="#" ><img src="images/menu/ranking.png" /> &nbsp;<strong>Item 4</strong></a>
<ul>
<li><a href="#">Sub Item 1</a></li>
<li><a href="#">Sub Item 2</a></li>
<li><a href="#">Sub Item 3</a></li>
<li><a href="#">Sub Item 4</a></li>
</ul>
</li>
<li><a title="#" href="#"><img src="images/menu/normas.png"/> &nbsp;<strong>Item 5</strong></a>
<ul>
<li><a href="#">Sub Item 1</a></li>
<li><a href="#">Sub Item 2</a></li>
<li><a href="#">Sub Item 3</a></li>
<li><a href="#">Sub Item 4</a></li>
</ul>
</li>
<li><a title="#" href="#" ><img src="images/menu/soporte.png" /> &nbsp; <strong>Soporte</strong></a>
<ul>
<li><a href="#">Sub Item 1</a></li>
<li><a href="#">Sub Item 2</a></li>
<li><a href="#">Sub Item 3</a></li>
<li><a href="#">Sub Item 4</a></li>
</ul>
</li>
<li><a title="#"> <img src="images/menu/juegos.png" /> &nbsp; <strong>Item 6</strong></a>
<ul>
<li><a href="#">Sub Item 1</a></li>
<li><a href="#">Sub Item 2</a></li>
<li><a href="#">Sub Item 3</a></li>
<li><a href="#">Sub Item 4</a></li>
</ul>
</li>
</ul>
</div>

Guarda el archivo con el nombre "menu.html" y guardalo en la carpeta template de tu estilo

Edita el nombre de los items segun te pongo aca:

<li><a title="Item 1"> <img src="images/menu/inicio.png" /> &nbsp; <strong>Item 1</strong></a> title= item 1 titulo de la pagina img src= "" ruta de la imagen Item 1 Nombre del elemento
<ul>
<li><a href="#">Sub Item 1</a></li> href = link de la pagina
<li><a href="#">Sub Item 2</a></li> Sub item 2 : Nombre del elemento del menu

Luego en el overall_header.html busca:

Código: Seleccionar todo

<div id="logodesc">
		<table width="100%" cellspacing="0">
		<tr>
			<td><a href="{U_INDEX}">{SITE_LOGO_IMG}</a></td>
			<td width="100%" align="center"><h1>{SITENAME}</h1><span class="gen">{SITE_DESCRIPTION}</span></td>
		</tr>
		</table>
	</div>

Agrega una linea despues:

Código: Seleccionar todo

	<!-- INCLUDE menu.html -->

Descarga y descomprimi este archivo:

root.rar

(17.93 KiB) Descargado 80 veces

y copia el contenido ala raiz de tu foro. Con eso ya estaria andando el menu, fijate que las imagenes que te puse son las que uso yo con reemplazarlas bastaria, aunque tambien podes editar el codigo que pegaste en stylesheet.css los colores y forma del menu la editas de ese codigo. No se si me hize entender en los pasos pero cualquier cosa me pregunats y te explico mejor

[Jedda]

No me funciona, se ve tal cual está en la página...

[engendro666]

La cuestion es que tenes que editarlo a tu gusto, en el trozo de codigo que te dije que pegaras en stylesheet editas los colores del menu, en el html los items. Incluso podes ponerle imagenes de fondo yo lo deje en colores por problemas con las resoluciones y es justamente para lo que hice el menu para que se viera bien en cualquier resolucion. Si no entendes que editar decime que le queres cambiar y te digo, aunque investigando un poco lo dejas a gusto enseguida.

[Jedda]

Si, tienes razón, era por una extraña incompatibilidad con el Firefox (en tu página se me ve bien, y en la mía como se ve en la imagen...), pero con el Opera si me funciona a la perfección, gracias amigo, un paso menos.

Imagen: http://i43.tinypic.com/1zd3gr9.jpg

[engendro666]

bueno yo lo veo bien en mi firefox o ya lo arreglaste? yo lo habia probado en IE y en firefox ultimas versiones de los 2, ahora probe el tuyo en firefox y lo veo bien, por cierto quedaron muy bien colores, lo unico que le vi mal fue el color azul al pasar el mouse queda muy ancho el elemento.

[Makoto]

la img q pusiste es por q no has actualizado el caché acp/estilos/temas/tu_Estilo/"actualizar"

[Jedda]

Eso ya lo había hecho, de todas formas, ahora actualicé mi Firefox, y funciona bien...

...y si, el menú todavía lo sigo modificando...

...ahora, alguien sabría decirme cual es el codigo que tengo que colocar para que se vea el avatar del usuario cuando este esté “logeado” (que aparezca en el overall_header)?, he intentado, pero no funciona..., o acaso se necesita de algún MOD para eso?