Avisos
Vaciar todo

unificar color en header  

Página 1 / 2
 
Javier
 Javier
Estimable Member

Hola,
Estoy pensando en cambiar el color de fondo del header.
He cambiado el codigo siguiente que tenia ya implementado en mi custom

#rt-header .rt-container {
background: #FF0000!important;
}

#rt-header .rt-grid-8 {
background-color:#FF0000;
}

Pero debe faltar algo porque el resultado es el siguiente

Como podéis ver hay una zona (alrededor del logo) que permanece gris, el color actual.
¿Que faltaría para que todo fuera rojo?

URL del sitio: Contenido solo visible a usuarios registrados

Citar
Respondido : 14/01/2018 7:14 pm
Javier
 Javier
Estimable Member

Hola,
Ya lo he encontrado. Vi que había otra linea en el codigo del custom y la añadí. Ahora todo el header es azul mediante el siguiente código:
#rt-header .rt-container {
background: #0489B1!important;
}
#rt-header .rt-grid-8 {
background-color:#0489B1;
}
.rt-grid-4 {
background: #0489B1;
}

El problema es que no acaba de quedar bien del todo. Se vé una pequeña linea blanca entre el top y el header, y otra de color azul entre la barra de navegación y el sidebar, tal y como muestro en la siguiente imagen:

¿Como arreglar esto?
Gracias

ResponderCitar
Respondido : 14/01/2018 7:35 pm

Gestor de Contraseñas - VPN Conexión Segura - Gestor 2FA (Segundo Factor de Autenticación

Luis Mendez Alejo
 Luis Mendez Alejo
Miembro Moderator

Hola Javier,

Yo sigo viendo en gris (o similar) la barra sperior e inferior de la banda roja.

Deberías añadir en tu archivo custom.css o style.css, al final lo siguiente:

#rt-top .rt-omega {
    background: #0489B1!important;
}

Y si la barra del menú la quieres poner también roja deberías añadir lo siguiente en style.css:

.gf-menu {
    background: #0489B1!important;  
}

Si son otros los cambios o colores agradecemos que lo especifiques.

Saludos

ResponderCitar
Respondido : 14/01/2018 8:03 pm
Javier
 Javier
Estimable Member

Hola Luis,
Gracias por la respuesta.
El header es azul ahora tal y como muestra la imagen del mensaje anterior.
Lo que quiero es arreglar las imperfecciones que muestro en los rectángulos en rojo.
Gracias

ResponderCitar
Respondido : 14/01/2018 8:26 pm

optimiza-automaticamente-todas-las-imagenes-de-tu-wordpress

Luis Mendez Alejo
 Luis Mendez Alejo
Miembro Moderator

Hola Javier,

Se trata de un borde que estás pintando en un estilo CSS del header:

#rt-header .rt-container {
    padding: 15px 0;
    border-top: 1px solid #d5d5d5;
}

Localiza ese estilo (#rt-header .rt-container) y elimina el "border-top"

Saludos

ResponderCitar
Respondido : 14/01/2018 8:40 pm
Javier
 Javier
Estimable Member

Hola Luis,
he estado revisando el código y no encuentro por ninguna parte el border-top.
El unico codigo que tengo referenciado al header es el siguiente:

#rt-header .rt-container {
background: #A4A4A4!important;
}
#rt-header .rt-grid-8 {
background-color:#A4A4A4;
}
.rt-grid-4 {
background: #A4A4A4;
}

ResponderCitar
Respondido : 14/01/2018 10:37 pm

Luis Mendez Alejo
 Luis Mendez Alejo
Miembro Moderator

Hola Javier,

Prueba a crear un estilo "override" en tu archivo custom.css o style.css que invalide ese border:

#rt-header .rt-container {
    border-top: none !important;
}

Saludos

ResponderCitar
Respondido : 14/01/2018 11:12 pm
Javier
 Javier
Estimable Member

Hola,
He echo lo que me dices y el borde en el sidebar con el color del header no desaparece tal y como muestra la siguiente imagen en el rectangulo rojo.

ResponderCitar
Respondido : 20/01/2018 9:18 pm

wpdoctor-revisa-la-salud-de-tu-wordpress

Luis Mendez Alejo
 Luis Mendez Alejo
Miembro Moderator

Hola Javier,

Aclarando conceptos:

- Yo te indiqué un override de CSS para quitar un borde del "header" y veo que ese borde ya no se muestra (1)

- Lo que tu muestras en tu captura (2) no es header y no es la línea de la que hablabas inicialmente en la consulta.

¿Que es lo que quieres ocultar/cambiar/modificar ahora que no es el header?

Saludos

ResponderCitar
Respondido : 20/01/2018 9:58 pm
Javier
 Javier
Estimable Member

En consultas anteriores lo que queria es que desaparecieran las dos.
Tienes razón, el código que me indicaste es para la linea blanca que se veia entre el top y el header (número 1 de tu imagen).
Ahora lo que quisiera es que desaparezca la linea del color del header, entre la barra de navegación y el sidebar (numero 2 en tu imagen)
Gracias

ResponderCitar
Respondido : 20/01/2018 10:21 pm

Cursos Gratuitos WordPress

Luis Mendez Alejo
 Luis Mendez Alejo
Miembro Moderator

Hola Javier,

Yo creo que es más un problema de color de fondo que de borde superior (top).

Prueba a añadir el siguiente estilo en style.css o en custom.css (según donde estés añadiendo estilos CSS personalizados):

.rt-grid-4 {
    background: #edebeb !important;
}

Saludos

ResponderCitar
Respondido : 20/01/2018 11:46 pm
Javier
 Javier
Estimable Member

Hola Luis,
Si inserto el codigo que me dices en style.css el resultado es que me elimina el color del header alrededor del logo.

He eliminado el código para que no se vea de esta forma. Lo digo por si lo compruebas verás que no es igual que en la imagen.

ResponderCitar
Respondido : 20/01/2018 11:53 pm

Gestor de Contraseñas - VPN Conexión Segura - Gestor 2FA (Segundo Factor de Autenticación

Luis Mendez Alejo
 Luis Mendez Alejo
Miembro Moderator

Hola Javier,

Prueba lo siguiente:

[id*="rt-sidebar"] .rt-block {
margin: -10px 10px 10px 0px;
}

Ten en cuenta que si cambias los banners de "sidebar" futuramente, menos banners o más altos, es posible que tengas que retocar estos valores de "margin".

No es una ciencia absoluta y otros factores alterar los resultados.

Saludos

ResponderCitar
Respondido : 21/01/2018 12:15 am
Javier
 Javier
Estimable Member

Perfecto.

Ya por último, si nos fijamos al detalle parece como que el rectangulo del header (en color azul) sobresale mas que la barra del top y la del navegador tal y como muestro en la siguiente imagen en rectángulo rojo.

¿Como igualar anchos para que el header no sobresalga por el lado derecho respecto a las dos barras?
Gracias

ResponderCitar
Respondido : 21/01/2018 10:35 am

optimiza-automaticamente-todas-las-imagenes-de-tu-wordpress

Pepe
 Pepe
Soporte CMS Webempresa Admin

Hola Javier.

Disculpa pero no entiendo muy bien lo que buscas, ¿ quieres que las dos franjas en color negro tengan el mismo tamaño?

Si es eso prueba con lo siguiente:

#rt-top .rt-omega {
    padding-top: 10px;
}

Un saludo

ResponderCitar
Respondido : 21/01/2018 10:53 am
Página 1 / 2