Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
Guest Cham

Multiple banners

Asked by Guest Cham

Question

Guest Cham   

Guest Cham
Posted (edited)

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

Edited by Cham

Share this post

Link to post

4 answers to this question

Recommended Posts

  • 0

tuanphan    7,157

tuanphan
Posted 
 @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;}
}

 

You can send your question to my email to get faster answer.

How to Setup Password & Share URL - Free Templates - Free Code - CSS ID List

OFF Forum from 05 - 09/06/2020, back to hometown

Share this post

Link to post
  • 0

Guest Cham   

Guest Cham
Posted (edited)
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;
 }

 

Edited by Cham

Share this post

Link to post
  • 0

Guest Cham   

Guest Cham
Posted
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. 

Share this post

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment

Sign Up / Login
Go To Question Listing
×
×
  • Create New...

Support

Community

Developers

Resources