donloper Posted December 18, 2022 Share Posted December 18, 2022 And if you want an image instead of a color, you can use this: body[class*="collection-type-blog"].view-item header#header { background-image:url(url-goes-here); } Link to comment
donloper Posted December 18, 2022 Share Posted December 18, 2022 And if you want to add an image, but have an overlay color over it with some opacity, then try this out: body[class*="collection-type-blog"].view-item header#header { background-image:linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(your-image-url-here); } tuanphan 1 Link to comment
StoneSoupFarm Posted March 14, 2023 Share Posted March 14, 2023 I had the same issue and the code shared worked for me. Thank you! I changed the blog header to a dark color so that my white logo shows up. However, now I can't see my nav items because they are in a dark color also. Does anyone know how to change the color of the nav items just on blog pages to show up on a darker color? I'm using Squarespace 7.0 Marta Template. Link to comment
tuanphan Posted March 18, 2023 Share Posted March 18, 2023 On 3/15/2023 at 4:46 AM, StoneSoupFarm said: I had the same issue and the code shared worked for me. Thank you! I changed the blog header to a dark color so that my white logo shows up. However, now I can't see my nav items because they are in a dark color also. Does anyone know how to change the color of the nav items just on blog pages to show up on a darker color? I'm using Squarespace 7.0 Marta Template. Hi, Can you share link to your site? We can check easier 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
cinstudio Posted March 24, 2023 Share Posted March 24, 2023 I'm having the same issue with my site. I changed the blog header to black so that the logo shows up (using the code provided, thank you) .... and now I can't see the nav items because they are black. How do I change the nav text links to white on just the blog post page? I'm using Squarespace 7.1 Link to comment
tuanphan Posted March 25, 2023 Share Posted March 25, 2023 On 3/24/2023 at 8:33 PM, cinstudio said: I'm having the same issue with my site. I changed the blog header to black so that the logo shows up (using the code provided, thank you) .... and now I can't see the nav items because they are black. How do I change the nav text links to white on just the blog post page? I'm using Squarespace 7.1 Individual Posts or Blog List 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
RikkiG Posted April 13, 2023 Share Posted April 13, 2023 Instead of setting a background color, is it possible to set a color theme? I can change the background color with the code above, but the drop down menu is still not right. Link to comment
tuanphan Posted April 16, 2023 Share Posted April 16, 2023 On 4/13/2023 at 9:49 AM, RikkiG said: Instead of setting a background color, is it possible to set a color theme? I can change the background color with the code above, but the drop down menu is still not right. Can you share link to your site? We can check easier 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
ducksflytogether Posted April 19, 2023 Share Posted April 19, 2023 On 4/16/2023 at 4:50 AM, tuanphan said: Can you share link to your site? We can check easier I'm not the original commenter but I'm looking for the same solution. Thanks in advance for your help! On all pages except the blog, my site header is transparent on initial page load and then has a black background once you begin scrolling. On the blog, the header shows a white background when you scroll down, which causes all menu items in white text to be unreadable. It also causes my drop down menu text to be black when it should be white. Link to sample blog post on website here: https://wolf.studio/case-studies/best-headshot-for-linkedin-tips-2023 Link to homepage showing how the header should behave: https://wolf.studio/ How can I force the site header on the blog to be the same as the rest of the website? Can I force it to use a specific color theme? It is using "Lightest 1" but should be "Darkest 1" Will a solution for the above also change the drop down menu text for "Photography" in my header to be white? It is currently unreadable against the semitransparent drop down background. Thanks! Link to comment
tuanphan Posted April 22, 2023 Share Posted April 22, 2023 On 4/19/2023 at 9:06 AM, ducksflytogether said: I'm not the original commenter but I'm looking for the same solution. Thanks in advance for your help! On all pages except the blog, my site header is transparent on initial page load and then has a black background once you begin scrolling. On the blog, the header shows a white background when you scroll down, which causes all menu items in white text to be unreadable. It also causes my drop down menu text to be black when it should be white. Link to sample blog post on website here: https://wolf.studio/case-studies/best-headshot-for-linkedin-tips-2023 Link to homepage showing how the header should behave: https://wolf.studio/ How can I force the site header on the blog to be the same as the rest of the website? Can I force it to use a specific color theme? It is using "Lightest 1" but should be "Darkest 1" Will a solution for the above also change the drop down menu text for "Photography" in my header to be white? It is currently unreadable against the semitransparent drop down background. Thanks! Add to Design > Custom CSS body[class*="type-blog"].view-item header#header.shrink 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
mikelmuruzabal Posted May 23, 2023 Share Posted May 23, 2023 (edited) Hello, hope you can help me. What would be the code for changing the header background color in all blog post pages with a dynamic header? www.murustudios.squarespace.com pw: 1111 Many thanks for your help! Edited May 23, 2023 by mikelmuruzabal Link to comment
tuanphan Posted May 25, 2023 Share Posted May 25, 2023 On 5/23/2023 at 10:14 PM, mikelmuruzabal said: Hello, hope you can help me. What would be the code for changing the header background color in all blog post pages with a dynamic header? www.murustudios.squarespace.com pw: 1111 Many thanks for your help! I don't see blog page on your site. Can you share link? 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
mikelmuruzabal Posted May 31, 2023 Share Posted May 31, 2023 Sure, this is the address: https://murustudios.squarespace.com/work pw 1111 I have code for changing the header background color one page by one page, but I was wondering if there's an option to change the header background color of all blog post pages at the same time, but not from the main blog page ("work"). Many thanks for your help! Link to comment
tuanphan Posted June 2, 2023 Share Posted June 2, 2023 On 6/1/2023 at 12:52 AM, mikelmuruzabal said: Sure, this is the address: https://murustudios.squarespace.com/work pw 1111 I have code for changing the header background color one page by one page, but I was wondering if there's an option to change the header background color of all blog post pages at the same time, but not from the main blog page ("work"). Many thanks for your help! Add to Page Header, note: .view-list for list page, .view-item for individual pages <style> body.view-item header#header { background-color: orange !important; } </style> If you use Personal Plan, let me know, we will give another code 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
mikelmuruzabal Posted June 5, 2023 Share Posted June 5, 2023 (edited) Thanks Tuan, much appreciated. That code worked well but I wanted to maintain the dynamic header, so I finally used this code (in the header code injection area of the main Blog page): <style> body.view-item [data-header-style="dynamic"].header.shrink{ background: #003CD3; } </style> This is working fine, but if you see something wrong please let me know. Thx! Edited June 5, 2023 by mikelmuruzabal tuanphan 1 Link to comment
javierospina Posted July 13, 2023 Share Posted July 13, 2023 On 12/15/2019 at 11:11 AM, tuanphan said: Add to Home > Design > Custom CSS .collection-type-blog.view-item header.Header.Header--bottom { background: blue; } amazing it worked for me but I have same problem with my check out page. do you please have the code for this? Link to comment
tuanphan Posted July 15, 2023 Share Posted July 15, 2023 On 7/14/2023 at 4:23 AM, javierospina said: amazing it worked for me but I have same problem with my check out page. do you please have the code for this? Use this code body#cart, body#Cart { header.Header.Header--bottom { background: blue; }} javierospina 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
javierospina Posted July 17, 2023 Share Posted July 17, 2023 my problem was solved on that particular page but now I have problem with this page but now i have the same problem with this page https://www.javierospina.com/store/ibiza-es-vedr-gsxye Link to comment
tuanphan Posted July 19, 2023 Share Posted July 19, 2023 On 7/18/2023 at 1:19 AM, javierospina said: my problem was solved on that particular page but now I have problem with this page but now i have the same problem with this page https://www.javierospina.com/store/ibiza-es-vedr-gsxye Add to Design > Custom CSS /* Products header */ body[class*="type-products"].view-item header.Header { background-color: #f1f !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
E8h5S7Z Posted September 6, 2023 Share Posted September 6, 2023 On 2/19/2022 at 5:46 PM, tuanphan said: Add to Design > Custom CSS body[class*="collection-type-blog"].view-item header#header { background-color: #f1f !important; } Tuanphan, this worked well for me! but would it also be possible to change the font color of the header navigation, just on the blog post page as well? Link to comment
tuanphan Posted September 7, 2023 Share Posted September 7, 2023 On 9/6/2023 at 2:03 PM, NDucrETH said: Tuanphan, this worked well for me! but would it also be possible to change the font color of the header navigation, just on the blog post page as well? Use this body[class*="collection-type-blog"].view-item header#header { background-color: #f1f !important; } body[class*="collection-type-blog"].view-item header#header 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
E8h5S7Z Posted September 8, 2023 Share Posted September 8, 2023 (edited) 15 hours ago, tuanphan said: Use this body[class*="collection-type-blog"].view-item header#header { background-color: #f1f !important; } body[class*="collection-type-blog"].view-item header#header div.header-nav-item>a { color: black !important; } This approach is proving to be a little complicated, so going to move in a different direction. Thank you for the assistance nonetheless! Edited September 8, 2023 by NDucrETH tuanphan 1 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