SOLUCIONADO! Top Bar - Centrar el contenido

Pack_12 · August 25, 2020

Hola, (PS 1752 + Plantilla Warehouse) https://www.farmaciafuentelucha.com

Le llevo dedicado mucho tiempo a la Top Bar y no hay manera de que me resulte de buen ver. Ya no se si es obsesión o no, pero creo que no consigo que el contenido de la Tob Bar esté centrado verticalmente.

No se si se aprecia o no, supongo que en la web se ve mejor, pero no dejo de ver que los iconos de las RRSS se queda muy pegados al border superior, e incluso también me sucede con el link a "Conócenos" de la derecha. Creo que el contenido de la top bar no se centra verticalemente de manera automática. Por defecto estoy usando las opciones de edición de Prestashop de mi plantilla en el Backoffice, y le he quitado hasta el margen y el padding (valores a 0), apra tratar de averiguar por qué courre.

¿Alguien se le ocurre que puede ocurrir?

Me gustaría que el contenido se quedara totalmente centrado, como la top bar de cualquier página de mi sector. Pj.. https://www.promofarma.com/

Gracias de antemano!!

Edited September 3, 2020 by Pack_12 (see edit history)

Adrián de Grafreak · August 26, 2020

Buenas,

Al fin y al cabo para conseguir lo que quieres debes mirar cada uno de los elementos que están dentro.

Según unos cuantos ajustes que he hecho:

- La imagen /img/cms/van.png debería ser menos alta ya que provoca ese crecimiento de la barra
- al elemento #iqithtmlandbanners-block-7 debes ponerle vertical-align: middle;
- al primer row (el que tiene justify-content-between) debes añadirle la clase .align-items-center

Con estos 3 ajustes consigues que todo quede alineado al medio más o menos. Si quieres ser aun más pixel perfect deberías mirar el line-height de la fuente.

Además, y creo que esto es más importante que todo quede alineado al medio, no copies y pegues nunca desde Word, pásalo a través de un bloc de notas, ya que tienes muuuucho código oculto heredado del Word. Como por ejemplo:

Espero que te funcione con estos cambios.

Salut!

Pack_12 · August 27, 2020

On 8/26/2020 at 9:05 AM, Adrián de Grafreak said:

Buenas,

Al fin y al cabo para conseguir lo que quieres debes mirar cada uno de los elementos que están dentro.

Según unos cuantos ajustes que he hecho:

- La imagen /img/cms/van.png debería ser menos alta ya que provoca ese crecimiento de la barra
- al elemento #iqithtmlandbanners-block-7 debes ponerle vertical-align: middle;
- al primer row (el que tiene justify-content-between) debes añadirle la clase .align-items-center

Con estos 3 ajustes consigues que todo quede alineado al medio más o menos. Si quieres ser aun más pixel perfect deberías mirar el line-height de la fuente.

Además, y creo que esto es más importante que todo quede alineado al medio, no copies y pegues nunca desde Word, pásalo a través de un bloc de notas, ya que tienes muuuucho código oculto heredado del Word. Como por ejemplo:



Espero que te funcione con estos cambios.

Salut!

Muchas gracias @Adrián de Grafreak

Efectivamente al modificar la imagen de la furgo ha mejorado.

Sin embargo me pasa algo curioso: He añadido el parámetro "vertical-align: middle;" tanto en el block #iqithtmlandbanners-block-7 como en el block #iqithtmlandbanners-block-2

Curiosamente en el 2 se me ha centrado perfectamente, y es el texto del centro y mas largo, por tanto más importante. pero en en cambio en el 7 no se centtra!! Será porque es un href??? No entiendo. (me pasa en PC y en modo MOBILE)

Otra cosa curiosa es que en modo MOBILE los logos de las redes sociales de repente también sale desalineados!! Purque? 😕

Que rabia me da!!

Gracias de antemano tron.

Slds,

Adrián de Grafreak · August 28, 2020

Buenas,

No veo en la web que tengas el vertical-align middle aplicado a iqithtmlandbanners-block-7 ni que el primer elemento (el que tiene justify-content-between) tenga la clase .align-items-center.

Además al texto del mediop tienes aplicado un line-height 107% cuando debería ser 1em.

Espero que con esto ya puedas ajustarlo bien.

Salut!

Pack_12 · August 28, 2020

