Pregunta sobre WP Night Mode de Wordpress:

Modo de anulación oscuro para ciertos elementos

Un usuario preguntó 👇

Hola, estoy experimentando con este plugin para un proyecto. ¿Hay alguna forma de superar el modo oscuro utilizando CSS en campos o módulos específicos? Por ejemplo, si pongo una línea de texto en html encima de una imagen de banner, cuando la configuro en modo oscuro, el fondo de todo ese div se oscurece, creando una banda negra alrededor de la imagen. Probé algunos estilos CSS usando color de fondo y opacidad, todavía no he encontrado el estilo mágico. Apreciamos los consejos, muchas gracias.

Este tema fue modificado hace 1 año, 7 meses por.

(@markoarula)

Hace 1 año, 7 meses

Hola,

puede anular el modo oscuro con CSS y debería ser bastante fácil.

Su texto en la imagen del banner probablemente esté envuelto en algún div con la clase (digamos que el nombre de esta clase es «banner-text»). Para superar el color de fondo, escriba algo como esto:

body.wp-night-mode .banner-text {
  background-color: transparent;
}

Avísame si eso te ayudó o si necesitas algo más.

Todo lo mejor

(@ruanna)

Hace 1 año, 7 meses

Gracias por eso @markoarula. Estoy usando Beaver Builder en esta página y, por alguna razón, el CSS no funciona. Intenté concentrarme en muchas cosas, la banda negra siempre está presente en el modo nocturno. Si vacío el campo y pongo a cero los márgenes, se convierte en una delgada línea negra, bah. (Sin borrar aún mi propia indiferencia).

Si desea echar un vistazo más de cerca, proporcionaría un inicio de sesión. De lo contrario, intentaré encontrar una medida de trabajo. Gracias, es un plugin genial y una persona del equipo está reclamando el modo nocturno, así que me encantaría que funcione.

(@markoarula)

Hace 1 año, 7 meses

Quiero echar un vistazo más de cerca. No es necesario que me envíe las credenciales de inicio de sesión, la URL de su sitio web / proyecto es suficiente en este caso.

(@ruanna)

Hace 1 año, 7 meses

Está bien, es un desastre, pero agradezco que lo veas. Todo lo que hice está en la página de inicio.

Ambos conjuntos de clases de «imagen» de ancho completo utilizan la clase «flag-text». El CSS que proporcionó está en style.css.

Ha surgido una nueva pregunta. La primera imagen óptima de ancho completo es un carrusel de imágenes UABB. Pensé que tal vez este cambio eliminaría el problema de la imagen de ancho completo de la segunda fila. Pero cuando el modo oscuro está activado, todo desaparece al pasar el mouse.

La segunda imagen de ancho completo tiene una delgada línea negra que la atraviesa en modo oscuro. Ese conjunto utiliza una imagen de fondo y el área temática (una parte esencial del conjunto) está vacía. En el modo oscuro, el material se convierte en una delgada línea negra. Si pongo contenido en esa área, el fondo negro se vuelve más fuerte y claro.

torclodging.com contraseña: soakhere

¡Gracias!

(@markoarula)

Hace 1 año, 7 meses

Pruebe esto para obtener una imagen de ancho completo al pasar el mouse:

body.wp-night-mode-on .uabb-image-carousel .uabb-image-carousel-content:hover .uabb-inner-mask {
  background: none;
}

y esto para la línea negra en la segunda imagen de ancho completo:

body.wp-night-mode-on .banner-text .fl-row-content-wrap * {
  background: none;
}

o puede agregar una clase .banner-text más específica a ese conjunto.

Desafortunadamente, no hay mejor manera que jugar con CSS, para que todos puedan adaptarse a la apariencia que desean.

En el futuro probablemente dejaré paso a la edición, por lo que nadie tendrá que exagerar con CSS.

(@ruanna)

Hace 1 año, 7 meses

¡Gracias!

Por alguna razón, me perdí esta respuesta hasta el día de hoy. Los estilos que proporcionaste funcionan. Soy muy consciente de que si profundizo en el CSS y le doy estilo a las cosas correctamente, todo se verá bien en el modo oscuro. Agradezco la ayuda.

(@fabienhugues)

Hace 1 año, 5 meses

Para temas complejos, creo que es mejor no personalizar los colores del modo oscuro en todo el mundo y configurarlos uno por uno, para mí la mejor manera era obtener exactamente el resultado que estaba buscando, pero lleva tiempo. e información de la SEC.

¿Solucionó tu problema??

0 / 0

Deja una respuesta 0

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *