Alternate Logo (logo-changer.html) with adaptive-color-scheme

8 replies·opened May 30, 2022

pardthemonsterMay 30, 2022

I have a light and dark logo and use adaptive-color-scheme to select between the two.

I am interested in utilizing the alternate logo code (logo-changer.html), but am unsure how to use with adaptive-color-scheme. Is there a way to use these two together?

<!-- Logo
============================================= -->
<div id="logo">
	<a href="index.html" class="standard-logo" data-dark-logo="images/logo-dark.png" data-sticky-logo="demos/media-agency/images/logo-media.png" data-mobile-logo="demos/media-agency/images/logo-media.png"><img src="images/logo.png" alt="Canvas Logo"></a>
	<a href="index.html" class="retina-logo" data-dark-logo="images/logo-dark@2x.png" data-sticky-logo="demos/media-agency/images/logo-media@2x.png" data-mobile-logo="demos/media-agency/images/logo-media@2x.png"><img src="images/logo@2x.png" alt="Canvas Logo"></a>
</div><!-- #logo end -->

SemiColonWebSTAFFMay 31, 2022

Hello,

Currently, the Adaptive Color Scheme works only with Light/Dark Logos: data-dark-logo Attribute. The Sticky/Mobile Logos are currently not supported. We will sure work on including this feature in the next update. Meanwhile, you can consider using CSS to manipulate the Logo Visibility by using the .dark class. Example:

body:not(.dark) .sticky-header #logo img.logo-sticky-dark {
	display: none;
}

.dark .sticky-header #logo img.logo-sticky-dark {
	display: block;
}

This is not tested completely but should work fine. You can further extend this using your codes.

Hope this Helps!

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

pardthemonsterMay 31, 2022

I think I am missing something you may have intended for me to do. I now have the following code, but it is not working still.

<style>

body:not(.dark) .sticky-header #logo img.logo-sticky-dark {
	display: none;
}

.dark .sticky-header #logo img.logo-sticky-dark {
	display: block;
}

</style>

</head>

<body class="stretched adaptive-color-scheme">

	<!-- Document Wrapper
	============================================= -->
	<div id="wrapper" class="clearfix">

		<!-- Header
		============================================= -->
		<header id="header" data-menu-padding="27" data-sticky-menu-padding="19">
			<div id="header-wrap">
			<div class="container-fluid px-5 clearfix">
					<div class="header-row">

						<!-- Logo
						============================================= -->
						<div id="logo">
							<a href="index.html" class="standard-logo" data-dark-logo="images/logo-dark.png" data-sticky-logo="demos/media-agency/images/logo-media.png" data-logo-sticky-dark="demos/media-agency/images/logo-media-dark.png"><img src="images/logo.png" alt=""></a>
							<a href="index.html" class="retina-logo" data-dark-logo="images/logo-dark@2x.png" data-sticky-logo="demos/media-agency/images/logo-media@2x.png" data-logo-sticky-dark="demos/media-agency/images/logo-media-dark@2x.png"><img src="images/logo@2x.png" alt=""></a>
						</div><!-- #logo end -->

The following is a test link with same code.
https://www.aaronbonine.com/portfolio-birds2.html

SemiColonWebSTAFFJun 1, 2022

Hello,

Thanks for your Patience!

We have tried testing the codes we had provided you with but unfortunately this is definitely not working as we had expected it to. We Really Apologize for the Inconveniences caused. Currently, making the Sticky/Mobile Logo work with Adaptive Color Scheme will require more Customization than we had thought earlier. Currently, only the Light/Dark Logos are compatible with the Adaptive Color Schemes. We will make this more seamless in the Future Updates and will send you a notification once this feature is available. 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.

pardthemonsterMar 16, 2023

For v7, it appears the logo-changer.html has 4 instances now and maybe could now support adaptive-color-scheme?

