Changing Logo Color on Different Site Pages

7 hours ago, mvorozco16 said:

Hi @tuanphan it only applied on the Home Page, how can I make it on all pages?

Also, I hope you can help me with this:
How can I change a picture position on the mobile version. I want this picture to go below this text (see attached picture)

Thank you in advance!

#1. Try this code

/* blog posts logo */
header.Header img {
    filter: invert(1);
    -webkit-filter: invert(1);
}

#2. Which page?

@tuanphan #2: On the home Page. I need the text to go above the photo, so it has the white background!

Thanks!

@tuanphan oh #1 didn't worked! It turned the desktop logo black

14 hours ago, mvorozco16 said:

@tuanphan oh #1 didn't worked! It turned the desktop logo black

Use this code if you want to run on mobile only

@media screen and (max-width:767px) {
/* blog posts logo */
header.Header img {
    filter: invert(1);
    -webkit-filter: invert(1);
}
}

Hello!! @tuanphan @creedon

I'm trying to change the color of this logo only on the portfolio project pages to white. I actually have the correct white logo uploaded to the site title, but I guess since I uploaded a dark version in the Portfolio's advanced settings on the landing page (where thumbnails reside), the dark version is taking affect on all the interior project pages. Can I override that so the white logo (uploaded to site title) applies to all project pages? 

I have tried the invert css but the color comes out almost lavender or light pink. So ideally, I'd like to use the actual png file uploaded to the site. 

Here's one of the project pages: 

https://misfit-house.com/portfolio/highland

Many thanks!

On 4/28/2023 at 2:07 AM, ACScruggs said:

Hello!! @tuanphan @creedon

I'm trying to change the color of this logo only on the portfolio project pages to white. I actually have the correct white logo uploaded to the site title, but I guess since I uploaded a dark version in the Portfolio's advanced settings on the landing page (where thumbnails reside), the dark version is taking affect on all the interior project pages. Can I override that so the white logo (uploaded to site title) applies to all project pages? 

I have tried the invert css but the color comes out almost lavender or light pink. So ideally, I'd like to use the actual png file uploaded to the site. 

Here's one of the project pages: 

https://misfit-house.com/portfolio/highland

Many thanks!

Add to Portfolio Page Header

<style>
  div.header-title-logo a {
    content: unset !important;
}
</style>

Thank you @tuanphan. That code changed the site logo on the portfolio landing page as well as the interior project pages. Is it possible to add the ":not selector" so we can eliminate the portfolio landing page from that code? 

The landing page with thumbnail images needs to have a dark site logo and the interior project pages need to have the light site logo. 

On 5/3/2023 at 12:13 AM, ACScruggs said:

Thank you @tuanphan. That code changed the site logo on the portfolio landing page as well as the interior project pages. Is it possible to add the ":not selector" so we can eliminate the portfolio landing page from that code? 

The landing page with thumbnail images needs to have a dark site logo and the interior project pages need to have the light site logo. 

Portfolio landing page, you mean list page or individual page?

@tuanphan Correct, the portfolio list page (where the project thumbnails reside) does not need a different logo color. 

I'm trying to target the individual project pages to insert a white logo on those. For example, in the screenshot below, the project "Highland" (and all other project pages) need a white logo. 

Note: I have tried the invert css coding but the logo color comes out lavender or light pink. It should be true white. 

On 5/4/2023 at 11:58 PM, ACScruggs said:

@tuanphan Correct, the portfolio list page (where the project thumbnails reside) does not need a different logo color. 

I'm trying to target the individual project pages to insert a white logo on those. For example, in the screenshot below, the project "Highland" (and all other project pages) need a white logo. 

Note: I have tried the invert css coding but the logo color comes out lavender or light pink. It should be true white. 

 

If individual pages, use this new code

<style>
  body.view-item div.header-title-logo a {
    content: unset !important;
}
</style>

That did it @tuanphan thank you!! 

Hello, I am having a similar problem. The Navigation links on my home page are white (and then black on all the other pages). Given that i have a video as my background as the first block, the white text is not very visible. I would like to make the navigation links on my home page black like the rest of the site but I do not know where to adjust the code to do this. Can someone help me?

18 hours ago, Ifigeneia said:

Hello, I am having a similar problem. The Navigation links on my home page are white (and then black on all the other pages). Given that i have a video as my background as the first block, the white text is not very visible. I would like to make the navigation links on my home page black like the rest of the site but I do not know where to adjust the code to do this. Can someone help me?

You can change Homepage First Section Text Links Color (Menu will inherit First Section Style)

Or add this code to Design > Custom CSS

body.homepage div.header-nav-item>a {
	color: black !important;
}

@tuanphanI had a similar problem, and this worked, thanks!

