Avisos
Vaciar todo

[Resuelto] Fondo azul en las paginas cuando estoy editando

13 Respuestas
4 Usuarios
0 Reacciones
43 Visitas
Respuestas: 20
Eminent Member
Topic starter
 

Hola, buen día.

El fondo de las páginas se muestra en azul oscuro cuando quiero editar algo de su contenido, lo cual impide leer los textos. 

Como ejemplo ilustrativo, anexo capturas de pantalla sobre la página Áreas de Investigación, donde se puede observar que el color de fondo de una sección está definido como blanco #FFFFFF y, de todas maneras, se muestra azul.

Foro3 1a
Foro3 1c

 

Sin embargo, en la web publicada, la sección muestra correctamente el fondo blanco con las letras oscuras, como es la definición general para todas las páginas.

Foro3 1d

 

En vista de que la IA de Google me ha estado ayudando para resolver otros problemas que tenía con el azul oscuro del hero, no sé si se han añadido códigos CSS que podrían explicar este comportamiento.

Aquí lo transcribo para que, por favor, lo revisen y me indiquen cuál debería ser el conjunto de códigos CSS que conserven las características actuales de la web publicada y resuelvan el problema del fondo azul cuando estoy editando las páginas.

 

.wp-block-heading { overflow-wrap: break-word; hyphens: auto; text-wrap: balance; } .wp-block-heading:lang(ko), .wp-block-heading:lang(th), .wp-block-heading:lang(lo), .wp-block-heading:lang(my), .wp-block-heading:lang(km), .wp-block-heading:lang(ar), .wp-block-heading:lang(ur) { word-break: keep-all; hyphens: manual; }

header.wp-block-template-part, .site-header, .wp-block-group.has-background {

    background-color: #0D47A1 !important;

}

/* --- REPARACIONES DE DISEÑO SEGURAS --- */

 

/* Evita que la foto de inicio tape el título */

.home .site-header, 

.home .hero-section,

.home header { 

    position: relative !important;

    z-index: 9999 !important;

}

 

.home #content, 

.home .site-main,

.home main {

    position: relative !important;

    z-index: 1 !important;

    margin-top: 0 !important;

    padding-top: 60px !important; 

}

 

/* --- FORZAR BLANCO EN EL BLOQUE SECTION ESPECÍFICO --- */

.page .wp-block-template-part + .wp-block-group,

.page [class*="section"],

.page [class*="Section"] {

    background-color: #ffffff !important;

    background: #ffffff !important;

}

 

/* Forzar que todos los textos dentro de esas secciones pasen a negro */

.page [class*="section"] p,

.page [class*="section"] span,

.page [class*="section"] h1,

.page [class*="section"] h2,

.page [class*="section"] h3 {

    color: #111111 !important;

}

 

/* --- ARMONIZACIÓN GLOBAL DE FOTOS DE SECCIÓN Y TEXTO CLARO --- */

 

/* Fuerza a que los títulos dentro de CUALQUIER sección con foto sean blancos en toda la web */

.page [class*="section"] .wp-block-cover h1,

.page [class*="section"] .wp-block-cover h2,

.page [class*="section"] [class*="Fondo"] h1,

.page [class*="section"] [class*="Fondo"] h2,

.page .wp-block-cover__inner-container h1,

.page .wp-block-cover__inner-container h2 {

    color: #ffffff !important;

    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6) !important;

}

 

/* Cambia el filtro oscuro por el azul corporativo en todas las fotos de cabecera de la web */

.page .wp-block-cover .wp-block-cover__background,

.page [class*="section"] [class*="Fondo"] .wp-block-cover__background,

.page .wp-block-cover-image .has-background-dim {

    background-color: #0D47A1 !important;

    opacity: 0.5 !important; 

}

 

/* --- FORZAR TEXTO CLARO EN EL HERO DE LA PÁGINA DE INICIO --- */

.home .wp-block-cover p,

.home .wp-block-cover span,

.home .wp-block-cover li,

.home [class*="section"] [class*="Fondo"] p,

.home [class*="section"] [class*="Fondo"] span,

.home .wp-block-cover__inner-container p {

    color: #ffffff !important;

}

 

/* --- REPARACIÓN INICIO: Corrige la posición fija y empuja el contenido para que no se tape el título --- */

.home header.wp-block-template-part, 

