Header hasta los bordesTema Solucionado

[ezepim6]

Hola quisiera modificar el header para que quede de esta manera



Lo hice con photoshop al preview, es posible hacer que el header llegue hasta esos bordes negros???

Edit: supongo que el foro tendria que quedar de un tamaño fijo, cosa que no me importaria.

[Alorse]

abre el archivo /styles/SimpleGreen/theme/common.css y busca:

Código: Seleccionar todo

#wrap {
	padding: 0 20px;
	min-width: 800px;
}

Cambialo por:

Código: Seleccionar todo

#wrap {
   padding: 0 20px;
   min-width: 800px;
   width: 98%;
   margin: 0 auto;
}

Ahi ya lo tendras con el ancho completo, si quieres modificarlo solo edita la propiedad width: 98% y pon el numero que quieras, ya sea en porcentaje o en pixeles.

[ezepim6]

Creo que no me explique correctamente

Fijate este detalle:



Quisiera que el header llegue hasta los bordes, pero los demas bloques de foros etc, queden con borde.


Repito que ese preview lo hice con photoshop, actualmente el foro esta asi:
#wrap {
padding: 0 20px;
min-width: 800px;
width: 96%;
margin: 0 auto;
}



Aplicando los cambios que me pusiste arriba queda asi:
#wrap {
padding: 0 20px;
min-width: 800px;
width: 98%;
margin: 0 auto;
}



Y si lo subo a 100% queda así:
#wrap {
padding: 0 20px;
min-width: 800px;
width: 100%;
margin: 0 auto;
}

[javiexin]

Comentario retirado, erróneo.
Perdón.
Algún moderador, que borre este mensaje.
-javiexin

[leviatan21]

Creo que no me explique correctamente

Fijate este detalle:



Quisiera que el header llegue hasta los bordes, pero los demas bloques de foros etc, queden con borde.


Repito que ese preview lo hice con photoshop, actualmente el foro esta asi:

Creo entender que lo que quieres hacer tu es que sólo la imagen de la cabecera llegue hasta los bordes, pero como en tu foro esa imagen no existe (porque lo aclaras, lo hiciste con photoshop), se hace difícil buscarle una solución, a mi entender, debería colocar esa imagen en el foro, para que luego te hagamos sugerencias

[javiexin]

Vamos a ver si me sale, que no es sencillo.

Abre la plantilla overall_header.html
Busca el bloque <div class="headerbar"> hasta su correspondiente </div>, copias todo el código, y lo mueves justo antes de <div id="wrap">.
En este mismo trozo que acabas de mover, borra todos los bloques <span> (hay cuatro, dos arriba con "corners-top" y dos abajo con "corners-bottom").

Abre el fichero de estilo .css y busca el bloque de .round, ahí, pones padding-top: 0; (o lo borras).
Ahora, buscas el bloque .headerbar, y añades una nueva línea con height: 200px; (el número 200 tiene que ser la altura del banner que vas a poner como logo).
En este mismo bloque, cambia padding: 0 5px; por padding: 0; (o lo borras).
Ahora le toca al bloque #site-description, en que tienes que poner width: 100%;.
Y por último, en el bloque #logo, cambias la línea que contiene padding por padding: 0; (o lo borras).

Ya está listo para que pongas la cabecera que quieres como LOGO del foro. Tiene que ocupar EXACTAMENTE: 1080 x altura, donde esa altura es el número que has puesto en lugar del 200 que he mencionado antes.

Espero que te funcione, si no es así, avísanos. Un saludo,
-javiexin

[ezepim6]

Vamos a ver si me sale, que no es sencillo.

Abre la plantilla overall_header.html
Busca el bloque <div class="headerbar"> hasta su correspondiente </div>, copias todo el código, y lo mueves justo antes de <div id="wrap">.
En este mismo trozo que acabas de mover, borra todos los bloques <span> (hay cuatro, dos arriba con "corners-top" y dos abajo con "corners-bottom").

Abre el fichero de estilo .css y busca el bloque de .round, ahí, pones padding-top: 0; (o lo borras).
Ahora, buscas el bloque .headerbar, y añades una nueva línea con height: 200px; (el número 200 tiene que ser la altura del banner que vas a poner como logo).
En este mismo bloque, cambia padding: 0 5px; por padding: 0; (o lo borras).
Ahora le toca al bloque #site-description, en que tienes que poner width: 100%;.
Y por último, en el bloque #logo, cambias la línea que contiene padding por padding: 0; (o lo borras).

