ProSilver Nombre y descripción quitar de cabecera?Tema Solucionado

[wonder]

Hola.
Realmente son 2 dudas que tengo, aunque relacionadas entre si (o quizás no )
Se que existe una extensión, Site Logo, y la he usado, más o menos hace lo que deseo, pero prefiero hacerlo directamente en plantilla, de inicio, me ralentiza un pelín la carga inicial, y si haces ctrl+f5 durante unos "micro instantes" aparece el logo original hasta que carga el configurado.
Por ello he desactivado dicha extensión (a parte, cuanto menos carga de extensiones, mejor que mejor, que ya tengo unas cuantas...).
Configurado en archivos colours.css y common.css, en el primero, he indicado el nombre de mi logo, en el segundo, sus dimensiones (600x90), también en este último indicado que este en "center" (aunque ahora lo tengo en left).
No queda del todo centrado y aparece el nombre y descripción del sitio.
La descripción puedo quitarla dejando dicho campo en blanco en el PCA, lo mismo sucede si dejo dicho campo en blanco para Nombre del Sitio, no aparece, pero entonces, el foro no tiene Nombre, y ese si que me interesa que lo tenga.
La idea es, para probar por si se centra, poder quitar el nombre y descripción del sitio, pero teniendo estos campos configurados en el PCA (sobre todo el nombre del sitio).
He mirado como hacerlo pero no he visto el modo.
Supongo que así, se centrará más, no lo sé, pero hay que probarlo...

Gracias por adelantado.

[AlfredoRamos]

Sólo te refieres al estilo prosilver? porque por default su contenedor no ocupa todo el ancho.

Si entendí bien lo que quieres, puedes hacerlo modificando lo siguiente:

En common.css busca:

Código: Seleccionar todo

.site-description {
	float: left;
	width: 65%;
}

Y replazalo por:

Código: Seleccionar todo

/*.site-description {
	float: left;
	width: 65%;
}*/

En el mismo fichero, busca:

Código: Seleccionar todo

.logo {
	float: left;
	width: auto;
	padding: 10px 13px 0 10px;
}

Y remplazalo por:

Código: Seleccionar todo

/*.logo {
	float: left;
	width: auto;
	padding: 10px 13px 0 10px;
}*/

y finalmente busca:

Código: Seleccionar todo

.headerbar {
	margin-bottom: 4px;
	padding: 5px;
	border-radius: 7px;
}

y replaza por:

Código: Seleccionar todo

.headerbar {
	margin-bottom: 4px;
	padding: 5px;
	border-radius: 7px;
	text-align: center;
}

Eso te debería centrar tanto el logo como el título.

[wonder]

Hola,
Gracias por la respuesta.
Si, así es, solo me refiero al estilo Prosilver, no obstante, la idea principal no es que el contenedor tenga todo su ancho, aunque si es posible, bienvenido es.

Hice lo comentado, pero no lo centra, me lo ha alineado a la izquierda y sin margenes por arriba y en el lado.

Mi idea es centrarlo respecto al contenedor, que aparezca en el centro del contenedor, si puedo quitar el título (y descripción) bien también.

He visto que con estos cambios, el texto se pone en gris (edito con Kate), por lo que "deduzco" (solo deduzco) queda anulado el código reemplazado.

También en tu última indicación de edición, dónde me indicas buscar esto:

Código: Seleccionar todo

.headerbar {
	margin-bottom: 4px;
	padding: 5px;
	border-radius: 7px;
}

Veo que me indicas reemplazar pero veo el mismo código, no veo ningún cambio, siguiendo el resto, he añadido en la primera línea el /* y en la última también */, quedando así:

Código: Seleccionar todo

/*.headerbar {
	margin-bottom: 4px;
	padding: 5px;
	border-radius: 7px;
	text-align: center;
}*/

No se si es correcta esta última edición por mi parte o no.

Lo dicho, gracias!

[AlfredoRamos]

En el último remplazo sólo era necesario añador text-align: center; al final, encerrar el texto entre /* y */ como bien lo dices, es para comentar el código, lo que hace que sea ignorado por el navegador.

Como estaba anteriormente tal vez no sea lo que querías, ya que usa float para alinear el logo, título y descripción a la izquierda y el cuadro de búsqueda a la derecha, pero veo que lo has movido de lugar, por lo que float ya no es necesario.

Para centrar un elemento, y dependiendo de lo que este sea, puedes usar margin, checa estos enlaces (ingles) que tal vez te ayuden a conseguir exactamente lo que quieres:

https://www.w3schools.com/csS/css_align.asp
https://www.w3.org/Style/Examples/007/center.en.html
https://css-tricks.com/centering-css-complete-guide/

[wonder]

Ostras...mira que me fijé bien en el último reemplazo y no fui capaz de ver que era necesario añadir text-align: center...
Lo he reestablecido como debía y añadido el align center, ahora efectivamente aparece como la idea que tenía/deseaba.
No se me hubiese ocurrido mirar de editar la parte de headerbar para tema de logo, aunque va ahí, pero pensé que si "tocaba" ahí...no solo sería para el logo.

Correcto, con float (como estaba anteriormente) no era lo que quería pues se alineaba a la izquierda, título, descripción y logo, el cuadro de búsqueda a la derecha, esta movido, pero con extensión (si supiese hacerlo sin extensión lo haría así).

Ahora queda como la idea que quería, gracias, no obstante, he realizado algunas pruebas en el common.css para ver si quito el Título y Descripción (ahora la descripción no sale porque tengo el campo en blanco) pero la idea sería dejar solo el logo, sin el título que aparezca justo debajo (o en su defecto, ponerlo encima, lo que he realizado no ha funcionado, sabes si es posible?

Sobre los enlaces, gracias, el margin lo conozco un poco, no obstante, lo que me "falla" es localizar los elementos en los css del style, el primer link es muy bueno.

De nuevo, gracias!

[AlfredoRamos]

Puedes ocultar el título y la descripción (sin dejar en blanco su valor) comentando el código HTML.

En styles/prosilver/template/overall_header.html

Busca:

Código: Seleccionar todo

				<h1>{SITENAME}</h1>
				<p>{SITE_DESCRIPTION}</p>

Y remplaza con lo siguiente:

Código: Seleccionar todo

				<!--<h1>{SITENAME}</h1>
				<p>{SITE_DESCRIPTION}</p>-->

Esto hará que lo anterior sea ignorado por el navegador, seguirá estado ahí pero no se mostrará, de esta forma haces cambios no destructivos, o si lo prefieres puedes eliminar esas líneas por completo.

[wonder]

Prefiero comentar siempre, como dices, así son cambios no destructivos, luego, nunca se sabe, volver a ponerlo o similar, tan solo es descomentar el código.

Funcionó perfecto, de nuevo, gracias!

[Antoniomerino1982]

Este tema es de los mejor que vengo viendo.

[Pingui]

Hola amigos...

Antes de nada deciros qué, antes de hacer nada en la web lo hago en la copia que tengo hecha a través del xampp para comprobar de que no me falle.

@AbaddonOrmuz nos dice que, escribiendo o eliminando esto...

Código: Seleccionar todo

				<!--<h1>{SITENAME}</h1>
				<p>{SITE_DESCRIPTION}</p>-->

El nombre y descripción de la web quedan ocultos.
No lo dudo ni mucho menos, mi pregunta es que en la web si funciona sin problemas y en cambio en la web a través del xampp no me hace ni caso.
He mirado bien el fichero en styles/prosilver/template/overall_header.html y lo que mencionas está totalmente borrado.

¿Podéis ayudarme con esta duda?

Gracias por todo.

[AlfredoRamos]

@Pingui supongo que has limpiado la chaché, cierto?

En ese caso se me ocurre que estes modificando prosilver cuando tu estilo sea otro y, aunque hereda del mismo, tiene su propio fichero (sin modificar) overall_header.html

[Pingui]

Pue sí, la caché desde ACP la he limpiado un par de veces, y la del navegador también con ctrl+f5.

El estilo que estoy utilizando es el mismo que la web principal, Prosilver SE, lo único que en ese estilo no encuentro el fichero que me mencionas, overall_header.html

Eso es lo que me extraña y por eso os pregunto, porque en el fichero de Prosilver que tengo en la web funciona y en el fichero de Prosilver a través de xampp no.

[Pingui]

Buenos días @AbaddonOrmuz y perdón por hacer doble post.

Encontré el error, estaba donde decías, lo único que yo no lo ví.

Muchas gracias por tu aclaración y puedo decir que mi duda ya está resuelta

Saludos cordiales...

[AlfredoRamos]

@Pingui me alegra que este solucionado.

Procedo a cerrar el tema.