15 hours ago, Adrián de Grafreak said:

Buenas,

No veo en la web que tengas el vertical-align middle aplicado a iqithtmlandbanners-block-7 ni que el primer elemento (el que tiene justify-content-between) tenga la clase .align-items-center.

Además al texto del mediop tienes aplicado un line-height 107% cuando debería ser 1em.

Espero que con esto ya puedas ajustarlo bien.

Salut!

Vaya gracias!

El block 7 efectivamente. Al aplicar el align middle al <a> del href ya me lo ha centrado. Genial! El line height del texto del medio también lo puse a 1em.

Lo que no se muy bien es como resolver lo de la clase .align-items-center del primer elemento. El resto de elementos los configuro directamente con un modulo de html&banners del vbackoffice en los que retoco cada block y puedo tocar código. Es cómodo. Pero este, imagino que para meter esa clase en ese elemento de las redes sociales debo hacerlo en el fichero de la plantilla del topbar? donde exactamente?

Te agradezco si me lo aclaras. Creo que con eso ya se quedaría todo guay. Gracias de antemano @Adrián de Grafreak!

Edited August 28, 2020 by Pack_12 (see edit history)

Adrián de Grafreak · August 31, 2020

Pues ponle el estilo por css;

align-items: center;

En realidad es lo mismo que la clase que te digo.

Salut!

Pack_12 · August 31, 2020

9 hours ago, Adrián de Grafreak said:

Pues ponle el estilo por css;

align-items: center;

En realidad es lo mismo que la clase que te digo.

Salut!

Hola @Adrián de Grafreak,

Pues he probado a todos los div y clases de esa row y ya no se como hacer para que funcione y alinee. Al no ser un bloque específico no se a que aplicarlo para que haga efecto:

div#row justify-content-between { align-items: center;}

#row justify-content-between { align-items: center;}

.row justify-content-between { align-items: center;}

Lo mismo probé con otros divs (social-links _topbar, d-inline-block, col col-auto col-md left-nav...etc), y no consigo... 😓

Slds,

Adrián de Grafreak · September 1, 2020

Buenas,

Tu linea debería ser:

.header-nav .row.justify-content-between { align-items: center; }

Revísate y (estudia un poco de css) ya que en los estilos que has puesto, simpre que llamas a una clase va con . inicial y cuando son los clases que van juntas no llevan espacio.

Espero que con esto ya lo tengas todo ok.

Se agradecerá que cierres el debate y valores mis respuestas. Muchas gracias!!

Salut!

Pack_12 · September 1, 2020

12 hours ago, Adrián de Grafreak said:
Buenas,

Tu linea debería ser:
.header-nav .row.justify-content-between { align-items: center; }
Revísate y (estudia un poco de css) ya que en los estilos que has puesto, simpre que llamas a una clase va con . inicial y cuando son los clases que van juntas no llevan espacio.

Espero que con esto ya lo tengas todo ok.

Se agradecerá que cierres el debate y valores mis respuestas. Muchas gracias!!

Salut!

Mil gracias @Adrián de Grafreak! Tienes toda la razón , me falta bastante estudio de CSS. A ver si saco tiempo... 🤕

Lo he probado metiendolo en Custom CSS pero parece que no lo pilla, lo pegué tal cual me indicaste:

Pero no, en formato mobile siguen los iconos pegados arriba. no se centran...

Parece que no podré cerrar aun el debate

Slds!

Adrián de Grafreak · September 3, 2020

Borra el caché (de PrestaShop) y revisa que ese custom CSS se está cargando en la página, no la veo cargada en ningún sitio.

Si añado esa linea css por el inspeccionar del navegador si que funciona correctamente.

Espero que puedas resolverlo.

Salut!

Pack_12 · September 3, 2020

13 hours ago, Adrián de Grafreak said:

Borra el caché (de PrestaShop) y revisa que ese custom CSS se está cargando en la página, no la veo cargada en ningún sitio.

Si añado esa linea css por el inspeccionar del navegador si que funciona correctamente.

Espero que puedas resolverlo.

Salut!

Efectivamente! Parece que del custom CSS que hay en el módulo de la plantilla en el back office no lo pillaba.

Lo he clavado en el theme.css y listo, funciona!

Mil gracias @Adrián de Grafreak!

SOLUCIONADO! Top Bar - Centrar el contenido

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in