Jump to content

Multiple banners

Recommended Posts

Hello all,

I currently have a custom CSS that activates the sites Light and Dark Modes based on device settings. I recently had some blog banners made with Red/Black and Red/Grey font colours. The Red/Black logo doesn’t look great on Dark Mode. 

Is it possible to have multiple banners uploaded (either via CSS code etc) for a site that rotates and changes based on whether the site is on Light or Dark Mode? Black/Red banner when in Light Mode and Black/Grey banner when in Dark Mode.

I’m using the Avenue Template.

Any help and guidance will be greatly appreciated. Thanks in advance for your help.

43914E98-14A4-4373-AA60-D55FC69AD636.jpeg

rev6a-Dark Logo@2x.png

Link to comment
  • Replies 4
  • Views 1k
  • Created
  • Last Reply
30 minutes ago, tuanphan said:

Can you share link to your site, and CSS you used for Dark/Light Mode?

Hi @tuanphan,

Thanks for taking the time to help.

I’m using the Avenue Template.

The website: https://www.chambyte.net

The CSS for the Dark/Light Mode theme:

  @media (prefers-color-scheme:     dark) {
   body {
 color: #fafafa;
 background-color: #1a1a1a; 
 }
 .blog-title a {
 color: #ffffff;
 }
   .post-title a {
   color: #ffffff !important;
 } 
    blockquote p {
   color: #ffffff !important;
 }
 /* Tagline */
 .logo-subtitle {
     color: white;
 }
 /* Nav */
 nav.main-nav li a {
     color: white !important;
 }
 /* Post Title */
 article h1.entry-title a {
     color: white !important;
 }
div#mobileMenuLink a {
     color: #fff;
 }

 @media (prefers-color-scheme:dark) {
    h2, h3 {
    color: #fff !important;
 }
 }

 }

article h2.entry-title a {
     color: white !important;
 }

 

Link to comment
 @media (prefers-color-scheme:     dark) {
.logo-image .logo img {
    display: none;
}
.logo a:before {
    content: "";
    background-image: url(https://beaverhero.com/wp-content/uploads/2019/10/headon-generatepress1.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    display: block;
    width: 300px;
    height: 100px;
    margin: 10px auto;
}
.logo a {display: block;}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
16 hours ago, tuanphan said:

 @media (prefers-color-scheme:     dark) {
.logo-image .logo img {
    display: none;
}
.logo a:before {
    content: "";
    background-image: url(https://beaverhero.com/wp-content/uploads/2019/10/headon-generatepress1.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    display: block;
    width: 300px;
    height: 100px;
    margin: 10px auto;
}
.logo a {display: block;}
}

 

Amazing. Many many thanks @tuanphan. Truly appreciated. 

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.