Hello,
you can override dark mode with CSS and it should be quite easy.
Your text on the banner image is probably wrapped in some div with class (let’s say this class name is “banner-text”). To override background color write something like this:
body.wp-night-mode .banner-text {
background-color: transparent;
}
Let me know if that helped or if you need anything else.
Best regards
Thread Starter
Ruanna
(@ruanna)
Thank you for that @markoarula – I am using Beaver Builder on this page, and for whatever reason the css isn’t working. I’ve tried targeting numerous things, always the black band is present in night mode. If I empty the field and zero out the margins it becomes a thin black line, bah. (Not ruling out my own ineptitude yet.)
If you’d like to look closer I would be happy to provide a login. Otherwise I’ll try to figure out a workaround. Thanks, it’s a neat plugin and one person on the team is insisting on night mode, so I’d love to make it work.
I would like to take a closer look. You don’t have to send me login credentials, your website/project URL will be enough in this case.
Thread Starter
Ruanna
(@ruanna)
Okay, it’s a mess but I appreciate you having a look. Everything I’ve done is on the home page.
The two full-width “image” rows both use the ‘banner-text’ class. The css you provided is in style.css.
A new issue has arisen. The first / topmost full-width image is a UABB image carousel. I thought maybe this change would eliminate the problem that exists on the 2nd full-width image row. But when dark mode is switched on, the whole thing disappears on hover.
The second full-width image has a thin black line running through it in dark mode. That row uses a background image and the content area (a necessary part of the row) is empty. In dark mode the content are turns into a thin black line. If I put content into that area, the black background gets taller and more obvious.
torclodging.com
password: soakhere
Thank you!
Try this for full-width image on hover:
body.wp-night-mode-on .uabb-image-carousel .uabb-image-carousel-content:hover .uabb-inner-mask {
background: none;
}
and this for black line on second full-width image:
body.wp-night-mode-on .banner-text .fl-row-content-wrap * {
background: none;
}
or you can add more specific class then .banner-text on that row.
Unfortunately, there is no better way than playing with CSS, so that everyone can fit the look they want.
In the future I will probably make some better way for editing, so no one will have to override things with CSS.
Thread Starter
Ruanna
(@ruanna)
Thank you!
For some reason I missed this response until today. The styles you provided work. It is good to know that if I dig in to the CSS and style things properly, everything will look fine in dark mode. I appreciate the help.
For complex themes, I think it is better to not customize the dark mode colors globally and set them one by one, for me it has been the best way to get exactly the result I was looking for, but it takes time and css knowledge.