.home .site-header {

    position: fixed !important;

    top: 0 !important;

    left: 0 !important;

    width: 100% !important;

    z-index: 99999 !important;

}

.home #content, .home .site-main, .home main {

    position: relative !important;

    z-index: 1 !important;

    margin-top: 140px !important; /* Empuja la foto hacia abajo para descubrir el título oculto */

}

 

/* --- REPARACIÓN SECCIONES: Aplicación de la regla avanzada de Bruno para evitar el encogimiento --- */

body:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part:has(.ext-header-sticky.ext-header-sticky--floating-pill),

header.wp-block-template-part,

.site-header,

[class*="header-sticky"] {

    top: 0 !important;

    max-width: 100% !important;

    width: 100% !important;

}

 

/* Evitar que el contenedor exterior genere una segunda franja */ html body:not(.home):not(#aecave-header-fix) header.wp-block-template-part { background: transparent !important; } /* Anular el encogimiento y la animación de scroll de Extendify */ html body:not(.home):not(#aecave-header-fix) header.wp-block-template-part .ext-header-sticky.ext-header-glass.ext-header-sticky--floating-pill { width: 100% !important; min-width: 100% !important; max-width: none !important; box-sizing: border-box !important; margin-left: 0 !important; margin-right: 0 !important; margin-inline: 0 !important; left: 0 !important; right: 0 !important; inset-inline: 0 !important; transform: none !important; translate: none !important; animation: none !important; animation-name: none !important; animation-duration: 0s !important; animation-delay: 0s !important; animation-timeline: none !important; animation-range: normal !important; animation-range-start: normal !important; animation-range-end: normal !important; border-radius: 0 !important; }

 

 

Agradezco anticipadamente toda la asesoría que me puedan brindar.

 

Atentamente,

German


 
Respondido : 24/06/2026 10:21 pm
Pepe
 Pepe
Respuestas: 42532
Illustrious Member
 

Hola German.

Por lo que veo, el que te esta causando el problema es el siguiente código:

header.wp-block-template-part, .site-header, .wp-block-group.has-background {

background-color: #0D47A1 !important;

}

 

Prueba a eliminarlo y lo revisas.

 

Un saludo


 
Respondido : 25/06/2026 8:47 am
Respuestas: 20
Eminent Member
Topic starter
 

Hola Pepe, buen día.

Muchísimas gracias por identificar la causa del problema. Efectivamente, ahora ya está bien luego de haber borrado esa sección del código CSS.

 

Atentos saludos,

German


 
Respondido : 25/06/2026 11:24 am
Pepe
 Pepe
Respuestas: 42532
Illustrious Member
 

Hola German.

Nada Gacias a ti 😀 

Cualquier consulta que tengas no dudes en comunicarlo.

 

Un saludo 


 
Respondido : 25/06/2026 11:50 am
Respuestas: 20
Eminent Member
Topic starter
 

Hola Pepe,

Perdona, pero tuve que reabrir el caso, pues me acabo de percatar de que se perdió el fondo azul de la cabecera, hero, en la página de Inicio. Como puedes observar en la captura de pantalla, la imagen llega hasta la parte superior de la página, en lugar de comenzar justo a continuación de la cabecera.

Foro3 2a

 

Las otras secciones están bien con el color azul oscuro en el hero y la imagen comenzando a continuación. Aquí tienes como ejemplo la sección Quienes Somos

Foro3 2b

 

El problema con la imagen de inicio lo tuve desde que se creó la web con la IA de Webempresa y luego con la IA de Google se logró una solución parcial donde al menos aparecía el hero con fondo azul. Imagino que eso fue incluido en los códigos CSS que, ahora al borrar la sección sugerida por ti, trajo esta consecuencia.

Te agradecería evaluar cuál sería la mejor solución para resolver el problema de la sección de Inicio sin que vuelva el anterior cuando estoy editando las páginas.

 

Atentamente,

German


 
Respondido : 25/06/2026 12:36 pm
Karen Rios
Respuestas: 20420
Illustrious Member Admin
 

Hola German, 

Añade nuevamente el codigo que eliminaste anteriormente, una vez lo tengas activo nos comentas nuevamente para revisar con detalle y no genere este conflicto. 

Un Saludo


 
Respondido : 25/06/2026 2:13 pm
Respuestas: 20
Eminent Member
Topic starter
 

Hola Karen,

Listo, ya incluí nuevamente los códigos que había eliminado y ahora la página de Inicio está como antes. Claro, volvio el problema del fondo azul cuando estoy editando las páginas.

Estaré pendiente de tus recomendaciones.

Atentos saludos,

German


 
Respondido : 25/06/2026 4:33 pm
Argenis
Respuestas: 12300
Illustrious Member Admin
 

Hola German,

Puedes cambiar el código que tienes agregado, específicamente este:

header.wp-block-template-part, .site-header, .wp-block-group.has-background {
background-color: #0D47A1 !important;
}

Y cámbialo por este:

header.wp-block-template-part {
background-color: #0D47A1 !important;
}
body:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part:has(.ext-header-sticky.ext-header-sticky--floating-pill.ext-header-glass) .ext-header-sticky.ext-header-sticky--floating-pill.ext-header-glass {
animation: none !important;
}

Verifica y nos comentas que tal te va asi.

Un saludo 🖐️ 


 
Respondido : 25/06/2026 5:03 pm
Respuestas: 20
Eminent Member
Topic starter
 

Hola, Argenis, buen día.

Muchas gracias por tu sugerencia, pero tampoco funcionó. Se corrige el fondo de las páginas cuando estoy en modo de edición, pero desconfigura la página de Inicio, tal como con el código anterior sugerido. Aquí tienes cómo queda.

Foro3 3a

 

Voy a restaurar el código previo a la espera de tu nueva sugerencia.

 

Atentos saludos,

German


 
Respondido : 26/06/2026 10:42 am
Respuestas: 20
Eminent Member
Topic starter
 

Hola  Argenis,

Por cierto, en caso de que resulte útil, aquí transcribo la sección inicial de los códigos CSS que incluye la última sugerencia hecha, antes de yo restaurarla a la versión previa.

 

.wp-block-heading { overflow-wrap: break-word; hyphens: auto; text-wrap: balance; } .wp-block-heading:lang(ko), .wp-block-heading:lang(th), .wp-block-heading:lang(lo), .wp-block-heading:lang(my), .wp-block-heading:lang(km), .wp-block-heading:lang(ar), .wp-block-heading:lang(ur) { word-break: keep-all; hyphens: manual;
}
header.wp-block-template-part {
background-color: #0D47A1 !important;
}
body:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part:has(.ext-header-sticky.ext-header-sticky--floating-pill.ext-header-glass) .ext-header-sticky.ext-header-sticky--floating-pill.ext-header-glass {
animation: none !important;
}

/* --- REPARACIONES DE DISEÑO SEGURAS --- */

/* Evita que la foto de inicio tape el título */


 
Respondido : 26/06/2026 10:46 am
Pepe
 Pepe
Respuestas: 42532
Illustrious Member
 

Hola German.

Por favor elimina este bloque de CSS:

header.wp-block-template-part, .site-header, .wp-block-group.has-background {

background-color: #0D47A1 !important;

}

 

Una vez lo tengas añade lo siguiente:

.wp-block-group.alignfull.ext-animate--on.is-style-ext-preset--group--natural-1--header-1.ext-header-sticky.ext-header-overlay.ext-header-glass.ext-header-sticky--floating-pill.has-text-color.has-background.has-link-color.wp-elements-b72b3c12aba6f41f7871f2c5425e5c27.has-global-padding.is-layout-constrained.wp-block-group-is-layout-constrained.is-style-ext-preset--group--natural-1--header-1--1.ext-animate.ext-animated-fade-up
{
background-color: #0742A3 !important;
}
header.wp-block-template-part{
background-color: #0742A3 !important;
}

 

Revisa si se soluciona y nos comentas.

 

Un saludo


Esta publicación ha sido modificada el hace 3 meses 2 veces por Pepe
 
Respondido : 26/06/2026 11:23 am
Respuestas: 20
Eminent Member
Topic starter
 

Hola, Pepe,

Muchas gracias por el nuevo código sugerido. Resolvió el problema del fondo oscuro cuando edito páginas, manteniendo la página de Inicio sin alteración.

Atentos saludos,

German


 
Respondido : 26/06/2026 2:00 pm
Pepe
 Pepe
Respuestas: 42532
Illustrious Member
 

Hola German.

Nada, Gracias a ti 😊 

Cualquier consulta que tengas no dudes en comunicarlo.

 

Un saludo


 
Respondido : 26/06/2026 2:15 pm