How to get a black version of logo on a particular page

Site URL: https://www.logophlo.com/

Hello Community, 

I am looking for a way to have a colored version of my logo on my website's blog page. On all other pages I use a white transparent background png.

Problem is the blog is white and I like it that way. I would like to use a different color version of the logo on just the blog page. 

I tried potential solutions from similar forum questions to no avail. 

Any help is highly appreciated. 

Thank you. 

Insert to Home > Design > Custom CSS

.collection-type-blog-basic-grid .header-title-logo img {
    filter: invert(1);
    -webkit-filter: invert(1);
}

51 minutes ago, tuanphan said:

Insert to Home > Design > Custom CSS

.collection-type-blog-basic-grid .header-title-logo img {
    filter: invert(1);
    -webkit-filter: invert(1);
}

 

Hi tuanphan,

Thanks a million. This custom CSS code worked great. Appreciate it a lot. 

Just out of curiosity, is it possible to change the logo to a specific color (RGB Code: #519AC9) using this code? 

3 hours ago, RichJr said:

Hi tuanphan,

Thanks a million. This custom CSS code worked great. Appreciate it a lot. 

Just out of curiosity, is it possible to change the logo to a specific color (RGB Code: #519AC9) using this code? 

Hi. No. You need to create new logo on your pc, then upload to your site & add this script code to Page Settings > Advanced > Header to replace with new logo.

Do you use Personal or Business Plan? If Business Plan, I will send the code.

On 9/27/2020 at 3:43 AM, tuanphan said:

Hi. No. You need to create new logo on your pc, then upload to your site & add this script code to Page Settings > Advanced > Header to replace with new logo.

Do you use Personal or Business Plan? If Business Plan, I will send the code.

 

Hello tuanphan,

Appreciate the help a lot.

I am on a business plan

22 hours ago, RichJr said:

Hello tuanphan,

Appreciate the help a lot.

I am on a business plan

Add to Blog Page Settings > Advanced > Header

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
	$('.header-title-logo img').attr('src','https://beaverhero.com/wp-content/uploads/2019/06/trees-3464777_640-min.jpg');
});
</script>

4 hours ago, tuanphan said:

Add to Blog Page Settings > Advanced > Header

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
	$('.header-title-logo img').attr('src','https://beaverhero.com/wp-content/uploads/2019/06/trees-3464777_640-min.jpg');
});
</script>

 

Thank you, once again, tuanphan.

The code worked perfectly. 

On 9/26/2020 at 6:05 PM, tuanphan said:

Insert to Home > Design > Custom CSS

.collection-type-blog-basic-grid .header-title-logo img {
    filter: invert(1);
    -webkit-filter: invert(1);
}

 

hello tuanphan

is there a way I can use this code for specific URLs, not only blog types?

thank you very much in advance

2 minutes ago, axelvargas said:

hello tuanphan

is there a way I can use this code for specific URLs, not only blog types?

thank you very much in advance

Add to Page Header

<style>
  .header-title-logo img {
    filter: invert(1);
    -webkit-filter: invert(1);
}
</style>

4 minutes ago, tuanphan said:

Add to Page Header

<style>
  .header-title-logo img {
    filter: invert(1);
    -webkit-filter: invert(1);
}
</style>

 

flawless.

thank you very much!

35 minutes ago, tuanphan said:

Add to Page Header

<style>
  .header-title-logo img {
    filter: invert(1);
    -webkit-filter: invert(1);
}
</style>

 

hello again Tuanphan

this worked perfectly for desktop, but failed to work on mobile.

i tried solving it using the following, but it didn't work:

<style>
  .header-title-logo img {
    filter: invert(1);
    -webkit-filter: invert(1);
}
</style>

<style>
@media screen and (max-width:640px) { 
.view-item .Header-branding-logo { 
    -webkit-filter: invert(100%); 
     filter: invert(100%); 
     filter:progid:DXImageTransform.Microsoft.BasicImage(invert='1'); 
}
}
 </style>

do you have any advice for it to work both on mobile and desktop?

thanks

1 hour ago, axelvargas said:

hello again Tuanphan

this worked perfectly for desktop, but failed to work on mobile.

i tried solving it using the following, but it didn't work:

<style>
  .header-title-logo img {
    filter: invert(1);
    -webkit-filter: invert(1);
}
</style>

<style>
@media screen and (max-width:640px) { 
.view-item .Header-branding-logo { 
    -webkit-filter: invert(100%); 
     filter: invert(100%); 
     filter:progid:DXImageTransform.Microsoft.BasicImage(invert='1'); 
}
}
 </style>

 

do you have any advice for it to work both on mobile and desktop?

 

thanks

I guess logo mobile has different class.

Can you share site url? I can check easier.

On 10/7/2020 at 9:33 PM, tuanphan said:

I guess logo mobile has different class.

Can you share site url? I can check easier.

sure, url is bcfit.mx and pass is BC2020.

the whole site is still in progress, but i haven't managed to solve the logo color.

thanks in advance!

Try the following.

@media screen and ( max-width: 799px ) {

  .header-mobile-logo {
  
    -webkit-filter: invert( 100% );
    filter: invert( 100% );
    
    }
  }

Let us know how it goes.

On 10/15/2020 at 9:08 PM, creedon said:

Try the following.

@media screen and ( max-width: 799px ) {

  .header-mobile-logo {
  
    -webkit-filter: invert( 100% );
    filter: invert( 100% );
    
    }
  }

Let us know how it goes.

this worked perfectly

thank you very much!