phpBB España Oficial

phpBB España Oficial, Soporte Internacional Oficial del sistema de foros phpBB en Español, extensiones, estilos, traducciones, guías, tutoriales, videos, redes sociales, webmaster.
https://www.phpbb-es.com/foro/

Header hasta los bordes

https://www.phpbb-es.com/foro/viewtopic.php?t=31144

Página 1 de 1

Header hasta los bordes

Publicado: 16 Mar 2011, 21:25
por ezepim6
Hola quisiera modificar el header para que quede de esta manera

Imagen

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.

Re: Header hasta los bordes

Publicado: 17 Mar 2011, 00:17
por 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.

Header hasta los bordes

Publicado: 17 Mar 2011, 15:47
por ezepim6
Creo que no me explique correctamente

Fijate este detalle:

Imagen

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;
}
Imagen


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


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

Header hasta los bordes

Publicado: 17 Mar 2011, 15:56
por javiexin
Comentario retirado, erróneo.
Perdón.
Algún moderador, que borre este mensaje.
-javiexin

Header hasta los bordes

Publicado: 17 Mar 2011, 16:39
por leviatan21
ezepim6 escribió:Creo que no me explique correctamente

Fijate este detalle:

Imagen

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 :roll:

Header hasta los bordes  Tema Solucionado

Publicado: 17 Mar 2011, 16:58
por 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

Header hasta los bordes

Publicado: 17 Mar 2011, 20:07
por ezepim6
javiexin escribió: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>

Header hasta los bordes

Publicado: 17 Mar 2011, 20:37
por 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.

Header hasta los bordes

Publicado: 17 Mar 2011, 20:58
por ezepim6
javiexin escribió: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:

Imagen

Header hasta los bordes

Publicado: 17 Mar 2011, 21:30
por 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

Header hasta los bordes

Publicado: 17 Mar 2011, 21:34
por ezepim6
javiexin escribió: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...

Header hasta los bordes

Publicado: 17 Mar 2011, 21:45
por 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

Header hasta los bordes

Publicado: 17 Mar 2011, 21:53
por ezepim6
javiexin escribió: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 :ok:

Header hasta los bordes

Publicado: 17 Mar 2011, 21:56
por ezepim6
Imagen

Así quedó , gracias
Todos los horarios son UTC+02:00
Página 1 de 1

Desarrollado por phpBB® Forum Software © phpBB Limited

Traducción al español por phpBB España