Is there a way for the logo to also change color only on the homepage?

On 8/28/2023 at 3:57 PM, Sufast said:

@tuanphanI had a similar problem, and this worked, thanks!

Is there a way for the logo to also change color only on the homepage?

If 7.1, you use this CSS. If it doesn't work, please share link to your site, we can check easier

body.homepage:not(.header--menu-open) header#header img {
	filter: invert(1);
	-webkit-filter: invert(1);
}

Hello @tuanphan, I tried using your code to change the logo from white to black on blog pages but for some reason, it does not work. 😞

This is the example blog article page: https://www.decordesign.ae/luxury-interior-hub/blog-post-title-four-9c2rz

And this is the code that I used: 

<style>
/* blog posts logo */
body[class*="type-luxury-interior-hub"].view-item header.Header img {
    filter: invert(1);
    -webkit-filter: invert(1);
}
</style>

Could you please help? 

On 9/12/2023 at 2:14 AM, DD2023 said:

Hello @tuanphan, I tried using your code to change the logo from white to black on blog pages but for some reason, it does not work. 😞

This is the example blog article page: https://www.decordesign.ae/luxury-interior-hub/blog-post-title-four-9c2rz

And this is the code that I used: 

<style>
/* blog posts logo */
body[class*="type-luxury-interior-hub"].view-item header.Header img {
    filter: invert(1);
    -webkit-filter: invert(1);
}
</style>

 

Could you please help? 

Your class name doesn't exist. If you want to apply to all blog items, use this code

<style>
  /* blog posts logo */
body[class*="type-blog"].view-item header#header img {
    filter: invert(1);
    -webkit-filter: invert(1);
}
</style>

5 hours ago, tuanphan said:

Your class name doesn't exist. If you want to apply to all blog items, use this code

<style>
  /* blog posts logo */
body[class*="type-blog"].view-item header#header img {
    filter: invert(1);
    -webkit-filter: invert(1);
}
</style>

It works now @tuanphan! Thank you so much, you made my day 🙏

Hi @tuanphan & @rwp on my collection pages i inverted the logo color, but then it also inverts on the product page which i don't want. How can i only invert it on the collection page?

On 10/3/2023 at 11:03 PM, nobody said:

Hi @tuanphan & @rwp on my collection pages i inverted the logo color, but then it also inverts on the product page which i don't want. How can i only invert it on the collection page?

Here is the site: https://donkaka.com/medici-collection-men/p/grey-wool-jacket

The url doesn't work. Which code did you use?

On 10/6/2023 at 2:03 AM, tuanphan said:

The url doesn't work. Which code did you use?

Sorry @tuanphan I changed the name of the product here is the new link: 

https://donkaka.com/medici-collection-men/p/palio-cashmere-jacket

This is the code I used:

<style>
.header-title-logo:not(view-item) {
    filter: invert(1);
  }
</style>

On 10/7/2023 at 10:30 PM, nobody said:

Sorry @tuanphan I changed the name of the product here is the new link: 

https://donkaka.com/medici-collection-men/p/palio-cashmere-jacket

 

This is the code I used:

<style>
.header-title-logo:not(view-item) {
    filter: invert(1);
  }
</style>

Change code to this

<style>
body.view-list .header-title-logo {
    filter: invert(1);
  }
</style>

Hello, I am having a similar issue and hoping to find a solution. I am using the Forte template (7.0) and have a custom logo uploaded that is black. On the main projects page, I have a slideshow of project images. The navigation text and tag line change from black to white depending on the color of the background image.  Is there a way to have my logo also change with the header text color? The project site address is https://ianmcnairyarchitecture.com/projects

Thanks!

On 1/19/2024 at 1:05 AM, ianmcnairy said:

Hello, I am having a similar issue and hoping to find a solution. I am using the Forte template (7.0) and have a custom logo uploaded that is black. On the main projects page, I have a slideshow of project images. The navigation text and tag line change from black to white depending on the color of the background image.  Is there a way to have my logo also change with the header text color? The project site address is https://ianmcnairyarchitecture.com/projects

Thanks!

When slideshow change, it has a dark and light class name, so you can try this CSS code to invert logo on Light theme

div[class*="weight-light"] .logo img {
    filter: invert(1) !important;
}

On 1/20/2024 at 12:31 AM, tuanphan said:

When slideshow change, it has a dark and light class name, so you can try this CSS code to invert logo on Light theme

div[class*="weight-light"] .logo img {
    filter: invert(1) !important;
}

 

Thanks for the reply! I am new to this so not sure it's in the right spot. Here is a snip of the code. It's located in the "pages" index settings. Is this correct? You can see the logo is still black and the text is white. Any thoughts?