Ya está listo para que pongas la cabecera que quieres como LOGO del foro. Tiene que ocupar EXACTAMENTE: 1080 x altura, donde esa altura es el número que has puesto en lugar del 200 que he mencionado antes.

Espero que te funcione, si no es así, avísanos. Un saludo,
-javiexin

La primer parte me parece que esta distinta.... asi esta ahora....

Código: Seleccionar todo

<!-- INCLUDE gallery/plugins_header.html -->
</head>

<body id="phpbb" class="section-{SCRIPT_NAME} {S_CONTENT_DIRECTION}">

<div class="round">

<div id="wrap">
	<a id="top" name="top" accesskey="t"></a>
	<div id="page-header">
                <div class="headerbar">
			<div class="inner"><span class="corners-top"><span></span></span>
			<div id="site-description">
				<a href="{U_INDEX}" title="{L_INDEX}" id="logo">{SITE_LOGO_IMG}</a>
				<p class="skiplink"><a href="#start_here">{L_SKIP}</a></p>
			</div>
			<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 class="icon-home"><a href="{U_INDEX}" accesskey="h">{L_INDEX}</a> <!-- BEGIN navlinks --> <strong>&#8249;</strong> <a href="{navlinks.U_VIEW_FORUM}">{navlinks.FORUM_NAME}</a><!-- END navlinks --></li>

				<li class="rightside" style="font-size: 1em;">
          <!-- IF S_DISPLAY_SEARCH and not S_IN_SEARCH -->
             <div id="search-box">
                <form action="{U_SEARCH}" method="post" id="search">
                <fieldset>
                   <input name="keywords" id="keywords" type="text" maxlength="128" title="{L_SEARCH_KEYWORDS}" class="inputbox search" value="<!-- IF SEARCH_WORDS-->{SEARCH_WORDS}<!-- ELSE -->{L_SEARCH_MINI}<!-- ENDIF -->" onclick="if(this.value=='{LA_SEARCH_MINI}')this.value='';" onblur="if(this.value=='')this.value='{LA_SEARCH_MINI}';" />
                   <input class="button2" value="{L_SEARCH}" type="submit" /><br />
                    {S_SEARCH_HIDDEN_FIELDS}
                </fieldset>
                </form>
             </div>
          <!-- ENDIF -->
        </li>

No deberia empezar desde <div id="page-header"> osea copiar todo este codigo???

Código: Seleccionar todo

<div id="page-header">
                <div class="headerbar">
			<div class="inner"><span class="corners-top"><span></span></span>
			<div id="site-description">
				<a href="{U_INDEX}" title="{L_INDEX}" id="logo">{SITE_LOGO_IMG}</a>
				<p class="skiplink"><a href="#start_here">{L_SKIP}</a></p>
			</div>
			<span class="corners-bottom"><span></span></span></div>
		</div>

[javiexin]

No, eso también incluye el área de "navbar", que no debe ocupar todo el ancho.
El <br /> que hay entre "headerbar" y "navbar" lo puedes borrar, no hace falta para nada.

[ezepim6]

No, eso también incluye el área de "navbar", que no debe ocupar todo el ancho.
El <br /> que hay entre "headerbar" y "navbar" lo puedes borrar, no hace falta para nada.

Ya casi lo tengo decime que me puede estar faltando para sacar ese bordecito que quedó arriba:

[javiexin]

No lo sé, no lo tienes puesto en el foro, y así no puedo ver cómo arreglarlo...

He vuelto a probar haciendo los cambios que te he dicho, y ha funcionado a la primera, así que algo no has hecho bien en los cambios de estilo.

Saludos,
-javiexin

[ezepim6]

No lo sé, no lo tienes puesto en el foro, y así no puedo ver cómo arreglarlo...

He vuelto a probar haciendo los cambios que te he dicho, y ha funcionado a la primera, así que algo no has hecho bien en los cambios de estilo.

Saludos,
-javiexin

Si lo tengo en el foro, no lo ves? sino con que hice la captura???

Cuando hablas de el fichero .css es el colours o el common porque por ejemplo .round esta en colours , .headerbar esta en los dos...

[javiexin]

Te sobran los dos bloques <span class="corners-top"></span> y <span class="corners-bottom"></span> en el overall_header.html y listo.

Saludos,
-javiexin

[ezepim6]

Te sobran los dos bloques <span class="corners-top"></span> y <span class="corners-bottom"></span> en el overall_header.html y listo.

Saludos,
-javiexin

Listo capo, doy como solucionado el tema, sos un groso

[ezepim6]

Así quedó , gracias