<!-- Logo
============================================= -->
<div id="logo">
	<a href="index.html">
		<img class="logo-default" srcset="images/logo.png, images/logo@2x.png 2x" src="images/logo@2x.png" alt="Canvas Logo">
		<img class="logo-dark" srcset="images/logo-dark.png, images/logo-dark@2x.png 2x" src="images/logo-dark@2x.png" alt="Canvas Logo">
		<img class="logo-sticky" srcset="demos/media-agency/images/logo-media.png, demos/media-agency/images/logo-media@2x.png 2x" src="demos/media-agency/images/logo-media@2x.png" alt="Canvas Logo">
		<img class="logo-mobile" srcset="demos/media-agency/images/logo-media.png, demos/media-agency/images/logo-media@2x.png 2x" src="demos/media-agency/images/logo-media@2x.png" alt="Canvas Logo">
	</a>
</div><!-- #logo end -->

Any update to this?

SemiColonWebSTAFFMar 17, 2023

Hello,

Yes!! Absolutely Possible!

Use the following CSS:

/* For Adaptive Sticky Logo */
.adaptive-color-scheme.dark .sticky-header #logo [class^="logo-"] { display: none !important; }
.adaptive-color-scheme.dark .sticky-header #logo .logo-sticky-dark { display: flex !important; }

/* For Adaptive Mobile Logo */
body.adaptive-color-scheme.dark:not(.is-expanded-menu) #logo [class^="logo-"] { display: none !important; }
body.adaptive-color-scheme.dark:not(.is-expanded-menu) #logo .logo-mobile-dark { display: flex !important; }

Use the following Logo Code:

<div id="logo" class="me-5">
	<a href="index.html">
		<img class="logo-default" srcset="images/logo.png, images/logo@2x.png 2x" src="images/logo@2x.png" alt="Canvas Logo">
		<img class="logo-dark" srcset="images/logo-dark.png, images/logo-dark@2x.png 2x" src="images/logo-dark@2x.png" alt="Canvas Logo">
		<img class="logo-sticky-dark" srcset="demos/real-estate/images/logo.png, demos/real-estate/images/logo@2x.png 2x" src="demos/real-estate/images/logo@2x.png" alt="Canvas Logo">
		<img class="logo-mobile-dark" srcset="demos/restaurant/images/logo.png, demos/restaurant/images/logo@2x.png 2x" src="demos/restaurant/images/logo@2x.png" alt="Canvas Logo">
	</a>
</div>

This should work fine. Hope this Helps!

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

pardthemonsterMar 17, 2023

The CSS worked, but I had to use the following to achieve still having not-dark functionality. Is this correct or is there more optimal method?:

<div id="logo">
	<a href="index.html">
		<img class="logo-default" srcset="images/logo.png, images/logo@2x.png 2x" src="images/logo@2x.png" alt="">
		<img class="logo-dark" srcset="images/logo-dark.png, images/logo-dark@2x.png 2x" src="images/logo-dark@2x.png" alt="">
		<img class="logo-sticky" srcset="demos/media-agency/images/logo.png, demos/media-agency/images/logo@2x.png 2x" src="demos/media-agency/images/logo@2x.png" alt="">
		<img class="logo-mobile" srcset="demos/media-agency/images/logo.png, demos/media-agency/images/logo@2x.png 2x" src="demos/media-agency/images/logo@2x.png" alt="">
		<img class="logo-sticky-dark" srcset="demos/media-agency/images/logo-dark.png, demos/media-agency/images/logo-dark@2x.png 2x" src="demos/media-agency/images/logo-dark@2x.png" alt="">
		<img class="logo-mobile-dark" srcset="demos/media-agency/images/logo-dark.png, demos/media-agency/images/logo-dark@2x.png 2x" src="demos/media-agency/images/logo-dark@2x.png" alt="">
	</a>
</div>

SemiColonWebSTAFFMar 17, 2023

Hello,

If you plan to use a different Sticky/Mobile Logo for Light Scheme too, you will then need to include the Light Versions as well. The above used code is correct and you can add any variations of this code according to your needs. The current Logo system was created with this flexibility in mind and the ability to handle different logos using CSS only.

Hope this Helps!

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

pardthemonsterMar 17, 2023

Thank you, this is what I have been looking for! Consider solved.

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