tuanphan Posted June 1, 2022 Share Posted June 1, 2022 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? 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
mvorozco16 Posted June 1, 2022 Share Posted June 1, 2022 @tuanphan #2: On the home Page. I need the text to go above the photo, so it has the white background! Thanks! Link to comment
mvorozco16 Posted June 1, 2022 Share Posted June 1, 2022 @tuanphan oh #1 didn't worked! It turned the desktop logo black Link to comment
tuanphan Posted June 2, 2022 Share Posted June 2, 2022 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); } } 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
ACScruggs Posted April 27, 2023 Share Posted April 27, 2023 (edited) 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! Edited April 27, 2023 by ACScruggs Link to comment
tuanphan Posted April 29, 2023 Share Posted April 29, 2023 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> 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
ACScruggs Posted May 2, 2023 Share Posted May 2, 2023 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. Link to comment
tuanphan Posted May 4, 2023 Share Posted May 4, 2023 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? 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
ACScruggs Posted May 4, 2023 Share Posted May 4, 2023 (edited) @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. Edited May 4, 2023 by ACScruggs Link to comment
tuanphan Posted May 6, 2023 Share Posted May 6, 2023 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> ACScruggs 1 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
ACScruggs Posted May 12, 2023 Share Posted May 12, 2023 That did it @tuanphan thank you!! Link to comment
Ifigeneia Posted June 24, 2023 Share Posted June 24, 2023 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? Link to comment
tuanphan Posted June 25, 2023 Share Posted June 25, 2023 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; } 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
Sufast Posted August 28, 2023 Share Posted August 28, 2023 @tuanphanI had a similar problem, and this worked, thanks! Is there a way for the logo to also change color only on the homepage? Link to comment
tuanphan Posted August 30, 2023 Share Posted August 30, 2023 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); } 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
DD2023 Posted September 11, 2023 Share Posted September 11, 2023 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? Link to comment
tuanphan Posted September 14, 2023 Share Posted September 14, 2023 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> DD2023 1 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
DD2023 Posted September 14, 2023 Share Posted September 14, 2023 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 🙏 Link to comment
nobody Posted October 3, 2023 Share Posted October 3, 2023 (edited) 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? Edited October 7, 2023 by nobody Link to comment
tuanphan Posted October 6, 2023 Share Posted October 6, 2023 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? 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
nobody Posted October 7, 2023 Share Posted October 7, 2023 (edited) 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> Edited October 7, 2023 by nobody Link to comment
tuanphan Posted October 9, 2023 Share Posted October 9, 2023 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> nobody 1 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
ianmcnairy Posted January 18 Share Posted January 18 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! Link to comment
tuanphan Posted January 20 Share Posted January 20 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; } 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
ianmcnairy Posted January 22 Share Posted January 22 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? Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment