v7 Promo Box Bug (.promo-light with body .dark)

8 replies·opened Mar 15, 2023
P
pardthemonsterMar 15, 2023

The .promo-light with body using adaptive-color-scheme or dark has bug and does not have box surrounding when dark. Also, all? URLs do not have color in dark, but are instead white.

In template for this can be troubleshooted in promo-boxes.html when changing body to dark and viewing these two:

					<div class="promo promo-light p-4 p-md-5 mb-5">
						<div class="row align-items-center">
							<div class="col-12 col-lg">
								<h3>Try Premium Free for <span>30 Days</span> and you'll never regret it!</h3>
								<span>Starts at just <em>$9.99/month</em> afterwards. No Ads, No Gimmicks and No SPAM. Just Real Content.</span>
							</div>
							<div class="col-12 col-lg-auto mt-4 mt-lg-0">
								<a href="#" class="button button-large button-circle button-black m-0">Start Trial</a>
							</div>
						</div>
					</div>
				<div class="promo promo-light promo-full promo-uppercase p-4 p-md-5 mb-5">
					<div class="container">
						<div class="row align-items-center">
							<div class="col-12 col-lg">
								<h3>Try Premium Free for <span>30 Days</span> and you'll never regret it!</h3>
							</div>
							<div class="col-12 col-lg-auto mt-4 mt-lg-0">
								<a href="#" class="button button-large button-circle button-black m-0">Start Trial</a>
							</div>
						</div>
					</div>
				</div>
S
SemiColonWebSTAFFMar 15, 2023

Hello,

  1. Canvas 7 uses Contrast Scheme by default for extended flexibility and to make every element Dark/Light by default, so the Promo Light uses --cnvs-contrast-100 Color Scheme. You can consider replacing the promo-light Class with bg-light not-dark Classes and this will enable Light Scheme even on the Dark Background.

  2. Consider finding the following code in the style.css File:

.dark {
  --cnvs-link-color: var(--bs-gray-200);
  --cnvs-link-hover-color: var(--bs-white);

and delete the following:

--cnvs-link-color: var(--bs-gray-200);

This will enable Theme Color on Dark Layouts.

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

P
pardthemonsterMar 15, 2023

This solution paired with adaptive-color-scheme does not provide good contrast or ideal solution. My issue may be better understood at: https://www.owlhollowbakery.com/v7/index.html and switching to dark mode and then light mode.

S
SemiColonWebSTAFFMar 15, 2023

Hello,

Thank You so much for further clarification on this, we see what you mean by this. Consider using the following Code in the Custom CSS:

.promo {
	--cnvs-promo-light: rgba(var(--cnvs-contrast-rgb),0.05);
}

If this works fine for you. We will update this shortly in the Package. Thanks for your Patience.

Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.

S
SemiColonWebSTAFFMar 15, 2023

Hello,

Currently, you can simply find and delete the following code from the style.css File:

--cnvs-link-color: var(--bs-gray-200);

We will try including this in an update we will be releasing shortly. It requires some additional testing thus there might be a slight delay. Thanks for your Patience.

Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.

P
pardthemonsterMar 15, 2023

The promo box CSS solved the first part, but second part for white URLs when dark:

deleting --cnvs-link-color: var(--bs-gray-200); does not resolve making text color again in dark.

S
SemiColonWebSTAFFMar 16, 2023

Hello,

We have already fixed this issue and the update will be available shortly for download. We will send you an email notifying about the update. Thanks for your Patience.

Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.

P
pardthemonsterMar 16, 2023

Solved with 7.0.2, thanks!

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard